Next.js API 로직 공통화: fetch 기반 인터셉터와 훅 개선 사례

핵심 기술

Next.js 프로젝트에서 fetch API를 기반으로 API 로직을 공통화하고, 서버/클라이언트 환경 분기, 인증 토큰 관리, 에러 처리 로직을 개선하여 코드 중복을 제거하고 유지보수성을 높인 사례를 다룹니다.

기술적 세부사항

• API URL 공통화: 서버 컴포넌트, 클라이언트 컴포넌트, 테스트 환경(MSW) 등 다양한 환경에 따라 baseUrl을 동적으로 설정하는 buildURL 함수를 구현했습니다.
  • process.env.NEXT_PUBLIC_API_MOCKING 및 typeof window === 'undefined'를 사용하여 환경별 분기 처리.
  • addQueryParams 함수를 통해 쿼리 파라미터 추가.
• HTTP 헤더 관리: buildHeaders 함수를 통해 Content-Type, 사용자 정의 헤더, Authorization 헤더를 자동으로 생성 및 병합했습니다.
  • getCurrentToken() 함수로 클라이언트/서버 환경에 맞는 토큰 획득.
• 인증 토큰 갱신 (Interceptor 로직): accessToken 만료 시 refreshToken 기반으로 토큰을 갱신하고 이전 요청을 재실행하는 refreshAccessToken 함수를 구현했습니다.
  • Promise를 공유하여 동시 요청 시 중복 갱신 방지.
  • authContextRef를 통해 인증 상태 동기화.
• 응답 및 에러 처리: handleResponse 함수로 API 응답을 파싱하고, HTTP 상태 코드 및 응답 데이터에 따라 일관된 ApiError 객체를 생성하여 반환합니다.
  • response.json()을 통한 데이터 파싱 및 data 필드 추출.
• 커스텀 훅 및 서비스 로직 개선: API 호출 로직을 추상화하여 useAuth context에 대한 의존성을 제거하고, 서비스 코드의 간결성을 높였습니다.
  • useCreateRecords 훅에서 accessToken 주입 로직 제거.
  • 서비스 코드 라인 수 평균 26줄에서 7줄로 감소.

개발 임팩트

• API 로직의 중복 제거 및 코드 가독성 향상.
• 인증 토큰 관리의 효율성 증대 및 보안 강화.
• 일관된 에러 처리 방식으로 디버깅 및 유지보수 용이성 개선.
• 테스트 코드 작성 용이성 증대.
• 서비스 코드의 간결화로 개발 생산성 향상.

톤앤매너

Next.js 프로젝트에서 fetch API를 효과적으로 활용하여 API 통신 계층을 추상화하고 개선하는 방법에 대한 전문적인 분석과 실무적인 해결책을 제시하는 톤앤매너를 유지합니다.