香港居民

# 특정 폴더 찾기find /Users/user/Library/pnpm -name "my-module" -type d# type d의 의미# -type d는 디렉토리(directory)만 찾으라는 옵션입니다.# -type d: 디렉토리만 찾기# -type f: 파일만 찾기# -type l: 심볼릭 링크만 찾기# 2>/dev/null의 의미# 2>/dev/null는 에러 메시지를 숨기라는 옵션입니다.# 2>: 표준 에러(stderr)를 리다이렉트# /dev/null: 리눅스/맥의 "휴지통" 같은 곳 (아무것도 출력하지 않음)find /Users/user/Library/pnpm -name "my-module" -type d 2>/dev/null# /Users/user 폴더부터 시작해서 my-module이라는..

pnpm package 를 삭제시 다음과 같은 오류를 만나는 경우➜ playground git:(master) pnpm remove -g my-module ERR_PNPM_UNEXPECTED_STORE  Unexpected store locationThe dependencies at "/Users/user/Library/pnpm/global/5/node_modules" are currently linked from the store at "/Users/user/Library/pnpm/store/v10".pnpm now wants to use the store at "/Users/user/Library/pnpm/store/v3" to link dependencies.If you want to use th..

# config listpnpm config listpnpm ls -gpnpm remove -g # store 폴더 위치 확인pnpm store path# store dir 설정pnpm set store-dir # pnpm 이 현재 사용하고 있는 store 위치 확인pnpm get store-dir

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

1. any와 unknown의 기본적인 차이특성anyunknown제한아무런 제한 없음모든 작업이 제한됨타입 검사런타임시 타입 오류를 방지하지 않음컴파일시 타입 확인이 필요함유연성매우 유연함(모든 타입에 할당 가능)안전함(할당은 가능하지만 사용은 제한됨) 2. anyany는 “아무거나 될 수 있음”을 의미하며, 모든 작업이 허용됩니다.안전성이 낮음: 타입스크립트가 타입 검사를 포기하므로, 런타임 오류가 발생할 가능성이 높습니다.let value: any = "Hello";value.foo(); // 런타임 오류 발생 가능하지만 컴파일러가 경고하지 않음 3. unknownunknown은 “아직 타입을 알 수 없음”을 의미하며, 특정 타입으로 명확히 확인되기 전까지 사용이 제한됩니다.안전성이 높음: 값을 사용..

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