React 시니어 기술면접

Module Federation을 활용하여 런타임에 각 마이크로 앱을 동적으로 로드하고, shared 설정으로 React와 같은 공통 라이브러리를 싱글톤으로 관리합니다. 상태 공유는 CustomEvent 기반의 이벤트 버스나 경량 상태 관리 라이브러리를 컨테이너 앱에서 제공하여 처리하고, 각 마이크로 앱은 독립적인 라우팅을 가지되 컨테이너에서 통합 라우팅을 관리합니다. 버전 충돌 방지를 위해 공통 디자인 시스템과 API 계약을 명확히 정의하고, 각 팀의 배포 독립성을 보장하면서도 통합 테스트 환경을 구축해야 합니다.

메모리 누수의 주요 원인은 정리되지 않은 이벤트 리스너, 클린업되지 않은 타이머, 클로저에 의한 참조 유지, 전역 상태의 무분별한 증가 등입니다. Chrome DevTools의 Performance 탭에서 메모리 그래프가 계속 상승하는지 확인하고, Heap Snapshot을 타임라인별로 찍어 비교하여 Detached DOM nodes나 증가하는 객체를 식별합니다. useEffect의 cleanup 함수를 철저히 구현하고, WeakMap이나 WeakSet 사용을 고려하며, React DevTools Profiler로 불필요한 리렌더링을 제거하고, 대용량 데이터는 페이지네이션이나 가상화로 처리합니다.

서버 상태는 React Query나 SWR로 관리하고 클라이언트 상태만 별도 라이브러리로 관리하는 것이 현대적 접근입니다. Redux는 복잡한 비즈니스 로직, 미들웨어 필요, 타임트래블 디버깅이 중요한 경우에 적합하며, Zustand는 간단한 API로 빠른 개발이 필요할 때, Jotai/Recoil은 원자적 상태 관리와 선택적 구독이 필요한 경우 유용합니다. 팀의 기술 스택, 학습 곡선, 번들 크기, DevTools 지원, 타입스크립트 통합도를 고려하여 선택하되, 과도한 전역 상태보다는 상태를 가능한 로컬에 유지하는 것이 유지보수에 유리합니다.

React는 기본적으로 JSX에서 자동 이스케이핑으로 XSS를 방지하지만, dangerouslySetInnerHTML 사용 시 DOMPurify 같은 라이브러리로 sanitize해야 합니다. CSRF는 SameSite 쿠키 속성과 CSRF 토큰을 활용하고, API 요청 시 Origin 헤더를 검증합니다. 민감 정보는 환경 변수로 관리하되 클라이언트 번들에 포함되지 않도록 주의하고, 토큰은 httpOnly 쿠키에 저장하며, Content Security Policy 헤더를 설정하여 인라인 스크립트 실행을 제한합니다. 의존성 취약점은 npm audit과 Snyk로 정기적으로 점검합니다.

ESLint는 airbnb나 react-app 기본 룰셋에 팀 커스텀 룰을 추가하여 구성하고, Prettier로 코드 포맷팅을 자동화하며 두 도구가 충돌하지 않도록 eslint-config-prettier를 설정합니다. Husky와 lint-staged로 커밋 전 자동 린트/포맷팅을 강제하고, commitlint로 커밋 메시지 규칙을 통일합니다. 코드 리뷰는 PR 템플릿으로 체크리스트를 제공하고, 2명 이상의 승인을 필수로 하며, 자동화된 CI에서 테스트와 빌드를 검증합니다. 주기적인 코드 스타일 가이드 문서 업데이트와 팀 회고를 통해 룰을 개선합니다.