Nuxt

API 문서 링크 https://v3.nuxtjs.org/guide/directory-structure/nuxt ⭐ 제가 생각하는 개발할 때 많이 건드는 횟수, 중요도는 별 갯수로 표시했어요! (1~5개) ⭐ .nuxt ⭐ 개발 서버가 빌드된 폴더입니다. ssr 형태로 server, client가 모두 빌드되며, auto import, 자동완성을 위한 d.ts 파일들이 생성됩니다. 개발하면서 건들 일은 없어요! .output ⭐ yarn generate 시 생기는 실제 프로덕션이 빌드되는 폴더입니다. 안에 index.html이 있으며 정적 파일들이 생성됩니다. 호스팅 할 때 필요합니다. api ⭐⭐⭐⭐ Axios interface와 service들이 있는 폴더입니다. 백엔드에 http 요청을 보내는 ap..

Vue3: 프론트엔드 개발 프레임워크 Nuxt: Vue 개발 프레임워크, SSR 적용, SEO 적용, 개발 생산성 증가. 메타데이터, 쿠키 등의 솔루션 또한 제공 Quasar: 가장 대중적인 Vue UI 프레임워크(Capacitor 지원) Vite: 프론트엔드 웹팩, 롤업 등 패키지 관리 프레임워크 Vitest: Vite에서 제공하는 테스트 라이브러리(Jest와 같은 성격의 통합 테스트 툴) Pinia: 글로벌 스토어 라이브러리(Vuex, Redux와 같은 성격) Axios: 자바스크립트에서 가장 대표적인 RestAPI 라이브러리 Capacitor: 아이오닉을 이용해 앱, 웹, PWA 등 거의 모든 프론트 디바이스의 빌드를 지원하는 툴

저번 시간에 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를 사용해서 ..