Frontend

React 17로 업그레이드하면서 document 레벨 이벤트 리스너와의 충돌 문제를 겪었다. 이벤트 위임이 document에서 root DOM으로 변경된 것이 원인이었고, 기존 바닐라 JS 코드를 수정해야 했다.

TypeScript 4.2에서 추가된 Template Literal Types를 프로젝트에 적용하면서 API 엔드포인트와 이벤트 이름의 타입 안전성을 개선했다. 런타임 에러를 컴파일 타임에 잡을 수 있게 되었다.

TypeScript 4.2에서 추가된 템플릿 리터럴 타입을 활용해 REST API 경로를 타입 안전하게 관리하는 방법을 정리했다. 문자열 리터럴 조합으로 런타임 에러를 컴파일 타임에 잡을 수 있게 되었다.

프로젝트에서 반복되는 폼 처리 로직을 Custom Hook으로 추상화했다. validation과 에러 처리를 포함한 재사용 가능한 useForm 훅을 만들어 코드 중복을 줄였다.

TypeScript 4.2에서 추가된 template literal types를 실제 프로젝트의 API 경로 관리에 적용해봤다. 런타임 에러를 컴파일 타임에 잡을 수 있게 되어 실수로 인한 404 에러가 크게 줄었다.

TypeScript 4.2에서 추가된 튜플 타입의 rest element 위치 확장 기능을 실무에 적용해봤다. 기존에는 마지막에만 가능했던 rest element를 중간이나 앞에 배치할 수 있게 되면서 가변 인자 처리가 훨씬 유연해졌다.

프로덕션 적용 전 테스트 환경에서 Concurrent Mode를 실험해봤다. useTransition, useDeferredValue 등을 실제 대시보드에 적용하며 확인한 성능 개선 효과와 주의사항을 정리했다.

TypeScript 4.1에서 추가된 Template Literal Types를 API 라우팅 타입 안정성에 적용했다. 기존 string 타입으로 처리하던 경로를 타입 레벨에서 검증하여 런타임 오류를 사전에 방지할 수 있었다.

TypeScript 4.1에서 추가된 Template Literal Types를 프로젝트에 적용했다. 문자열 조합 타입을 컴파일 타임에 검증할 수 있어 API 엔드포인트나 CSS 클래스명 관리에 유용했다.

React 17부터 도입된 새로운 JSX Transform으로 더 이상 파일 상단에 'import React from "react"'를 작성하지 않아도 된다. 프로젝트에 적용하면서 번들 사이즈와 개발 경험이 개선되었다.