[Nuxt] toJSON 이 선언된 api 응답

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를 직접 호출하는 경우.