香港居民

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 클라이언..

import { stringify } from 'devalue';export default defineEventHandler(async (event) => { const data = { createAt: new Date() } const dataToJSON = { ...data, toJSON() { return this; } } return stringify(data) as unknown as typeof dataToJSON;}); as unkonwn as typeof dataJSON 이라는 표현이 있습니다.TypeScript에서 type assertion을 사용하여 as unknown as typeof data로 data의 타입을 강제로 지정하는 것입니다. 이를 ..

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..

이 오류는 git pull이 기본적으로 fast-forward 병합을 시도하기 때문에 나타납니다. 주요 원인 1. 로컬 변경 사항• 로컬 브랜치에 원격 브랜치와 충돌하는 변경 사항이 이미 커밋되어 있을 때. 2. 병합 불가능한 변경 사항 • 원격 브랜치가 로컬 브랜치에서 병합되지 않은 새로운 커밋을 포함하고 있어, fast-forward로 병합이 불가능할 때. 3. 브랜치 분기• 로컬 브랜치와 원격 브랜치가 서로 다른 히스토리를 가지고 있을 때. 즉, 두 브랜치가 동일한 조상(commit)을 공유하지 않는 경우.  해결 방법 1. 로컬 변경 사항 확인먼저 로컬 브랜치가 원격 브랜치와 충돌할 가능성이 있는 변경 사항을 확인합니다. 2. 수동 병합 시도git pull이 자동 병합에 실패한 경우, 수동 병합을..

예를 들어 useFetch 를 이용하여 user 정보를 불러오는 코드가 있다고 가정합니다. Users Refresh Search {{ `${user.lastName} ${user.firstName}` }} useFetch 부분만 봅시다.watch 옵션을 걸어서 committedQuery 값이 변경이 있을때마다 호출하는 것처럼 보이지만 실제는 submit  버튼을 눌러야 호출합니다.query param 부분에 q=committedQuery.value  가 있지만 submit  할때마다 query가 갱신되지는 않습니다.왜냐하면 컴포넌트가 초기화 될 때 c..