Frontend

TypeScript 4.7에 추가된 template literal type의 개선사항을 활용해 API 엔드포인트 경로를 타입 안전하게 관리하는 방법을 정리했다. 기존 string literal union의 한계를 극복하고 동적 경로 파라미터까지 타입 추론이 가능해졌다.

TypeScript 4.7 베타에서 Node.js ESM 환경에서의 타입 해석이 크게 개선되었다. module과 moduleResolution 옵션 조합으로 발생하던 문제들을 실제 프로젝트에 적용하며 정리했다.

레거시 프로젝트에 strictNullChecks를 점진적으로 적용하면서 겪은 문제들을 정리했다. any 타입 남발과 optional chaining 남용을 줄이는 과정에서 배운 것들을 기록한다.

TypeScript 4.6으로 업그레이드하면서 strictNullChecks 옵션과 조건부 타입 추론이 개선된 부분을 확인했다. 기존 코드베이스에서 발견된 타입 에러들을 정리했다.

TypeScript 4.6에 추가된 satisfies 연산자를 프로젝트에 적용했다. as 단언과 달리 타입 추론을 유지하면서도 제약을 검증할 수 있어 유용했다.

API 경로를 문자열로 관리하다 보면 오타나 잘못된 경로 사용이 런타임에 발견되곤 했다. TypeScript 4.6의 템플릿 리터럴 타입을 활용해 컴파일 타임에 이를 검증하는 방법을 정리했다.

React 18로 업그레이드 후 개발 환경에서 useEffect가 두 번 실행되는 현상을 발견했다. Strict Mode의 새로운 동작 방식과 대응 방법을 정리했다.

3월에 출시된 React 18을 프로덕션에 적용했다. Concurrent Rendering과 Automatic Batching을 도입하면서 겪은 문제와 성능 개선 결과를 정리한다.

React 18로 업그레이드하면서 겪은 Automatic Batching 적용 사례를 정리했다. 기존에 수동으로 처리하던 상태 업데이트 최적화가 자동으로 처리되면서 불필요한 리렌더링이 줄어들었다.

React 18로 업그레이드하면서 개발 환경에서 useEffect가 두 번 실행되는 현상을 발견했다. Strict Mode의 새로운 동작 방식을 이해하고 대응한 과정을 정리했다.