fetch에 typescipt를 사용하기

내 개인 페이지에서 뭘 더 할 수 있을지 고민하다가, 내가 지금까지 키웠던 게임 캐릭터들을 모아볼 수 있는 페이지를 만들어볼까 했다.

 

먼저 로스트아크부터 시작했다. 개발자 페이지에서 API 키 요청해서 받고 해당 API에서 내 캐릭터의 이미지를 가져오는 URL을 next.config.js에 추가해줬다.

// next.config.js
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'img.lostark.co.kr',
        port: '',
        pathname: '/armory/**'
      }
    ]
  },

 

next14버전을 사용하고 있는데, 이렇게 외부 URL을 추가해주지 않으면 해당 URL로 리소스를 가져올 때 에러를 낸다.

 

본론으로 돌아가서 fetch를 사용해서 내 캐릭터의 정보를 가져오려고 했다.

fetch(url);

 

이렇게 딱 써놓고 보니, 아 이걸 또 어떻게 재활용하려고 이렇게 써놨나 싶은 생각이 들었다. 

 

그러면 최대한 재활용 가능한 fetch 코드를 작성해보자.

 

일단 재활용 해야하니까 리턴 타입은 매번 달라질 수 있다는 말이된다. 때문에 제너릭으로 선언해야하며

 

API를 GET하는 것이 대부분이겠지만, 혹시 모르니 Method와 요청 경로를 Props로 받아야 겠다는 생각이 든다.

 

이를 정리해서 코드를 적어보면

 

const loaAPIInstanceFetch = <T>(url: string, method: string): Promise<T> =>
  fetch(`${api_URL}${url}`, {
    method,
    headers: {
      Authorization: `bearer ${process.env.NEXT_PUBLIC_LOA_KEY}`
    },
    next: {}
  }).then(res => res.json());

export const get_loa_info = {
  get_character_fetch: () =>
    loaAPIInstanceFetch<LOA_CHARACTER>(`/armories/characters/${loa_nickname}`, 'GET')
};

 

제너릭은 자주 사용하지 않다보니 함수 표현식에서 제너릭을 사용하는 게 어색했지만, 이렇게 또 하나 배워간다.