香港居民

[Bash] Command

Yeah-Panda — Tue, 24 Jun 2025 09:26:24 +0900

# 특정 폴더 찾기
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이라는 이름의 디렉토리만 찾고 에러 메시지는 숨겨서 깔끔하게 결과만 보여줍니다


# 파일 이름을 변경합니다. 
# mv <original file> <target file name>

mv functions/httpClient.ts functions/http-client.ts

# 파일 내용을 클립보드에 복사합니다. 
cat ~/.zshrc | pbcopy

[Pnpm] 전역 패키지와 Store

Yeah-Panda — Tue, 24 Jun 2025 09:18:35 +0900

pnpm package 를 삭제시 다음과 같은 오류를 만나는 경우

➜  playground git:(master) pnpm remove -g my-module
 ERR_PNPM_UNEXPECTED_STORE  Unexpected store location

The 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 the new store location, reinstall your dependencies with "pnpm install".

You may change the global store location by running "pnpm config set store-dir <dir> --global".
(This error may happen if the node_modules was installed with a different major version of pnpm)

pnpm의 전역 패키지와 store란?

1. 전역 패키지(global package)

pnpm add -g 패키지명으로 설치한 패키지는 전역(global)으로 설치됩니다.
이 패키지들은 보통 한 곳(예: /Users/user/Library/pnpm/global/5)에 모여 있습니다.
이 폴더 안에 여러 전역 패키지들이 들어 있습니다.

2. store란?

pnpm은 패키지를 효율적으로 관리하기 위해 store라는 별도의 저장소를 사용합니다.
store에는 실제 패키지 파일들이 저장되고,전역 패키지 폴더(예: /Users/user/Library/pnpm/global/5/node_modules)에는이 store를 가리키는 심볼릭 링크(바로가기)가 만들어집니다.
store의 위치는 예를 들어 /Users/user/Library/pnpm/store/v10처럼 보입니다.

에러 메시지의 의미

현재 전역 패키지가 /Users/user/Library/pnpm/global/5에 설치되어 있다

→ 전역 패키지들이 이 폴더에 모여 있다는 뜻입니다.

store는 /Users/user/Library/pnpm/store/v10입니다

→ 실제 패키지 파일들은 이 store 폴더에 저장되어 있다는 뜻입니다.

왜 문제가 생겼나요?

pnpm의 버전이 바뀌거나 설정이 바뀌면,store의 위치가 달라질 수 있습니다(예: /v10 → /v3).

이럴 때, 전역 패키지 폴더와 store의 위치가 서로 다르면패키지 삭제/설치 시 에러가 발생할 수 있습니다.

1. store 위치를 맞춰서 삭제 (권장)

에러 메시지에서 store 위치가 다르다고 나왔으니,store 위치를 기존과 동일하게 맞춘 뒤 삭제를 시도할 수 있습니다.

pnpm config set store-dir /Users/user/Library/pnpm/store/v10 --global
pnpm remove -g my-module

이렇게 하면 기존 전역 패키지와 store가 연결되어 정상적으로 삭제가 가능합니다.

2. pnpm을 최신 버전으로 업데이트 후 재시도

pnpm 버전이 달라서 생기는 문제일 수 있으니,아래 명령어로 pnpm을 최신 버전으로 업데이트한 후 다시 시도해보세요.

pnpm self-update
pnpm remove -g my-module

3. 수동 삭제 (최후의 수단)

위 방법이 모두 안 될 때는 수동으로 심볼릭 링크와 store 파일을 직접 삭제해야 합니다.

심볼릭 링크 삭제

rm -rf /Users/user/Library/pnpm/global/5/node_modules/my-module

store 내 실제 파일 삭제

store 내 my-module 관련 폴더도 직접 삭제할 수 있습니다.(이 경로는 패키지마다 다를 수 있습니다.)

1 번에 따라 진행한다면

1. store 위치를 기존 위치로 변경

  pnpm config set store-dir /Users/user/Library/pnpm/store/v10 --global

2. 전역 패키지 삭제

pnpm remove -g my-module

3. store 위치를 원래대로 복구

예를 들어, 현재 pnpm이 /Users/user/Library/pnpm/store/v3을 사용하고 있다면:

pnpm config set store-dir /Users/user/Library/pnpm/store/v3 --global

