dev_0hoon

NuxtPage 컴포넌트는 pages 디렉토리에 있는 컴포넌트를 화면에 표시하는데 사용된다.VueRouter의 컴포넌트를 둘러싼 래퍼이다. 동일한 name과 porps를 허용한다. 실습이전강의와 다음강의를 불러서 footer에 넣을 것이다.import type { CourseWithPath } from '~/types/course';interface CourseReturn { course: Maybe; // Course | null | undefined prevCourse: Maybe; // Course | null | undefined nextCourse: Maybe; // Course | null | undefined}export const useCourse = (courseSlug: stri..

components/. composables/, utils/ 하위의 파일은 모두 자동으로 임폴트 된다. SEO최적화에 유리할 수 있게 링크 이동 할 때에는 router를 이용하는 것이 옳다.  하지만 nuxt에서는 nuxtlink를 이용해서 링크 이동을 한다.  참고로 NuxtLink에 custom 속성을 넣으면 a태그로 만들어지지않고 div가 된다. (RouterLink 도 동일) 페이지 이동을 위해서 navigate를 달아준다.  >  v-slot="navigate"를 넣어주고 하위 컴포넌트에도 클릭이벤트로 넣어준다. Composables 의 문법은 기본적으로..

https://v3-docs.vuejs-korea.org/guide/typescript/overview.html 타입스크립트와 함께 Vue 사용하기 | Vue.js v3-docs.vuejs-korea.org뷰3의 타입스크립트에 대한건 공식문서에 있다.   타입스크립트를 왜 쓸까? 타입과 같은 오류를 런타임 시점이 아닌 컴파일 시점에 잡기 위함이다.예를 드어 수많은 에러가 존재한다 > 운영에 배포하면 구동중에 발생하면 매우 크리티컬하다.그러므로 컴파일 시점에 잡으면 >운영했을 때 안전하다 tsconfig.json 설정은 컴파일 시점에 어떻게 할지가 담겨져 있다 넉스트 프레임워크는 자동으로 생성하여 만들어져 있다.프로젝트를 깔면 자동으로 생성되어 있다.  ts는 꼭 붙여줘야한다. 공식문서에 나와있음 컴포넌트..

Nuxt 파일 시스템 라우팅은 pages/ 디렉토리의 모든 파일에 대한 라우트를 생성합니다. Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터 입니다. pages/디렉토리 내부의 모든 Vue 파일을 파일이름을 기반으로 URL(또는 route)을 생성하며, 해당 URL에 접근했을 때 URL 매핑되는 pages/ 디렉토리 안에 있는 Vue 파일을 표시한다. 쉽게 말해디렉토리 구조   nuxt는 각페이지에 대한 동적 가져오기를 사용하여 코드 분할을 활용하여 요청된 경로에 대한 최소한의 JavaScript를 제공한다.코드스플리팅을 자동으로 적용해 준다.   pages>course>[id].vue를 생성하면url/course/파라미터 이런식으로 접근이 가능해진다. Course {{ $route.p..

컴포넌트 ui 계층은 아래처럼 nuxt에서 정해 놓았다.- app.vue- Components- Pages- Layouts네가지로 분류해 두어서 개발자들이 별도로 고민하지 않고 빠르게 개발할 수 있다. 1. app.vueNuxt는 이 파일을 진입점(entryPoint)으로 처리하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링 한다.  2. ComponentsButton이나 Menu와 같이 재사용 가능한 UI 이다. Nuxt에서 이러한 컴포넌트, 재사용 가능한 컴포넌트의 계층은 컴포넌츠 디렉터리에 생성하도록 가이드를 하고 있다. 해당 컴포넌트는 명시적으로 가져올 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있다. 아래 예시처럼 import를 하지 않아도 자동으로 import된다.뿐만 아니라 co..

https://nuxt.com/modules/quasar Quasar · Nuxt ModulesEffortlessly build high-performance & high-quality Vue.js 3 user interfaces in record timenuxt.com 퀘이사 공식 홈피도 있고 넉스트에서 설치법도 알려준다. 설치 명령어npm install quasar @quasar/extrasnpm install --save-dev nuxt-quasar-ui nuxt.config.ts의 모듈 섹션에 nuxt-quasar-ui를 추가 export default defineNuxtConfig({ modules: [ 'nuxt-quasar-ui' ], quasar: { /* */ }})

https://nuxt.com/docs/getting-started/installation Installation · Get Started with NuxtGet started with Nuxt quickly with our online starters or start locally with your terminal.nuxt.com 공식문서는 언제 변할지 모르기 때문에 명령어를 꼭 확인하자. 현재 내가 사용한 명령어npx nuxi@latest init  뭘로 설치할지 묻거든 npm을 선택한다. 깃쓸건지 물어봄 알아서하면됌  nuxi는 nuxt3에서 사용되는 공식 빌드 도구이다. nuxt3이전에서 쓴 nuxt build 명령어도 사용은 가능하나 왠만하면 nuxi를 쓰는게 좋다. 공식 문서를 참고하는게 가장..