Frontend

팀 프로젝트에 React Hooks를 본격 도입하면서 useEffect 의존성 배열 관리가 생각보다 까다로웠다. eslint-plugin-react-hooks의 경고를 무시하지 말고 제대로 이해하는 게 중요했다.

6개월 전 출시된 Hooks를 팀 프로젝트에 본격 도입했다. Class 컴포넌트 마이그레이션 과정에서 만난 예상치 못한 문제들과 해결 방법을 정리한다.

외부 API 응답을 타입 안전하게 처리하기 위해 타입 가드를 도입했다. Runtime에서 타입을 검증하면서 TypeScript의 타입 추론도 활용할 수 있었다.

회원가입 폼의 반복되는 상태 관리 로직을 Custom Hook으로 추출했다. useState와 useEffect를 조합해 재사용 가능한 useForm 훅을 만들고, 여러 폼 컴포넌트에 적용한 과정을 기록한다.

TypeScript 3.7에 추가된 Optional Chaining(?.)과 Nullish Coalescing(??)을 프로젝트에 적용했다. 중첩된 객체 접근 코드가 상당히 간결해졌고, 타입 안정성도 개선됐다.

팀 프로젝트에 Hooks를 도입하면서 useEffect의 의존성 배열 때문에 발생한 버그를 겪었다. 빈 배열, 배열 없음, 특정 값 포함의 차이를 정리했다.

프로젝트에서 enum을 사용하다 번들 사이즈와 tree-shaking 이슈를 겪었다. union type과 as const를 조합해 더 나은 타입 안정성과 작은 번들 사이즈를 얻을 수 있었다.

TypeScript 3.6으로 업그레이드하면서 Generator 함수의 타입 체크가 엄격해졌다. 기존에 any로 넘어가던 부분들이 모두 에러를 뱉기 시작했고, Redux-Saga에서 특히 많은 수정이 필요했다.

팀 프로젝트에 React Hooks를 도입한 지 3개월이 지났다. 클래스 컴포넌트 리팩토링 과정에서 마주친 문제들과 실제 개발 경험을 정리했다.

TypeScript의 타입 체크는 컴파일 타임에만 동작한다. 외부 API 응답처럼 런타임에 결정되는 데이터의 타입 안정성을 보장하기 위해 io-ts를 도입한 경험을 정리했다.