이렇게 하면 패키지 삭제도 정상적으로 되고, pnpm의 store 설정도 원래대로 돌아가 앞으로의 전역 패키지 관리도 문제없이 할 수 있습니다.

[Pnpm] command list

Yeah-Panda — Tue, 24 Jun 2025 09:04:58 +0900

# config list
pnpm config list

pnpm ls -g

pnpm remove -g <package_name>

# store 폴더 위치 확인
pnpm store path

# store dir 설정
pnpm set store-dir <directory_path>

# pnpm 이 현재 사용하고 있는 store 위치 확인
pnpm get store-dir

[Nuxt-Module] Livecycle hooks

Yeah-Panda — Tue, 11 Feb 2025 10:38:34 +0900

Nuxt 의 Livecycle hook 은 두 가지 방법으로 선언할 수 있습니다.

export default defineNuxtModule<ModuleOptions>({
  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) => {
      console.log('app resolve hook is called', nuxtApp);
  });
 })

setup 에 nuxt.hook 과 defineModule 자체의 property hooks 로 접근할수 있습니다.

다만 hooks property 에서는 setup 에서 파라미터로 전달되는 options 대한 접근이 어렵습니다.

hooks property 로 별도 선언시 가독성 향상을 가져올수있으나 그에 따른 단점이 존재합니다.

[Typescript] unknown은 any 의 counterpart

Yeah-Panda — Mon, 3 Feb 2025 16:14:41 +0900

1. any와 unknown의 기본적인 차이

특성	any	unknown
제한	아무런 제한 없음	모든 작업이 제한됨
타입 검사	런타임시 타입 오류를 방지하지 않음	컴파일시 타입 확인이 필요함
유연성	매우 유연함(모든 타입에 할당 가능)	안전함(할당은 가능하지만 사용은 제한됨)

2. any

any는 “아무거나 될 수 있음”을 의미하며, 모든 작업이 허용됩니다.
안전성이 낮음: 타입스크립트가 타입 검사를 포기하므로, 런타임 오류가 발생할 가능성이 높습니다.

let value: any = "Hello";
value.foo(); // 런타임 오류 발생 가능하지만 컴파일러가 경고하지 않음

3. unknown

unknown은 “아직 타입을 알 수 없음”을 의미하며, 특정 타입으로 명확히 확인되기 전까지 사용이 제한됩니다.
안전성이 높음: 값을 사용하려면 타입을 좁히거나(type narrowing) 타입 단언(type assertion)을 해야 합니다.

let value: unknown = "Hello";
value.foo(); // 컴파일 오류: 'foo' 속성을 사용할 수 없음

if (typeof value === "string") {
  console.log(value.toUpperCase()); // 타입이 좁혀진 후에는 안전하게 사용 가능
}

4. any와 unknown의 관계

공통점:

둘 다 모든 타입의 값을 할당받을 수 있습니다.

let value1: any = 42;
let value2: unknown = 42; // 모두 허용

차이점:

any는 아무 작업이나 허용: 어떤 속성 접근이나 연산도 제한이 없습니다.
unknown은 제한적: 값을 사용하려면 반드시 타입 확인을 거쳐야 합니다.

5. 왜 unknown이 any의 counterpart인가?

any는 타입 검사와 안전성을 포기한 “최대 유연성”을 제공합니다.
반대로, unknown은 타입 안정성을 유지하기 위해 유연성을 제한합니다.
두 타입 모두 “모든 타입의 값을 받을 수 있다”는 공통점을 가지지만, 사용 방식과 안전성에서 대조적입니다.

6. 실제 사용 시 예

any: 빠르게 개발하거나 타입 검사에 신경 쓰지 않을 때 사용하지만, 권장되지 않습니다.
unknown: 타입을 미리 알 수 없지만, 이후 타입 확인을 통해 안전하게 사용하고자 할 때 적합합니다.

요약하자면, unknown은 any와 대조적으로 타입 안정성을 유지하기 위한 타입스크립트의 도구입니다. “counterpart”라는 표현은 이 대조적인 특성을 나타냅니다.

[Nuxt] toJSON 이 선언된 api 응답

Yeah-Panda — Thu, 23 Jan 2025 09:55:06 +0900

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 클라이언트를 사용하여 API로부터 데이터를 가져옵니다. 다음은 API 응답 데이터의 처리 과정입니다:

