香港居民

[useAsyncData, useFetch] cache 처리 방식 비교

// 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 )아무 것도 반..

Navi.vue Home {{ dest.name }}  Home.vue All Destinations {{ dest.name }}  App.vue   routes/index.tsconst routes: Array = [ {name: 'home', path: '/', component: Home}, {name: 'destination', path: '/destination/:slug', component: () => import ('@views/destination.vue')}]; Navi.vue 와 Home.vue 에서 동일한 RouterLink 코드를 사용한 상황인데..

Vue Router 에는 HTML 5 History mode와 Hash 모드 두 가지가 존재합니다.import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';const router: Router = createRouter({ history: createWebHistory(), //history: createWebHashHistory(), routes: [ {name: 'home', path: '/', component: Home} ]}); 차이는 간단합니다URL 을 보면// web historyhttps://localhost:5173/brazil// hash historyhttps://localhost:5..

pinia 의 사용시 특정 pinia 함수들은 별도 import 선언문 없이 사용할수 있도록 처리한다.nuxt.config.ts 파일의 모듈 옵션을 변경export default defineNuxtConfig({ modules: [ ['@pinia/nuxt', {autoImports: ['defineStore', 'acceptHMRUpdate']}] ]}이런 식으로 선언 해주면 된다.autoImports 안의 함수명들에 대한 코드 제안을 보고 싶은데 뭔가 설정이 제대로 안되었는지 동작하지 않는다. 설정되고 나면export const useUser = defineStore('user', { state: () => { return { isLoggedIn: false, } },..

Nuxt3 의 useAsyncDAta와 useFetch 는 내부적으로 ofetch 라이브러리를 사용한다 unjs 라고 Nuxt 만의 JS 라이브러리 생태계를 만들어놨다...라이브러리들은 많지만 특별히 대단할건 없다. 하지만 알아 두면 좋을 것들이 많다. 이러나 저러나 Nuxt 내부적으로 사용되는 애들이니까. useAsyncData 나 useFetch 를 이용해서 비동기 통신을 할때 발생한 response error 를 처리해야하는 경우는 빈번하다.그럴경우 useAsyncData 와 useFetch 의 코드 작성 케이스는 다르다. const { data } = useAsyncData ( `${query}/{new Date().toString()}`, (): Promise => { ret..