본문으로 건너뛰기

프론트엔드 통신 모듈 자문자답 📖

기본 개념 관련​

Q: 초기 설계에서 고려해야할 관점들은 무엇인가요?​

1. 통신 계층 추상화
2. API 엔드포인트 관리
3. API 서비스 계층 설계
4. 인터셉터 설계
5. 에러처리 전략
6. 캐시 전략
7. 재시도 메커니즘
  • 테스트 용이성: 모든 계층이 인터페이스를 통해 분리되어 있어 단위 테스트가 쉬움
  • 유지보수성: 실제 구현체를 교체하더라도 인터페이스만 지키면 됨
  • 일관성: 전체 애플리케이션에서 통신 처리 방식이 일관됨
  • 확장성: 새로운 기능이나 요구사항을 쉽게 추가할 수 있음

Q: 통신 계층을 추상화해야 하는 이유가 무엇인가요?​

A: 통신 계층 추상화는 다음과 같은 이점을 제공합니다:

  • HTTP 클라이언트 라이브러리(Axios, Fetch 등) 교체가 용이
  • 테스트 코드 작성이 쉬워짐
  • 공통 로직(에러 처리, 인증 등)을 한 곳에서 관리 가능
  • 비즈니스 로직과 통신 로직의 명확한 분리
// 추상화 예시
interface HttpClient {
  get<T>(url: string): Promise<T>;
  post<T>(url: string, data: any): Promise<T>;
}

// 실제 구현체는 쉽게 교체 가능
class AxiosClient implements HttpClient {
  // Axios 구현
}

class FetchClient implements HttpClient {
  // Fetch 구현
}

Q: HTTP 클라이언트 도구를 선택할 때 어떤 점들을 고려해야 하나요?​

A: HTTP 클라이언트 도구 선택 시 다음 사항들을 고려해야 합니다:

  1. 프로젝트 요구사항 부합도

    • 브라우저 지원 범위
    • 번들 사이즈 제약
    • TypeScript 지원 여부

  2. 기능적 측면

    • 인터셉터/미들웨어 지원
    • 요청 취소 기능
    • 자동 재시도
    • 업로드/다운로드 진행률 지원
    • JSON 자동 변환

  3. 유지보수 관점

    • 커뮤니티 활성도
    • 문서화 품질
    • 최근 업데이트 주기
    • 이슈 해결 속도

  4. 성능과 확장성

    • 메모리 사용량
    • 캐싱 지원
    • 커스터마이징 용이성

예를 들어:

  • axios: 풍부한 기능과 넓은 생태계
  • fetch: 브라우저 내장으로 가벼움
  • ky: fetch 기반으로 현대적 기능 추가
  • superagent: Node.js 친화적

Q: Axios와 Ky의 주요 차이점은 무엇인가요?​

A: 각 도구의 특징을 카테고리별로 비교하면 다음과 같습니다:

  1. 프로젝트 요구사항 부합도

    항목AxiosKy
    브라우저 지원IE11 포함 광범위한 지원모던 브라우저 only (ES2017+)
    번들 사이즈~32KB (min + gzip)~4KB (min + gzip)
    TypeScript네이티브 지원네이티브 지원

  2. 기능적 측면

    기능AxiosKy
    인터셉터완성도 높은 request/response 인터셉터hooks API로 구현
    요청 취소CancelToken + AbortController 지원네이티브 AbortController만 지원
    자동 재시도써드파티 라이브러리 필요내장 retry 옵션
    업로드 진행률네이티브 지원구현 필요
    JSON 변환자동자동

  3. 유지보수 관점

    항목AxiosKy
    GitHub Stars100K+9K+
    주간 NPM 다운로드4천만+50만+
    최근 업데이트매우 활발활발
    이슈 해결 속도빠름 (큰 커뮤니티)보통

  4. 성능과 확장성

    항목AxiosKy
    메모리 사용상대적으로 높음매우 낮음
    캐싱XHR 기반 캐싱Fetch API 기반 캐싱
    확장성다양한 플러그인 생태계심플한 hooks API

선택 가이드:

  • Axios 선택이 좋은 경우:

    • IE11 지원이 필요한 경우
    • 완성도 높은 인터셉터가 필요한 경우
    • 파일 업로드 진행률 표시가 필요한 경우(XHR 기반)
    • 큰 커뮤니티와 생태계가 중요한 경우

  • Ky 선택이 좋은 경우:

    • 모던 브라우저만 지원하면 되는 경우
    • 번들 사이즈 최적화가 중요한 경우
    • 심플한 API를 선호하는 경우
    • 내장 retry 기능이 필요한 경우

Q: 인터셉터(Interceptor)는 정확히 어떤 상황에서 필요한가요?​

A: 인터셉터는 다음과 같은 상황에서 유용합니다:

  • 모든 API 요청에 인증 토큰 추가
  • 응답 에러 공통 처리 (401 인증 오류, 404 페이지 등)
  • API 요청/응답 로깅
  • 요청 헤더 공통 설정

