VUE

docs: https://nuxt.com/docs/guide/directory-structure/layouts layouts는 Nuxt에서 헤더, 푸터나 배경 등을 재활용하기 위해 사용합니다. root 경로에 layouts폴더 생성 > default.vue 파일 생성 > 아래 코드 입력 home posts profile login footer app.vue에 아래 코드 넣기 혹시 에러가 난다면 컨트롤 + c 연타연ㅌ 아래와 같은 화면이 나온 것을 볼 수 있습니다. 되게 간편하죠? 이제 앱의 헤더와 푸터를 여러 페이지에서 동일하게 맞춰줄 수 있게 되었습니다. Nuxt3의 기본 레이아웃 이름은 default.vue 입니다. 그럼 다른 레이아웃은 어떻게 씌울까요? 로그인 페이지를 만들어 봅시다. 로그인 화면에..

docs: https://nuxt.com/docs/guide/directory-structure/pages pages는 홈페이지의 각 페이지들이 저장됩니다. Nuxt에서 자동으로 라우팅 설정을 해주기 때문에 따로 라우팅 설정을 안해도 되는 간편함이 있습니다. nuxt에서 sass, scss를 사용하기 위해서 아래 명령어를 입력해줍니다. npm install sass app.vue에 아래 코드를 넣어줍니다. home posts profile NuxtLink는 라우트 해주는 컴포넌트로 to안에 원하는 경로를 입력합니다. script옆의 setup은 vue3에서 제공해주는 setup스크립트를 사용한다는 의미입니다. docs: https://vuejs.org/api/sfc-script-setup.html vue..

Nuxt3 프로젝트를 구축해봅시다. 본 프로젝트를 구축하기에 앞서 꼭 권장 드리는 사항은 명령어를 입력하거나 코드를 넣을 때 꼭 타이핑을 해보세요. 직접 타이핑 해보는 것은 실력 향상, 암기, 응용에 매우 도움이 됩니다. 코드를 참고하고 싶다면 아래 링크를 참고해주세요. 터미널에 아래 명령어를 입력해줍니다. npx nuxi init nuxt-app cd nuxt-app npm install nuxt-app 폴더를 기준으로 vscode를 켜줍니다. 컨트롤 + ~ 로 터미널을 켠 후 아래 명령어를 입력해줍니다. npm run dev Nuxt 첫 화면을 보실 수 있습니다. 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 등 거의 모든 프론트 디바이스의 빌드를 지원하는 툴

캘린더 라이브러리를 쓰다가 문득 직접 만들어 보고 싶어서 vue3로 커스텀 캘린더를 만들었습니다. 뭔가 옛날스런 느낌으로 만들고 싶었기에 조악한 디자인... 을 갖고 있지만ㅋㅋㅋㅋㅋㅋ 소스코드 시작: {{ option }} {{ option }} {{ option }} ~ 끝: {{ option }} {{ option }} {{ option }} 생각보다 소스코드가 긴데 간단합니다. 기본적으로 Date() 객체를 사용하여 핸들링 했으며 윤년처리, 시작과 끝 날짜 에러 처리, 날짜 스트링 처리 등의 코드로 양만 많은 것이므로 쫄 것 없이 읽어보면 쉽게 이해됩니다.