1. API 호출: 서버에서 데이터를 반환합니다.

2. Axios 또는 Fetch 처리:

• 데이터를 JSON으로 자동 파싱합니다.

• 이 과정에서 반환된 객체가 toJSON 메서드를 포함하고 있는 경우, 필요에 따라 toJSON 메서드가 호출될 수 있습니다.

3. 컴포넌트나 스토어에서 데이터 사용:

• toJSON 메서드가 호출되었다면, 데이터는 직렬화된 JSON 형태로 사용됩니다.

3. 동작 원리

toJSON이 포함된 객체가 반환되는 경우, 실제 사용 시 동작 방식은 다음과 같습니다:

예제 1: 기본적인 API 호출

// API 응답으로 반환되는 객체
const apiResponse = {
  name: "Alice",
  age: 30,
  toJSON() {
    return { name: this.name }; // age는 직렬화되지 않음
  }
};

// Axios를 사용한 Nuxt API 호출
export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('/api/user');
    console.log(data); // { name: "Alice" }
  }
};

• API 반환 객체에 toJSON 메서드가 정의된 경우, Axios는 데이터를 JSON으로 직렬화하며 toJSON 메서드를 호출합니다.

• 최종적으로 JSON.stringify에서 반환된 값(즉, { name: "Alice" })이 Nuxt 컴포넌트로 전달됩니다.

예제 2: 서버 사이드 렌더링(SSR)에서 toJSON

Nuxt의 SSR에서 데이터를 직렬화하여 HTML에 삽입하거나 클라이언트로 전달할 때, 내부적으로 JSON.stringify를 호출할 수 있습니다. 이 경우에도 toJSON이 호출됩니다.

export default {
  async asyncData({ $axios }) {
    const user = await $axios.$get('/api/user');
    return { user }; // user 객체의 toJSON 메서드가 작동할 수 있음
  }
};

asyncData에서 반환된 데이터(user)는 서버에서 JSON 직렬화를 거치므로, toJSON 메서드가 실행될 가능성이 있습니다.

4. toJSON이 실제 동작하는 경우

toJSON 메서드가 Nuxt에서 호출될 수 있는 대표적인 경우는 다음과 같습니다:

1. API 응답 직렬화: Axios와 같은 HTTP 클라이언트가 데이터를 JSON으로 변환하는 경우.

2. 서버에서 클라이언트로 상태 전달: Nuxt의 SSR에서는 상태를 JSON으로 직렬화하여 HTML에 포함하므로, 이 과정에서 toJSON이 호출될 수 있습니다.

3. 클라이언트 측 JSON 변환: JSON.stringify를 직접 호출하는 경우.

(Typescript) as unknown as typeof data

Yeah-Panda — Thu, 23 Jan 2025 09:11:35 +0900

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의 타입을 강제로 지정하는 것입니다. 이를 단계별로 설명하겠습니다.

as unknown: 먼저, 어떤 타입이든 unknown 타입으로 변환합니다. unknown 타입은 모든 값이 할당될 수 있는 타입입니다. 이는 타입 안전성을 높이기 위해 사용됩니다.
as typeof data: 그 다음, unknown 타입을 data의 타입으로 다시 변환합니다. typeof data는 data 변수의 타입을 가져옵니다.

이러한 이중 타입 선언은 타입스크립트의 타입 시스템을 우회하여 강제로 타입을 지정할때 사용됩니다. 일반적으로 타입을 정확히 추론할수 없거나, 개발자가 타입을 더 명확하게 지정하고자 할때 사용됩니다.

[Nuxt] Payload serialized by devalue

Yeah-Panda — Fri, 17 Jan 2025 10:39:32 +0900

Nuxt에서 useAsyncData와 useFetch는 서버 사이드 렌더링(SSR) 과정에서 데이터를 가져온 후, 해당 데이터를 클라이언트로 전달하기 위해 payload에 직렬화합니다. 이때 Nuxt는 JavaScript 객체를 안전하고 정확하게 직렬화하기 위해 devalue 라이브러리를 사용합니다.

1. 왜 devalue를 사용하는가?

JSON.stringify만으로는 Nuxt의 직렬화 요구 사항을 충족할 수 없는 경우가 있습니다:

