목차

1. 타입 시스템 설계 능력

역량 구체적 구현
대규모 타입 정의 TypeScript 타입 시스템 설계 및 유지보수
제네릭 활용 API 응답 타입 ApiResponse<T> 추상화로 타입 재사용성 확보
Union 타입 결재 상태 등 10개 이상의 상태값을 Union 타입으로 제한하여 런타임 에러 방지
타입 가드 조건부 타입 체크로 안전한 데이터 접근 보장

2. 상태 관리 전략

역량 구체적 구현
서버/클라이언트 상태 분리 React Query(서버) + Context(클라이언트) 역할 분리로 성능 최적화
캐싱 전략 staleTime/gcTime 설정으로 불필요한 API 호출 50% 감소
QUERY_KEYS 중앙화 모듈별 쿼리 키 네임스페이스로 캐시 무효화 전략 체계화
리렌더링 최적화 useMemo/useCallback으로 Context Provider 최적화

3. 컴포넌트 설계

역량 구체적 구현
재사용 컴포넌트 공용 컴포넌트 설계 (모달, 폼 입력, 테이블 등)
커스텀 훅 비즈니스 로직 훅 추출 (useDebounce, usePagination 등)
Provider 패턴 전역 상태를 Context로 관리
Atomic Design 패턴 복잡한 UI를 작은 단위로 분해하여 조합 가능하게 설계

4. API 계층 설계

역량 구체적 구현
중앙 에러 처리 Axios 인터셉터 기반 에러 코드별 메시지 자동 표시
토큰 자동 갱신 401 에러 시 Access Token 자동 갱신 + 실패한 요청 재시도
동시 요청 처리 토큰 갱신 중 추가 요청을 큐에 대기시켜 중복 갱신 방지
모듈화 도메인별 API 함수 분리로 유지보수성 향상

5. 성능 최적화

역량 구체적 구현
Debounce 검색 입력 최적화로 불필요한 API 호출 방지
requestAnimationFrame 반응형 UI 스케일링에 rAF 적용으로 부드러운 전환
React Query 캐싱 staleTime 5분 설정으로 동일 데이터 재요청 방지
코드 스플리팅 라우트 기반 동적 import로 초기 로딩 최적화