Q: React Query와 일반 상태 관리(Redux 등)는 어떻게 다른가요?​

A: 주요 차이점은 다음과 같습니다:

  • React Query: 서버 상태 관리에 특화 (캐싱, 자동 재검증, 낙관적 업데이트 등)
  • Redux: 클라이언트 상태 관리에 특화 (사용자 설정, UI 상태 등)

구현 관련​

Q: API 응답 타입을 어떻게 정의하는 것이 좋나요?​

A: 다음과 같은 방법을 추천합니다:

// 1. 기본 응답 타입 정의
interface ApiResponse<T> {
  data: T;
  message: string;
  status: number;
}

// 2. 구체적인 데이터 타입 정의
interface User {
  id: number;
  name: string;
  email: string;
}

// 3. 조합하여 사용
type UserResponse = ApiResponse<User>;
type UsersResponse = ApiResponse<User[]>;

Q: 토큰 만료 시 자동 갱신은 어떻게 구현하나요?​

A: 일반적인 구현 패턴은 다음과 같습니다:

  1. 401 에러 감지
  2. 리프레시 토큰으로 새 액세스 토큰 요청
  3. 새 토큰으로 원래 요청 재시도
  4. 실패 시 로그인 페이지로 이동

Q: API 호출 중복 방지는 어떻게 하나요?​

A: 다음과 같은 방법들이 있습니다:

  1. 요청 캐싱 (React Query 사용)
  2. 디바운싱/쓰로틀링 적용
  3. AbortController 활용
  4. 요청 큐잉

성능 관련​

Q: 언제 캐시를 사용하고, 언제 사용하지 않아야 하나요?​

A: 다음 기준을 참고하세요:

캐시 사용이 좋은 경우:

  • 자주 변경되지 않는 데이터 (사용자 프로필, 설정 등)
  • 공통으로 사용되는 데이터 (카테고리 목록 등)
  • 네트워크 부하가 큰 데이터

캐시를 피해야 하는 경우:

  • 실시간성이 중요한 데이터 (채팅, 알림 등)
  • 보안에 민감한 데이터
  • 사용자별 맞춤 데이터

Q: 대량의 데이터를 처리할 때 성능 최적화는 어떻게 하나요?​

A: 다음과 같은 전략을 사용할 수 있습니다:

  1. 페이지네이션 구현
  2. 무한 스크롤 적용
  3. 가상화 리스트 사용
  4. 데이터 청크 단위 로딩

테스트 관련​

Q: API 모킹은 어떻게 하는 것이 좋나요?​

A: 다음과 같은 방법들이 있습니다:

  1. MSW(Mock Service Worker) 사용
  2. Jest Mock 함수 활용
  3. 테스트용 API 서버 구축
  4. Storybook과 통합하여 테스트

Q: 어떤 종류의 테스트를 작성해야 하나요?​

A: 주요 테스트 유형:

  1. 단위 테스트: API 클라이언트 메서드
  2. 통합 테스트: API 연동 컴포넌트
  3. E2E 테스트: 실제 사용자 시나리오

보안 관련​

Q: 민감한 데이터는 어떻게 처리해야 하나요?​

A: 다음 가이드라인을 따르세요:

  1. HTTPS 사용 필수
  2. 토큰은 HttpOnly 쿠키로 관리
  3. 중요 데이터는 로컬 스토리지 사용 금지
  4. API 응답에서 민감 정보 필터링

Q: CORS 에러는 어떻게 해결하나요?​

A: 일반적인 해결 방법:

  1. 서버 측 CORS 설정 요청
  2. 프록시 서버 사용
  3. 개발 환경에서 프록시 설정
  4. 올바른 Origin 설정

디버깅 관련​

Q: API 호출 실패 시 어떻게 디버깅하나요?​

A: 다음 단계로 진행:

  1. 브라우저 개발자 도구 네트워크 탭 확인
  2. API 클라이언트 로깅 활성화
  3. 요청/응답 인터셉터 로그 확인
  4. 서버 로그 대조 확인

Q: 성능 병목을 찾으려면 어떻게 해야 하나요?​

A: 다음 도구와 방법을 활용:

  1. Chrome DevTools Performance 탭
  2. React DevTools Profiler
  3. 네트워크 워터폴 분석
  4. 리액트 렌더링 최적화 도구

실무 관련​

Q: 실제 프로젝트에서 많이 하는 실수는 무엇인가요?​

A: 주요 실수 사례:

  1. 에러 처리 미흡
  2. 타입 정의 불충분
  3. 무분별한 API 호출
  4. 보안 고려 부족
  5. 테스트 코드 부재

Q: 프로덕션 환경에서 주의할 점은 무엇인가요?​

A: 핵심 고려사항:

  1. 에러 로깅 및 모니터링
  2. 성능 모니터링
  3. 사용자 피드백 수집
  4. 점진적 배포
  5. 롤백 계획 수립