Circular references(순환 참조): JSON.stringify는 순환 참조를 처리할 수 없습니다.
Functions, Symbols, undefined: JSON.stringify는 이러한 데이터를 직렬화하지 않습니다.
Prototype references: 특정 객체의 프로토타입 정보를 유지해야 할 경우 JSON.stringify는 이를 잃어버릴 수 있습니다.

devalue는 이러한 한계를 극복하고, 안전하면서도 SSR에서 복잡한 데이터를 클라이언트로 전달할 수 있도록 도와줍니다.

2. Nuxt에서의 사용 흐름

Nuxt는 SSR 렌더링 후 데이터를 클라이언트로 전달하기 위해 다음 과정을 거칩니다:

a. 서버 사이드 데이터 획득

useAsyncData나 useFetch를 호출하면 서버 측에서 API 호출 등의 작업을 통해 데이터를 가져옵니다.
데이터는 서버 측에서 JSON 객체 형태로 관리됩니다.

b. 데이터 직렬화 (devalue 사용)

데이터를 클라이언트로 보내기 전에 직렬화 과정이 필요합니다.
이때 Nuxt는 devalue를 사용하여 데이터를 안전하게 문자열로 변환합니다.

c. 클라이언트로 전달

직렬화된 데이터는 Nuxt의 payload로 포함됩니다.
이 payload는 클라이언트로 전달되고, HTML 문서 내 <script> 태그에 주입됩니다.

예)

<script>
  window.__NUXT__ = {
    data: [{ foo: 'bar', date: new Date("2025-01-17T00:00:00.000Z") }],
    state: {}
  };
</script>

d. 클라이언트 측 역직렬화

클라이언트는 payload 데이터를 읽고 JavaScript 객체로 복원합니다.
복원 과정에서도 devalue의 역직렬화 처리가 포함됩니다.

3. Nuxt에서 devalue가 필요한 이유

Nuxt는 SSR과 CSR을 원활하게 연결하기 위해 클라이언트가 서버에서 처리한 데이터를 정확히 사용할 수 있도록 보장해야 합니다. devalue는 다음과 같은 데이터 유형을 처리하는 데 탁월합니다:

Date 객체: JSON.stringify는 Date 객체를 ISO 문자열로 변환하지만, devalue는 이를 유지합니다.
RegExp 객체: 정규식을 문자열 대신 올바르게 직렬화합니다.
Nested Structures: 깊은 중첩 객체를 처리하고, 순환 참조도 감지하여 에러를 방지합니다.

4. Nuxt 내부에서 devalue의 실제 사용 위치

Nuxt 소스 코드에서 devalue는 SSR에서 데이터를 직렬화할 때 다음 위치에서 사용됩니다:

1. 서버에서 데이터 직렬화

Nuxt의 renderPayload 함수에서 데이터 직렬화에 devalue를 호출합니다.
소스 코드 예시(Nuxt 3 기준): 아래

import { devalue } from 'devalue';

function renderPayload(data) {
  return devalue(data);
}

2. 클라이언트에서 직렬화된 데이터를 주입

• 서버에서 렌더링된 데이터를 HTML 문서 내에 <script>로 삽입합니다.
클라이언트는 이 데이터를 복원해 재사용합니다.

5. 참고 사항

• 보안 이슈: devalue는 XSS 공격을 방지하기 위해 직렬화 과정에서 안전성을 보장합니다.

• 성능: devalue는 JSON.stringify보다 약간 느릴 수 있지만, Nuxt의 기능 요구를 충족하는 데 필수적입니다.

[Nuxt] Data serialized from interal api server

Yeah-Panda — Fri, 17 Jan 2025 10:34:01 +0900

https://nuxt.com/docs/getting-started/data-fetching#serializing-data-from-server-to-client

Data Fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

nuxt.com

Nuxt 는 서버에서 획득한 데이터를 payload 를 통해서 클라이언트로 동일하게 복사하여 전달합니다.

https://nuxt.com/docs/api/composables/use-nuxt-app#payload

useNuxtApp · Nuxt Composables

Access the shared runtime context of the Nuxt Application.

nuxt.com

<script lang="ts" setup>
const {data: timeData} = useAsyncData<Date>(() => {
  return new Date();
}, {key: 'time', url: ''});

