香港居民

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

그냥 https 개발환경에서 일시적으로 인증서를 무시하고 서버 실행 및 API 호출을 위한 방법입니다export NODE_TLS_REJECT_UNAUTHORIZED=0 보안에 취약하므로 개발환경에서만 사용하고, 일반적으로는 정상적인 인증서를 사용해야 합니다.

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) => { ..

가끔 헷갈리는 경우가 있어서 정리합니다. behind의미: 현재 브랜치가 원격 브랜치에 비해 뒤쳐져 있음을 의미합니다.상황: 원격 브랜치에 추가된 커밋이 있고, 로컬 브랜치에는 없는 경우.원인: 다른 팀원이 원격 브랜치에 푸시(push)한 이후, 로컬에서 git pull을 하지 않았을 때 발생합니다.Your branch is behind 'origin/main' by 3 commits. 현재 로컬 브랜치가 origin/main 브랜치에 비해 3개의 커밋이 부족함을 의미합니다.pull 을 통해 변경사항을 가져 오면 됩니다. ahead의미: 현재 브랜치가 원격 브랜치에 비해 앞서 있음을 의미합니다.상황: 로컬 브랜치에서 커밋이 추가되었으나, 원격 브랜치로 아직 푸시(push)되지 않은 경우.원인: 로컬에서 ..

라우트 경로를 정규표현식을 사용하여 표현할수 있습니다.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 )아무 것도 반..

vue router 를 중첩 라우팅 처리하면서 발생한 이슈입니다.컴포넌트에 전달된 속성(attribute)가 렌더링 과정에서 적절히 처리되지 못했을 경우에 발생합니다. experienceSlug 라는 속성을 컴포너트에 전달했지만, 해당 속성이 컴포넌트 내부에서 명시적으로 처리되지 않았거나, 컴포넌트가 Fragment 또는 텍스트 노드만 반환하는 경우 발생합니다.Vue 3에서 기본적으로 props가 아닌 속성(non-props attributes)은 루트 엘리먼트로 자동으로 전달됩니다. 하지만 컴포넌트가 Fragment나 텍스트 노드를 반환할 경우 속성을 전달할 루트 엘리먼트가 없어 이 경고가 발생합니다. router-view 는 상위 app.vue에 존재합니다.{ name: 'destination'..