Vue3

루트 폴더에 아래와 같이 폴더 구조를 생성해주세요. css: css를 저장합니다. imgs: png, svg와 같은 이미지들을 저장합니다. js: js svg 파일, 모듈 파일들을 저장합니다. stylesheets: scss, sass 등의 스타일 시트를 저장합니다. 스타일 시트 정리 스타일 시트 구조는 사람마다 의견이 모두 다르므로 사용하면서 편한 대로 구성하시되 기본적인 골자를 알려드리기 위해 아래 가이드를 작성합니다. 아래와 같이 스타일 시트들을 생성해주세요. main.scss : 메인 스타일 시트 파일로써 각 포인트가 되는 scss 파일 임포트, 변수 export의 역할을 합니다. app.vue에 import 해줍니다. @import "./global"; @import "./colors"; @im..

저번 스토어 수업에서 피냐를 설치해보신 것처럼 plugins는 넉스트에서 사용할 라이브러리를 등록하는 역할을 합니다. plugins에 등록하면 라이브러리를 초기화 할 때 각 라이브러리가 의도한 대로 코드가 동작할 수 있게 해줍니다. (글로벌 변수 등록 등) import { PiniaPlugin, PiniaPluginContext } from "pinia"; // pinia에서 초기화 할 때 실행해줄 함수 function MyPiniaPlugin({ store }: PiniaPluginContext) { store.$subscribe((mutation) => { // 스토어 값이 바뀔 때 로그 찍어줌 if (process.env.MODE === "dev") console.log(`[🍍 ${mutation...

요즘 프론트엔드 개발 트랜드에서 스토어는 빼놓을 수 없는 개념입니다. Redux, Vuex… 여러 스토어들을 많이 들어봤을 거에요. 아.. 복잡하다… ㅜㅜ 하지만 우리에겐 🎉pinia🎉가 있습니다. 제가 살면서 본 스토어 중에 제일 쉬워요. 무려 dispatch가 없어요…!!! 진작 이렇게 좀 만들지. pinia를 설치해봅시다. 아래 명령어를 터미널에 입력해주세요. yarn add pinia @pinia/nuxt --save-dev yarn으로 설치하는 이유는 npm으로 설치하면 pinia와 @pinia/nuxt 간의 의존성이 잡혀 있지 않아 에러가 뜹니다. Nuxt는 yarn에 최적화 되어 있습니다. 하지만 우리는 기본에 충실하기 위해 npm을 사용해봐야해요.. ㅜㅜ 그래서 생성된 yarn.lock 삭..

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 프로젝트 구축 완료!