[5장] 여러분의 회사에서도 클라이언트를 만들어 사용하고 계신가요?

[Joie-Kim]

🧐 Question

저희 팀은 axios를 기반으로 해서 아래와 같은 아키텍처를 취하고 있는데요, 여러분의 팀에서는 어떤 아키텍처를 가지고 있는지 궁금합니다.

• libraries/network.ts (사내 라이브러리 레포에 존재, 프로젝트에서 설치해 사용) ➡️ axios를 커스텀 해서 만든 팀의 HTTP 클라이언트
• service/index.ts (프로젝트 내 존재) ➡️ 위 라이브러리를 기반으로 비즈니스 로직을 반영, 실제 프로젝트 내 컴포넌트들은 이걸 사용
• composable/useFetches.ts (프로젝트 내 존재, react의 hook 개념) ➡️ HTTP 요청 및 응답 관련 상태 관리 (success, error, idle, loading..)

📝 Reference

[jasongoose]

저희 팀도 axios를 사용하는데 단일 모듈에서 기본 요청설정과 interceptor 등을 지정한 axios 인스턴스와 함께 HTTP 메서드별로 요청하는 함수들을 따로 만들어 전역에서 사용하고 있습니다~

[chhw130]

저 또한 희주님하고 비슷한 구조를 가져가고 있습니다.

다만 이런 점들이 다른 것 같아요.

1. tanstack-query를 사용하고 있어서 다음과 같은 구조를 지니고 있어요.

   composable/{특정 비즈니스 로직} ex) composable/useUserQuery.ts

const useUserQuery = () => {
    // 기타로직
    return useQuery(
     ...//user 관련
    )
} 

2. 어댑터 패턴을 사용하고 있어요. axios를 통해 api통신을할 때 서버 응답이나 오류가 발생 할 때 중간에 null값이나 에러를 체킹해주는 어댑터 함수를 만들어 처리하고 있습니다.

프론트엔드 어댑터 패턴