// get on the client slide
onMounted(() => {
  alert(timeData.value?.getHours());
});
</script>

위 코드에서 볼수 있는 것처럼 서버에서 획득한 데이터를 클라이언트 사이드에서 확인 할수 있다.

Nuxt 서버에서는 devalue 라는 라이브러리를 사용하여 payload 를 만든다음 클라이언트로 전달합니다.

https://www.npmjs.com/package/devalue

devalue

Gets the job done when JSON.stringify can't. Latest version: 5.1.1, last published: 4 months ago. Start using devalue in your project by running `npm i devalue`. There are 203 other projects in the npm registry using devalue.

www.npmjs.com

Nuxt 는 서버 endpoint 에서 데이터를 반환할때는 devalue 를 사용하지 않습니다.

그로 인해 아래 코드는 오류가 발생합니다.

// /api/date.ts
export default defineEventHandler(async (event) => {
  return new Date();
});

// .vue
<script lang="ts" setup>
const {data: dateData} = await useFetch<Date>('/api/date');
onMounted(() => {
  alert(dateData.value?.getHours());
})
</script>

nuxt 가 payload 를 직렬화 하는 과정 도 참고바랍니다.

위 코드의 경우 data 는 직렬화된 string 임으로 getHours 라는 메서드에 대한 참조가 이루어지지 않습니다.

그러면 어떻게 internal api endpoint data를 직렬화해야 client 에서 사용 가능할까요?

https://nuxt.com/docs/getting-started/data-fetching#custom-serializer-function

Data Fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

nuxt.com

아래와 같은 형태로 개발자가 원하는 속성들이 선언된 object를 반환하는 방법입니다.

export default defineEventHandler(() => {
  const data = {
    createdAt: new Date(),

    toJSON() {
      return {
        createdAt: {
          year: this.createdAt.getFullYear(),
          month: this.createdAt.getMonth(),
          day: this.createdAt.getDate(),
        },
      }
    },
  }
  return data
})

하지만 위 경우는 단순히 몇몇 property 들만 있으며, date object 자체가 응답되진 않습니다.

운영 리소스가 많이 발생합니다.

https://nuxt.com/docs/getting-started/data-fetching#using-an-alternative-serializer

Data Fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

nuxt.com

대체 serializer 의 사용은 아직 nuxt 에서 제공되지 않습니다.

하지만 우리는 toJSON 이라는 메서드가 선언된 객체를 생성하고 이를 직렬화하여 제공하는 방식으로 우회할수 있습니다.

이는 typescript의 타입 시스템에서 추론 가능하고 또한 runtime 에서 모두 동작하는 방법입니다.

import superjson from 'superjson'

export default defineEventHandler(() => {
  const data = {
    createdAt: new Date(),

    // Workaround the type conversion
    toJSON() {
      return this
    }
  }

  // Serialize the output to string, using superjson
  return superjson.stringify(data) as unknown as typeof data
})

createAt 를 선언하여 date 객체를 담아 둔다음 toJSON 메서드를 선언하고 this 를 반환합니다.

toJSON 메서드를 선언함으로써 타입 추론이 가능하도록 만듭니다.

nuxt 내에서 toJSON 이 동작하는 과정 : https://opendive.tistory.com/760

[Nuxt] toJSON 이 선언된 api 응답

Nuxt에서 API 엔드포인트로부터 반환되는 객체가 toJSON 메서드를 포함하고 있다면, 해당 객체가 직렬화(Serialization) 또는 JSON 변환 과정에서 toJSON 메서드가 호출될 수 있습니다. 이를 이해하려면 Nuxt

opendive.tistory.com

그리고 위 예제에서는 superjson 을 이용하여 data 를 직렬화하며, client 에서는 다시 superjson.parse 를 이용해 역 직렬화하였습니다. 우리는 devalue 를 사용하겠습니다.

import { stringify } from 'devalue';
export default defineEventHandler(async (event) => {
  const data = {
    createAt: new Date(),
        toJSON() {
      return this;
    }
  }
  return stringify(data) as unknown as typeof data;
});

위 코드에 보시면 as unkonwn as typeof data 의 표현식이 있습니다.

타입 추론과 런타임 참조를 위한 표현 방식입니다.

