프론트엔드 API 코드 구조

[seongwon030]

현재 api 코드는 도메인마다 분리되어 있는 것도 있고 아닌 것도 있습니다.
각 api 내에서 body나 header를 일일이 작성해야 하는 귀찮음도 존재합니다. 그래서 api 공통 모듈을 만들면 좋을 것 같아요.
이와 관련하여 가장 고쳤으면 좋겠거나 내가 생각하는 최고의 구조를 마음껏 제안해주세요. api 관련된 얘기라면 무엇이든 좋습니다.

[lepitaaar]

현재 api모두 securefetch, fetch로 api 요청 -> json응답 및 에러 핸들링을 매번 api생성시에 만들게되는데 작성하는 코더가 달라 각 코드의 일관성이 부족한 면이있습니다. axios 형태로 module.post(url) 이런식을 받아 json을 파싱하고 오류를 핸들링하는 모듈을 만들면 훨씬좋을꺼같아요!

[suhyun113]

좋은 제안인 것 같아요! fetch보다 axios로 모듈화하면 일관된 응답 처리랑 에러 핸들링이 가능해서 유지보수도 편해질 것 같아요.
공통 모듈 구조를 어떻게 잡을지 같이 얘기해보면 좋을 것 같네요 :)

[seongwon030]

axios에서는 알아서 JSON으로 변환해주거나 에러를 핸들링 해주는 기능이 있는 걸로 알아요.

같은 기능을 js fetch로 공통 모듈을 만들어보면 어떨까요?

[seongwon030]

http공통모듈 제가 생각한 방식은 이렇습니다

[lepitaaar]

구조 너무 좋습니다

  post: <K, T>(path: string, data: K, options?: Omit<HttpOptions, 'method' | 'body'>) =>
    request<T>(path, {
      ...options,
      method: 'POST',
      body: JSON.stringify(data)
    }),

제네릭이융해서 함수만드신거 너무 좋습니다. 근데 데이터 타입을 표현하기위해 제네릭을 하나더 쓰는것 과하지않을까요?

[seongwon030]

  post: <T>(path: string, data: any, options?: Omit<HttpOptions, 'method' | 'body'>) =>
    request<T>(path, {
      ...options,
      method: 'POST',
      body: JSON.stringify(data)
    }),

제네릭을 사용한다면 아마 api 호출부에서 모든 요청/응답 인터페이스를 짜야하는 부담도 있을 것 같아요.

제네릭을 쓰지 않고 data를 any로 둔다면 기존 api로직을 유지하고도 http공통 모듈을 적용할 수 있을 것 같네요!

일단 공통 모듈 작업 후에 any, unknown, 제네릭의 차이를 좀 더 공부해보면 좋겠어요