API 라이브러리, 어떤 게 좋을까?

[guesung]

1. fetch
2. ky
3. Axios

[guesung]

1. fetch

callback 기반 API인 XMLHttpRequest와 달리, Fetch API는 서비스 워커에서도 쉽게 사용할 수 있는 Promise기반의 개선된 대체제. CORS를 포함한 고급 개념을 HTTP 확장

• 응답은 Response객체로 표현되며, JSON 응답 본문은 바로 반환하지 않음
• JSON 본문 콘텐츠를 추출하기 위해서는 .json() 메소드로 호출해야 함

[guesung]

디프만 - toks-web의 경우 fetch를 사용했다.

import { CommentType } from '../models/comment';

export const getCommentsByQuizId = async (quizId: string) => {
  const comments: CommentType[] = await fetch(
    `https://api.tokstudy.com/api/v1/quizzes/${quizId}/comments?page=0&size=100`
  )
    .then((result) => result.json())
    .then((commentInfo) => commentInfo.content);
  return comments;
};

const getQuizDetail = async (quizId: string) => {
  const result = await fetch(
    // 테스트로 가져온 투두데이터
    `https://jsonplaceholder.typicode.com/todos/${quizId}`
  );
  const todo: QuizType = await result.json();
  return todo;
};

이 프로젝트는 api 요청이 2회밖에 없고, url 외에 headers 설정이 필요 없는 특수한 케이스인 듯하다.

[guesung]

2. axios

장점

1. JSON형태로 자동으로 변환
2. 크로스 브라우징 지원 e.g. IE11
   • XMLHttpReqeust기반이기 때문
3. response timeout 설정
4. HTTP interceptors 설정
5. 동시 요청 (axios.all())

[guesung]

Axios를 사용하게 될 경우 문제점이 있다. Next.

• 참고 : 공식문서
• Next.js extends the fetch options object to allow each request to set its own caching and revalidating rules. 즉, Next.js는 fetch를 확장하여 각 요청에 캐싱과 revalidating rule을 구현하였고
• (without fetch) the output of the request will not be cached and will be re-fetched on every request when the segment is rendered. 즉, fetch가 아닌 라이브러리를 사용한 요청들은 캐싱되지 않고 매 요청마다 refetch된다.

[guesung]

App routing 기반 프로젝트 중 axios사용한 프로젝트를 살펴보자.
디프만 - 띵동

// privateApi.ts
'use client';
import axios from 'axios';

import { CustomInstance } from '~/api/config/api.types';

import { onRequestError, onResponse } from './interceptor';
import { onRequestClient, onResponseErrorClient } from './interceptor.client';
import { ROOT_API_URL } from './requestUrl';

const privateApi: CustomInstance = axios.create({
  baseURL: ROOT_API_URL,
});

privateApi.defaults.timeout = 2500;

privateApi.interceptors.request.use(onRequestClient, onRequestError);

privateApi.interceptors.response.use(onResponse, onResponseErrorClient);

export default privateApi;

• axios instance를 만들고, interceptors.response와 interceptors.request를 설정하였다.

// commuity.api.server.ts
export const getCommunityDetailServer = (communityId: number) =>
  privateApi.get<CommunityDetailResponse>(`/communities/${communityId}`);

• privateApi에 url을 설정하여 api를 만들어주었다.

// src/app/planet/[communityId]/components/CommunityDetail/CommunityDetail.tsx
export const CommunityDetailComponent = async ({ id }: CommunityDetailProps) => { 
...
  const { communityDetailsDto } = await getCommunityDetailServer(id);
  return (...)
}

위처럼 사용하였다. 또한, server only를 이용하여 �Client Component에서 위 컴포넌트를 사용할 경우 빌드 과정에서 에러가 발생하도록 하였다.

[guesung]

3. KY Libary

• fetch 기반, 즉 Promise 기반의 데이터 요청
• fetch를 조금 더 간편하게 사용할 수 있도록 해줌

[guesung]

Axios가 확실히 다양한 편리한 기능(JSON 자동 변환, response timeout 등)을 제공해준다. fetch, ky에서도 물론 구현이 가능한 기능이지만 코드가 더 복잡해진다.

• 디프만의 띵동 프로젝트에서는 Next.js 13버전의 App routing인데 Axios로 구현을 해내었다.

결론적으로 우리는, 위 프로젝트를 참고하여 Axios를 사용하되 Next.js에서 Fetch에만 지원해주는 캐싱같은 경우 직접 커스텀하기로 결정하였다.