페이지 구성 요소에 대한 메타데이터를 정의한다. definePageMeta은 pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로이다. 이 방법으로 Nuxt 애플리케이션의 각 정적 또는 동적 경로에 대한 사용자 정의 메타데이터를 설정할 수 있다. Type definePageMeta(meta: PageMeta) => void interface PageMeta { validate?: (route: RouteLocationNormalized) => boolean | Promise | Partial | Promise redirect?: RouteRecordRedirectOption name?: string path?: string alias?: string..

defineNuxtRouteMiddleware 헬퍼 함수를 사용하여 명명된 경로 미들웨어를 만든다. 경로 미들웨어는 Nuxt 애플리케이션의 middleware/ 에 저장됩니다(달리 설정하지 않는 한). 매개변수 middleware : 두 개의 Vue Router의 경로 위치 객체를 매개변수로 사용하는 함수: 첫 번째 경로는 다음 경로 to이고, 현재 경로는 from. type : RouteMiddleware Vue Router 문서에서 RouteLocationNormalized의 사용 가능한 속성에 대해 알 수 있다. 사용 예 오류 페이지 표시 경로 미들웨어를 사용하여 오류를 발생시키고 유용한 오류 메시지를 표시할 수 있다. // middleware/error.ts export default define..

defineNuxtComponent()는 옵션 API를 사용하여 유형이 안전한 구성 요소를 정의하기 위한 헬퍼 함수이다. defineNuxtComponent()은 defineComponent() 과 유사하며, 옵션 API를 사용한 유형이 안전한 Vue 컴포넌트를 정의하기 위한 헬퍼 함수이다. defineNuxtComponent() 래퍼 함수는 asyncData 및 head 컴포넌트 옵션에 대한 지원도 추가한다. head() 앱에서 setup() 을 사용하지 않기로 선택한 경우 컴포넌트 정의 내에서 head() 메소드를 사용할 수 있다.

이 함수를 사용하면 추가 메타데이터가 포함된 오류 개체를 만들 수 있다. 앱의 Vue 및 Nitro 부분 모두에서 사용할 수 있으며 throw 되게 되어있다. 매개변수 err : { cause, data, message, name, stack, statusCode, statusMessage, fatal } Vue 앱에서 createError 로 생성된 오류가 발생하는 경우: 서버 측에서는 clearError으로 지울 수 있는 전체 화면 오류 페이지가 실행된다. 클라이언트 측에서는 사용자가 처리할 수 있는 치명적이지 않은 오류가 발생한다. 전체 화면 오류 페이지를 실행해야 하는 경우 fatal: true 를 설정하여 수행할 수 있다. 사용 예 API 경로에서 createError 를 사용하여 서버 API ..

useState의 캐시된 상태를 삭제한다. 이 방법은 useState의 상태를 무효화하려는 경우에 유용하다. Type clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void 매개변수 keys: 캐시된 상태를 삭제하기 위해 useState 에서 사용되는 키 하나 또는 배열이다. 키가 제공되지 않으면 모든 상태가 무효화된다.

캐시된 데이터, 오류 상태, useAsyncData 및 useFetch의 보류 중인 약속을 삭제한다. 이 방법은 다른 페이지에 대한 데이터 가져오기를 무효화하려는 경우에 유용하다. Type clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void 매개변수 keys: 캐시된 데이터를 삭제하기 위해 useAsyncData 에서 사용되는 키 하나 또는 배열입니다. 키가 제공되지 않으면 모든 데이터가 무효화된다.

페이지, 구성요소 및 플러그인 내에서 clearError를 사용하여 모든 오류를 지우고 사용자를 리디렉션할 수 있다. 매개변수 options?: 리디렉션할 선택적 경로를 제공할 수 있다(예: '안전한' 페이지로 이동하려는 경우). type : { redirect?: string } // Without redirect clearError() // With redirect clearError({ redirect: '/homepage' }) 오류는 useError() 을 사용하여 상태에 설정된다. clearError 컴포저블은 이 상태를 재설정하고 제공된 옵션을 사용하여 app:error:cleared 후크를 호출한다.

addRouteMiddleware()는 애플리케이션에 미들웨어를 동적으로 추가하는 헬퍼 함수이다. 경로 미들웨어는 Nuxt 애플리케이션의 middleware/ 디렉토리에 저장된 탐색 가드다(달리 설정하지 않는 한). Type addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {}) 매개변수 name : 문자열이거나 RouteMiddleware 유형의 함수일 수 있다. 함수는 다음 경로 to를 첫 번째 인수로, 현재 경로 from를 두 번째 인수로 사용하며 둘 다 Vue 경로 객체다. type : string | RouteMiddleware 참고..

