![]()
저번 시간에 todo 페이지를 만들었으니 이번엔 todo 페이지를 꾸며봅시다. 첫 번째 게시글에서 vuetify를 설치했으니 사용해봐야겠죠? todos.vue에 아래와 같이 적어줍니다. 투두 리스트 임시 카드 1번 투두에요 1번 내용이에요 그럼 아래와 같은 화면을 볼 수 있습니다. 우리의 예쁜 투두리스트의 첫 카드가 만들어졌네요! v-container는 vuetify에서 div와 같이 자식 태그들을 담을 공간을 의미합니다. v-card는 vuetify의 카드 컨테이너입니다. 위와 같이 예쁜 카드를 자동으로 만들어줍니다. v-card-title, v-card-subtitlek, v-card-text는 카드 안의 내용을 채우는 태그입니다. 카드에 어울리게 텍스트가 꾸며져 있습니다. 아래와 같이 assets/..
![]()
루트 폴더에 data.js 파일을 아래와 같이 만들어줍니다. 그리고 pages 디렉토리를 만든 후 안에 index.vue 파일을 만들어줍니다. 참고로 vuetify에선 class에 ma-3과 같은 이름을 추가함으로써 마진과 패딩을 줄 수 있습니다. 참고: https://vuetifyjs.com/en/styles/spacing/ CSS Spacing helpers Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5. vuetifyjs.com 홈페이지와 투두 페이지를 나눠주기 위해서 NuxtLink를 사용해 라우팅을 해줍니다. 넉스트에서는 자체적으로 vue-router를 사용해서 ..
![]()
완전히 새로운 스택들로 새 프로젝트를 시작할 일이 생겨서 배웠던 내용을 정리하기 위해 todolist강의를 제작하게 되었습니다. 사전 학습 목록 vue3.js javascript typescript 사전 설치 목록 node.js yarn node.js는 최신 lts 버전을 설치해주세요. Nuxt3 설치 npx nuxi init nuxt3-vuetify3-pinia cd nuxt3-vuetify3-pinia yarn install 위 코드를 실행하면 기본 라이브러리가 모두 설치됩니다. pinia와 vuetify3 설치 yarn add vuetify@3.0.0-alpha.12 sass pinia 설치가 완료되고 나면 아래와 같이 plugins 폴더 아래에 파일을 생성해주세요. 두 파일을 생성했으면 각 내용을..