api endpoint 에서 어떤 타입을 반환하건 data 타입으로 추론하도록 강제합니다.

https://opendive.tistory.com/759

(Typescript) as unknown as typeof data

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

opendive.tistory.com

client 는 다음과 같습니다.

const {data: dateData} = await useFetch('/api/date')
// dateData.value?.createAt.getHours()

onMounted(() => {
  console.log(dateData.value?.createAt.getHours()); // runtime 시 undefined
})

에디터가 지원해 준다면 data 에 마우스 오버시 타입 추론되는 것이 보일 것입니다.

하지만 runtime 에는 undefined 가 발생하는 것을 볼수 있습니다. (client side: onMounted hook)

브라우저 주소창을 통해 api endpoint url 을 직접 입력해보면 Cannot stringify a function 오류가 발생하는 것을 알수 있습니다.

애초에 server api endpoint 에서 stringify 의 사용시 toJSON 에 대한 충돌이 발생하는 것을 알수 있습니다.

stringify 함수는 object 타입이 아닌 function type 을 만날시 오류를 발생시킵니다.

The error "Cannot stringify a function" occurs because the stringify function does not support serializing functions. In the data object includes a toJSON method, which is a function. When stringify tries to process this object, it encounters the toJSON method and throws an error.

Stringify Function: The stringify function is designed to convert various data types into a string representation. However, it explicitly throws an error when it encounters a function.

if (typeof thing === 'function') {
  throw new DevalueError(`Cannot stringify a function`, keys);
}

그리하여 여기서는 data 와 타입을 구분할 필요가 있습니다.

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;
});

data 가 실질적인 데이터를 가지고 dataToJSON 으로 타입을 지정합니다.

이 경우 데이터는 직렬화되어 있음으로 역 직렬화가 필요합니다.

const {data: dateData} = await useFetch('/api/date', {
  transform(data) {
    return parse(data as unknown as string) as typeof data;
  }
});


<template>
  <div>
    <h1>Pick Data</h1>
    <div>
      {{ dateData?.createAt.getDate() }}
    </div>
  </div>
</template>

마찬가지로 parse 는 string 타입의 매개변수가 필요함으로 data as unknown as string 형태로 타입 우회합니다.

어떤 타입이 올지 알수 없음으로 unknown 이 필요합니다.

또한 parse 된 데이터는 data 타입으로 선언되어야 타입추론이 가능함으로 as typeof data 가 추가되게 됩니다.

[Nuxt] useFetch options

Yeah-Panda — Wed, 15 Jan 2025 09:48:51 +0900

<script lang="ts" setup>
const { data, execute } = await useFetch('https://dummyjson.com/users/1',
  {
    server: false,
    immediate: false,
    default: () => {
      return {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
);

</script>
<template>
  <div>
    <h1>UseFetch Brief</h1>
    <button type="button" @click="() => execute()">Fetch</button>
    <div>
      <pre>
        {{ data }}
      </pre>
    </div>
  </div>
</template>

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 Composables

Fetch data from an API endpoint with an SSR-friendly composable.

nuxt.com

그리고 dedupe 옵션이 있습니다.

"defer" 과 "cancel" 값을 설정할수 있습니다.

<script lang="ts" setup>
const { data, execute } = await useFetch('/api/random-user',
  {
    server: false,
    immediate: false,
    dedupe: "defer",
    default: () => {
      return {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  }
);

</script>
<template>
  <div>
    <h1>UseFetch Brief</h1>
    <button type="button" @click="() => execute()">Fetch</button>
    <div>
      <pre>
        {{ data }}
      </pre>
    </div>
  </div>
</template>

위 코드의 api/random-user 는 2초의 딜레이후 api 를 호출하도 구현되어 있습니다.

api 호출후에 execute 버튼을 빠르게 반복적으로 누르는등 동일한 API 의 반복호출에 대한 처리 옵션입니다.

"cancel" 의 경우 이전 API 의 호출이 완료되지 않았다면 캔슬시킨 다음 현재의 API 를 재호출합니다.

"defer" 의 경우 이전 API 의 호출이 완료된 이후에 재호출할수 있습니다.

lodash 의 throttle 와 bounce 와 유사합니다.

그 밖에 필요한 옵션들은 공식문서를 참고하면 자세하게 확인할 수 있습니다.