abortNavigation 은 경로 탐색이 발생하지 않도록 방지하고 매개변수로 설정된 경우 오류를 발생시키는 헬퍼 함수입니다. abortNavigation 은 경로 미들웨어 핸들러 내에서만 사용할 수 있다. Type abortNavigation(err?: Error | string): false 매개변수 err : abortNavigation 에서 발생하는 선택적 오류입니다. type : Error | string 사용 예 err 을 string 으로 오류를 문자열로 전달할 수 있다. // middleware/auth.ts export default defineNuxtRouteMiddleware((to, from) => { const user = useState('user') if (!user.valu..

REST API로 json을 받아 유효성 검사하는 필수 패키지. 설치 Zod는 runtime dependency로 사용하므로 --save-dev가 아닌 바로 install pnpm add zod 사용 import { z } from 'zod'; const productJson = { name: 'jeans', price: 100, }; const productSchema = z.object({ name: z.string(), price: z.number().positive(), // 양수 음수도 구별 가능 }); //type Product = z.infer; const Test1 = () => { const validateProduct = productSchema.safeParse(productJson)..

1. Componentization 가장 중요함: 코딩 후에 refactor도 필요하지만, 우선 처음부터 component화 시키는 것이 중요. 가독성과 코드 재사용을 위해서 반드시 component화 필요. Composable commerce의 필수 요건. 예시 : layout.tsx const Layout = ({ children }) => ( Header content ... ... {children} Footer content ... ... ); export default Layout; 이 파일 하나에 수 천 line 코딩하지 말고, Header와 Footer를 src/components/ 에 코딩 후 import import Header from '@/components/header'; impo..

Nuxt는 ofetch를 사용하여 Vue 앱 또는 API 경로 내에서 HTTP 요청을 만들기 위한 $fetch 헬퍼를 전역적으로 노출한다. 서버 측 렌더링 중에 $fetch 호출하여 내부 API 경로를 가져오면 저장 및 추가적인 API 호출과 같은 관련 함수(요청 에뮬레이션)를 직접 호출한다. useAsyncData 로 래핑하지 않은 채컴포넌트에서 $fetch 를 사용하면 서버에서 클라이언트로 상태를 전송하지 않기 때문에 클라이언트가 데이터를 다시 가져와야 하므로 가져오기가 양쪽에서 실행된다. 따라서 $fetch 를 사용하면 데이터를 두 번 가져온다. 처음에는 서버에서, 그 다음에는 하이드레이션 중에 클라이언트 측에서 다시 가져온다. 구성요소 데이터를 가져올 때 이중 데이터 가져오기를 방지하려면 useF..

useState 컴포저블은 SSR에 적합한 반응형 공유 상태를 생성합니다. 사용법 // Create a reactive state and set default value const count = useState('counter', () => Math.round(Math.random() * 100)) 참고) Nuxt-개요 > 상태관리 useState 내부 데이터는 JSON으로 직렬화되므로 클래스, 함수, 심벌 등 직렬화할 수 없는 어떤 것도 포함하지 않는 것이 중요하다. shallowRef 사용 상태가 적극적으로 반응할 필요가 없다면 useState 와 shallowRef 를 결합할 수 있다. 이렇게 하면 상태에 큰 개체와 배열이 포함된 경우 성능이 향상될 수 있다. const state = useStat..

useSeoMeta 과 마찬가지로 useServerSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 개체로 정의할 수 있다. 참고 > Nuxt-Composable > useSeoMeta 대부분의 경우 로봇은 초기 로드만 스캔하므로 메타가 반응할 필요가 없다. 따라서 클라이언트에서 아무 작업도 수행하지 않거나 (혹은 head 객체를 반환하는) 성능 중심 유틸리티로 useServerSeoMeta 를 사용하는 것이 좋다. 참고) Nuxt-개요 > SEO 와 Meta

useSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 객체로 정의할 수 있다. useSeoMeta 를 사용하면 property 대신 name 을 사용하는 것과 같은 일반적인 실수와 오타를 방지할 수 있다. 100개가 넘는 메타 태그가 완전히 입력되어 있기 때문이다. 이는 XSS에 안전하고 TypeScript를 완벽하게 지원하므로 사이트에 메타 태그를 추가하는데 권장되는 방법이다. 참고) Nuxt-개요 > SEO 와 Meta 사용 예 반응형 태그를 삽입할 때는 계산된 getter 구문(() => value)을 사용해야한다. 100개가 넘는 매개변수가 있다. 아래 소스 코드의 전체 매개변수 목록을 참고하자.

