React + TypeScript 전환기 (Feat. msw)

간단 소개

사람인 FE 개발팀의 React + TypeScript 전환 경험 공유: TS 도입 효과, Type 관리 전략, MSW 활용, HOC 패턴 적용.

AI Summary

TS 도입 및 Type 관리 전략
- 사람인 FE 개발팀은 TS를 도입하여 테스트 부재, 코드 리뷰 부담, 낮은 생산성 문제 해결을 시도.
- 컴포넌트 props는 local types로, 그 외는 global types로 관리하여 import문 간소화 및 재사용성 확보.
- 컴포넌트 types는 컴포넌트 디렉토리에서 관리하는 방식으로 결정.
TS 도입 효과 및 MSW 활용
- TS 도입 후 코드 리뷰 부담 감소, 개발 속도 향상, 코드 가독성 향상 등의 효과를 얻음.
- MSW를 사용하여 API mocking을 통해 API 개발 완료 전에도 개발 가능.
- MSW를 통해 API 실패 케이스에 대한 사전 대응 가능.
HOC 패턴 적용
- HOC 패턴을 적용하여 페이지 간 중복되는 로직과 UI 재사용성을 높임.
- HOC 남용을 방지하기 위해 사용 규칙을 정하고 특정 케이스에만 적용.