[nuxt3] nuxt3 + vuetify3 + pinia + typescript로 todolist앱 만들기 -3-

저번 시간에 todo 페이지를 만들었으니 이번엔 todo 페이지를 꾸며봅시다. 첫 번째 게시글에서 vuetify를 설치했으니 사용해봐야겠죠?

todos.vue에 아래와 같이 적어줍니다.

<template>
  <div class="todos">
    <v-container fluid>
      <h4>투두 리스트</h4>
      <v-container class="todo-section">
        <v-card>
          <v-card-title>임시 카드</v-card-title>
          <v-card-subtitle>1번 투두에요</v-card-subtitle>
          <v-card-text>1번 내용이에요</v-card-text>
        </v-card>
      </v-container>
    </v-container>
  </div>
</template>


<script setup lang="ts"></script>

<style lang="scss">
.todo-section {
  width: 600px;
}
</style>

그럼 아래와 같은 화면을 볼 수 있습니다.

우리의 예쁜 투두리스트의 첫 카드가 만들어졌네요!

• v-container는 vuetify에서 div와 같이 자식 태그들을 담을 공간을 의미합니다.
• v-card는 vuetify의 카드 컨테이너입니다. 위와 같이 예쁜 카드를 자동으로 만들어줍니다.
• v-card-title, v-card-subtitlek, v-card-text는 카드 안의 내용을 채우는 태그입니다. 카드에 어울리게 텍스트가 꾸며져 있습니다.

아래와 같이 assets/javascripts 폴더를 만든 후 data 파일을 아래 파일에 넣어주세요. nuxt3에선 자바스크립트 파일을 아래와 같이 정리해서 넣습니다.

이제 투두리스트들을 내가 가져온 데이터들로 넣어야겠죠? 데이터를 import 해온 후에 v-for을 이용해서 투두리스트에 보여줄 겁니다.

data.js를 폴더에 넣으셨다면 todos.vue를 아래와 같이 작성해줍니다.

<template>
  <div class="todos">
    <v-container fluid>
      <h4>투두 리스트</h4>
      <v-container class="todo-section">
        <v-card v-for="todo in todos" :key="todo" class="ma-3">
          <v-card-title>{{ todo.title }}</v-card-title>
          <v-card-text>{{ todo.content }}</v-card-text>
        </v-card>
      </v-container>
    </v-container>
  </div>
</template>

<script setup lang="ts">
import data from "~~/assets/javascripts/data";

const todos = ref([...data]);
</script>

<style lang="scss">
.todos {
  .todo-section {
    width: 600px;
  }
}
</style>

이제 아래와 같은 화면을 볼 수 있습니다.

이제 예쁜 카드 화면들이 생겼네요! v-for을 이용하면 자바스크립트의 for문과 같이 데이터들을 UI에 담아 연속적으로 표현할 수 있습니다. v-for문 또한 기존 for문의 in, of 모두 사용할 수 있으며 배열의 경우엔 (value, index) in items, 객체의 경우엔 (value, name, object) in items와 같이 자료형의 키, 인덱스 또한 가져올 수 있습니다.

다음 시간엔 이 투두리스트를 생성, 읽기, 수정, 삭제(CRUD) 하기 위한 저장소를 pinia를 활용해 만들어보겠습니다.