香港居民

Nuxt 의 Livecycle hook 은 두 가지 방법으로 선언할 수 있습니다.export default defineNuxtModule({ meta: { name: 'nuxt-basic-optimizer', configKey: 'nuxtBasicOptimizer' }, // Default configuration options of the Nuxt module defaults: { }, hooks: { 'app:resolve': (nuxt) => { console.log('App resolvec', nuxt); } }, setup(options, nuxt: Nuxt) { nuxt.hook('app:resolve', (nuxtApp: NuxtApp) =>..

Nuxt에서 API 엔드포인트로부터 반환되는 객체가 toJSON 메서드를 포함하고 있다면, 해당 객체가 직렬화(Serialization) 또는 JSON 변환 과정에서 toJSON 메서드가 호출될 수 있습니다. 이를 이해하려면 Nuxt와 관련된 데이터 흐름 및 toJSON의 역할을 살펴볼 필요가 있습니다. 1. toJSON과 직렬화 • toJSON은 객체를 JSON 문자열로 변환하거나, JSON.stringify 함수가 호출될 때 특정 형태로 변환하려는 목적에 사용됩니다. • Nuxt에서 API의 응답 데이터가 처리되는 단계에서 JSON.stringify가 호출될 가능성이 있는 경우, toJSON이 실행됩니다. 2. Nuxt에서의 API 데이터 흐름 Nuxt는 일반적으로 Axios와 같은 HTTP 클라이언..

Nuxt에서 useAsyncData와 useFetch는 서버 사이드 렌더링(SSR) 과정에서 데이터를 가져온 후, 해당 데이터를 클라이언트로 전달하기 위해 payload에 직렬화합니다. 이때 Nuxt는 JavaScript 객체를 안전하고 정확하게 직렬화하기 위해 devalue 라이브러리를 사용합니다. 1.  왜 devalue를 사용하는가?JSON.stringify만으로는 Nuxt의 직렬화 요구 사항을 충족할 수 없는 경우가 있습니다:Circular references(순환 참조): JSON.stringify는 순환 참조를 처리할 수 없습니다.Functions, Symbols, undefined: JSON.stringify는 이러한 데이터를 직렬화하지 않습니다.Prototype references: 특정 ..

https://nuxt.com/docs/getting-started/data-fetching#serializing-data-from-server-to-client Data Fetching · Get Started with NuxtNuxt provides composables to handle data fetching within your application.nuxt.comNuxt 는 서버에서 획득한 데이터를 payload 를 통해서 클라이언트로 동일하게 복사하여 전달합니다. https://nuxt.com/docs/api/composables/use-nuxt-app#payload useNuxtApp · Nuxt ComposablesAccess the shared runtime context of the ..

UseFetch Brief execute()">Fetch {{ data }}  server: client side 에서 api 를 호출하도록 합니다. (server side 에서 api를 호출하지 않습니다)default: factory 함수나 기본값을 등록합니다. api 호출의 응답이 오기 전까지 data 가 가지고 있는 값입니다. api 호출이 완료되면 overwrite 됩니다.immediate: 즉시 호출하지 않고 execute 함수의 호출을 기다립니다. https://nuxt.com/docs/api/composables/use-fetch#params useFetch · Nuxt ComposablesFetch data from an API en..

useFetch, useAsyncData 에서 url 베이스 혹은 key를 사용하여 캐시 처리를 하는 방법외에 캐시를 다루는 방법이 있습니다.`getCachedData` 를 사용하는 것입니다.const { data } = await useFetch(`/api/random-user`, { getCachedData(key, nuxtApp) { const data = nuxtApp.payload.data[key] || nuxtApp.static.data[key]; return data; },}); getCachedData 는 두 가지의 매개변수가 삽입되는 함수 입니다.https://nuxt.com/docs/api/composables/use-async-data#params useAsync..

// cache.vueconst {data} = await useFetch(`/api/random-user`, { lazy: true}) Users {{ data }}//random-user.tsimport { sleep } from '@/server/utils/tools';import { faker } from '@faker-js/faker';export default defineEventHandler(async (event) => { const query = getQuery(event); await sleep(1000); return { firstName: faker.person.firstName(), lastName: faker.person.lastName(), ran..

useFetch 를 사용하다보면 누군가는 await 를 선언해서 사용하고 누군가는 그대로 사용하는 것을 볼수 있습니다.SSR (universal)로 페이지를 렌더링한다는 전제하에 페이지를 리프레시해보면 별다른 차이는 느낄수 없습니다.다음과 같은 코드가 있다고 가정합니다.// index.vue Poketmons {{ pokenmon.pokemon }} Refresh // about.vue About // Navie.vue Home About// server/api/hello.tsfunction sleep (ms: number): Promise { return new Promise((resolve, reject) => { ..

라우트 경로를 정규표현식을 사용하여 표현할수 있습니다.const routes = [ { name: 'login', path: '/regex/:id(\\d), // 대부분의 정규표현식의 사용이 가능합니다. path: '/regex/:id()\\d+) component: import('@views/login-view.vue') }] 위와 같이 선언할 경우 /regex/123 같은 url 경로에도 login-view 페이지가 보여집니다. 그리고 아래와 같이 선언할 경우 /regex/id 이후에 붙는 모든 /id(/number) 가 동일하게 매칭됩니다.const routes = [ { name: 'login', path: '/regex/:id(\\d+)+, com..

Router 이동시 navigation error 가 발생하는 경우가 종종 있습니다.navigation guide 혹은, 다른 라우터 이동중인데 다른 라우터 이동이 발생한다던가 하는 등 실제 서비스 환경에서는 여러가지 상황이 발생합니다.상황은 여러가지지만 라우터 에러 처리를 위해서 에러를 캐치해야 합니다.다음과 같이 임의로 에러를 발생시킵니다. All Destinations Trigger Router Error  Home.vue에서 home 으로 라우트 이동시키면 router dupllicated  오류가 발생합니다.router.push 는 정상적인 라우트 이동이 이루어질 경우 undefined 를 반환합니다.(vue 3 버전의 vue-router 4.x )아무 것도 반..