useRuntimeConfig 컴포저블을 사용하여 런타임 구성 변수에 액세스한다. // server/api/foo.ts export default defineEventHandler((event) => { const config = useRuntimeConfig(event) }) 참고) Docs > Guide > Going Further > Runtime Config 런타임 구성 정의 아래 예에서는 공개 API 기본 URL과 서버에서만 액세스할 수 있는 비밀 API 토큰을 설정하는 방법을 보여준다. runtimeConfig 변수를 nuxt.config 내부에 정의해야 한다. // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // Pr..

Data fetching 이란? Data fetching이란 API등을 이용하여 데이터를 가져오는 과정을 의미하며, 대표적으로 자바스크립트에서 네이티브로 제공해주는XMLHttpRequest, Fetch API 그리고 jQuery의 AJAX, Axios 통신 라이브러리를 이용하여 처리 합니다. Next JS 13 이전 버전에서는 getStaticProps이나 getServerSideProps라는 메소드 또는 Component 로직내에서 사용자 행위로 일어나는 이벤트 동작 내에서 data fetching을 사용하였습니다. 하지만 Next 13 부터는 Server Component 및 Client Component라는 구분이 생겨났고, 이로 인하여 data fetching에도 영향을 주었는데 기존에는 Axio..

useRouter 컴포저블은 라우터 인스턴스를 반환한다. 템플릿 내에 라우터 인스턴스만 필요한 경우 $router 을 사용하세요. Back pages/ 디렉토리가 있는 경우 useRouter는 에서 vue-router 제공하는 것과 동작이 동일합니다. 기본기능 addRoute() : 라우터 인스턴스에 새 경로를 추가합니다. parentName 기존 경로의 하위 경로로 새 경로를 추가하도록 제공될 수 있다. removeRoute() : 이름으로 기존 경로를 제거한다. getRoutes() : 모든 경로 기록의 전체 목록을 가져온다. hasRoutes() : 해당 이름의 경로가 존재하는지 확인한다. resolve() : 경로 위치의 정규화된 버전을 반환한다. 기존 기반을 포함하는 href 속성도 포함된다. ..

Local font files src/app/assets/fonts 폴더를 생성하고 local font 파일을 복사한다. ( public/assets/fonts 폴더를 생성하여도 무관 ) font.ts src/app/assets/ 폴더에 font.ts 파일 생성 다음 코드 입력 import localFont from 'next/font/local'; export const familyMont = localFont({ src: [ { path: './fonts/Montserrat-Bold.woff2', weight: '700', style: 'bold', }, { path: './fonts/Montserrat-Medium.woff2', weight: '500', style: 'medium', }, { pa..

Environment variables 참조: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#environment-variable-load-order npm run dev에서 실행되는 .env.development.local 생성 그리고 배포 환경에서 실행되는 .env.production.local 를 생성한다. 코드 상에서 참조시 process.env.API_URL 형태로 참조 next.config.js 참고: https://nextjs.org/docs/app/building-your-application/configuring/typescript#type-checking-nextconfigjs..