ky로 fetch 대체하기 (fetch 딥 다이브)

Next.js에선 axios 대신 fetch를 확장해서 쓰자!

JS 생태계에서 Axios 대신 fetch를 확장해서 쓰고자 하는 움직임은 꾸준히 있었다.
Next.js 환경에서는 fetch를 이용해야 캐싱도 next.js 환경에서 의도한 바 대로 동작하게 할 수 있고, 별도의 HTTP 클라이언트를 두지 않아 번들 사이즈를 최적화 할 수 있다고 한다. 작은 번들 사이즈는 오히려 CSR 환경에서 더욱 중요해 보인다.

그런데 글을 쓰면서 알아보니 24년도에 axios의 adapter 설정으로 next.js의 fetch를 이용할 수 있게 됐다고 한다. 이 글에서 next.js의 fetch가 어떻게 구현돼있는지에 대한 인사이트도 얻을 수 있었다. globalThis의 fetch를 오버라이딩 한다는 거였다.

https://velog.io/@bbbjihan/Next.js-%EC%BA%90%EC%8B%B1-%EB%95%8C%EB%AC%B8%EC%97%90-Axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EB%A5%BC-%ED%8F%AC%EA%B8%B0%ED%95%98%EB%9D%BC%EA%B3%A0-Axios-adapter-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-Next.js-caching-%EC%A7%80%EC%9B%90-%EB%B0%9B%EA%B8%B0

return-fetch를 써봤어요

나도 React 환경에서 axios를 이용했지만, next.js 환경에서는 next.js에서의 서버 컴포넌트, 캐시 등을 이유로 fetch을 확장해서 만든 return-fetch 를 써봤다. Axios처럼 인터셉트 기능을 지원해서 매우 좋았지만, 당시에 패키지 매니저 관련 이슈로 인해 직접 core 패키지에 코드를 포함해 이용해야만 하는 단점이 있었다. 그래서 이번에는 ‘ky’ 를 써보기로 했다. 아, 여담이지만 이 라이브러리 꽤 많은 곳에서 이용하는 나름 공룡이 돼버렸다.

나도 React 환경에서 axios를 이용했지만, next.js 환경에서는 next.js에서의 서버 컴포넌트, 캐시 등을 이유로 fetch을 확장해서 만든 return-fetch 를 써봤다. Axios처럼 인터셉트 기능을 지원해서 매우 좋았지만, 당시에 패키지 매니저 관련 이슈로 인해 직접 core 패키지에 코드를 포함해 이용해야만 하는 단점이 있었다. 그래서 이번에는 ‘ky’ 를 써보기로 했다. 아, 여담이지만 이 라이브러리 꽤 많은 곳에서 이용하는 나름 공룡이 돼버렸다.

어디였는지는 모르겠는데요, 어디선가 봤어요

어디선가 ky 를 이용해 API 호출 인스턴스를 만든 것을 기억해뒀다가 도입하기로 했다. 도입하기로 한 이후로는 탄탄대로였다. Interceptor와 같은 개념인 ‘hooks’ 개념으로 Request, Response에 대한 Interceptor를 구현할 수 있다.

const api = ky.create({
  prefixUrl: process.env.EXPO_PUBLIC_API_URL,
  timeout: 5000, // 5초 후 타임아웃
  headers: {
    "Content-Type": "application/json",
  },
  hooks: {
    beforeRequest: [
      async (request) => {
        console.debug("🚀 Request START:", request.method, request.url);
        // 로컬 스토리지에서 토큰 가져오기
        // 토큰 없으면 경고 표시
        // 토큰 헤더에 추가
        return request;
      },
    ],
    afterResponse: [
      async (request, options, response) => {
	      // 응닫 처리
        try {
          const body = await response.clone().json();
          // ResponseWrapper 구조를 갖고 있는지? (TS Type Guard)
          // 객체에 존재하는 JS Date 포매팅
          // 새로운 응답 객체로 반환
        } catch (e) {
	        // 파싱 관련 에러 처리
        }
        return response;
      },
    ],
    beforeError: [
      async (error) => {
	      // 에러가 발생한 경우 Body가 존재하면 ResponseWrapper 구조로 파싱
	      // 파싱된 객체에서 message, status 파악해 로깅
	      // 그대로 다시 반환, 호출하는 쪽에서 HTTPError 핸들링 하게 처리
      },
    ],
  },
})

딥 다이브 하기

글을 쓰다 보니 fetch를 왜 next.js에서 지양해야 한다고 사람들이 말했는지를 확실하게 알 수 있었고, next.js의 fetch가 어떻게 동작하는지도 알 수 있게 된 딥 다이브였다. 이렇게 라이브러리를 쓰다 보면 안쪽이 어떻게 구현돼있는지가 궁금해지기 마련이고, 그럴 때 주저 없이 딥다이브 해보자. 더 깊이 빠져 죽어도 되니까. 아, 물론 이정도로 무슨 딥다이브냐고 할 사람들도 있을 것이다. 그런 분들껜 나댄 것에 대한 심심한 사과를..

Tanstack Query를 팠을 때도 그랬고, 확실히 딥다이브를 하면 인사이트가 한층 상승하는 것 같다. 성장..? 이라고 해야할까 이걸?