❕게시글 더미 데이터 추가 ( js 하드코딩 )

<aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

지금은 템플릿에서 하드코딩 되어 있지만, 이후엔 exios라는 모듈로 Json데이터를 조회, v-bind:for문으로 렌더링 할 거임.

❗일단은 baords.js에서 여기 하드코딩 하자

</aside>

🔹 게시글 더미 데이터 하드코딩하기

• api/boards.js

  const boards = [
    { id: 1, title: 'title01', content: 'content01', createdAt: '2025-01-01' },
    { id: 2, title: 'title02', content: 'content02', createdAt: '2025-02-02' },
    { id: 3, title: 'title03', content: 'content03', createdAt: '2025-03-03' },
    { id: 4, title: 'title04', content: 'content04', createdAt: '2025-04-04' },
    { id: 5, title: 'title05', content: 'content05', createdAt: '2025-05-05' },
  ]
  
  // 목록 조회
  export function getBoards() {
    return boards
  }
  

🔹 더미 데이터 렌더링 ( v-for: )

• BoardItemView.vue

  <template>
    <div>
      <h1>Board List</h1>
      <hr class="my-3" />
      <div class="row g-1">
        <div v-for="board in boards" :key="board.id" class="col-4">
          <!-- prettier-ignore -->
          <BoardItem
            :title="board.title"
            :content="board.content"
            :created-at="board.createdAt"
            />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import BoardItem from '@/components/boards/BoardItem.vue'
  import { ref } from 'vue'
  import { getBoards } from '@/api/boards'
  
  const boards = ref()
  
  const fetchBoards = () => {
    boards.value = getBoards()
  }
  fetchBoards()
  </script>
  
  <style lang="scss" scoped></style>
  

  <aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

  BoardItem을 묶고 있는 그리드 div태그에 v-for를 작성해 반복 렌더링 구현!

  각 항목의 데이터는 v-bind:( : )로 BoardItem의 props에 Boards.js의 값을 전달 📤📥

  </aside>

🔷 상세 페이지 이동( 템플릿 바인딩, 상세 페이지 연결 )

• template

  <BoardItem
    :title="board.title"
    :content="board.content"
    :created-at="board.createdAt"
    @click="boardDetailPage(board.id)"
    />
  

• script setup

  const router = useRouter()
  
  const boardDetailPage = (id) => {
    router.push(`boards/${id}`)
  }
  

  

라우트 이름 기반 네비게이션( named route )

• index.js

  

• BoardListView.vue

  

<aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

path대신 name속성을 사용하여 라우팅이 가능하다.

id같은 데이터는 route의 prams로 들어가, id도 설정할 수 있다.

</aside>

🔶 프로그래밍 방식 네비게이션