Frontend

useEffect에서 props 변경을 감지할 때 이전 값과 비교가 필요한 경우가 있다. useRef를 활용해 이전 props를 저장하는 커스텀 훅을 만들어 해결했다.

React 17 RC가 공개되었다. 새 기능이 없는 대신 점진적 업그레이드를 지원하는 것이 핵심이다. 레거시 프로젝트에 적용하며 고민했던 부분을 정리한다.

React 17 RC가 공개되면서 새로운 JSX Transform과 점진적 업그레이드 기능을 검토했다. 레거시 프로젝트에 적용 가능성을 확인하고 마이그레이션 계획을 수립했다.

React 17 RC가 공개되었다. 새로운 기능은 없지만 이벤트 위임 방식이 document에서 root DOM으로 변경되어 레거시 코드와의 통합이 개선되었다. 프로덕션 적용 전 확인이 필요한 부분을 정리했다.

프로젝트에서 모달 컴포넌트를 구현하면서 z-index 문제에 부딪혔다. React Portal을 사용해 DOM 계층 구조 밖에서 모달을 렌더링하는 방식으로 해결했다.

재택근무로 전환되면서 기존 프로젝트 리팩토링 시간이 생겼다. 복잡한 상태 업데이트 로직에서 불변성 유지 코드가 가독성을 해치고 있어 Immer를 도입했다. 도입 과정과 실제 개선 사례를 정리했다.

API 응답 처리 중 Union 타입의 타입 가드를 제대로 활용하지 못해 any로 도배하게 된 코드를 리팩토링했다. discriminated union 패턴을 적용해 타입 안정성을 확보한 과정을 정리한다.

React 17 RC가 발표되면서 이벤트 위임 방식이 document에서 root DOM 컨테이너로 변경되었다. 레거시 jQuery 코드와 혼용하는 프로젝트에서 발생했던 이슈가 해결될 것으로 보인다.

프로젝트에 Tailwind CSS를 도입한 지 3개월이 지났다. Utility-first 방식이 낯설었지만, CSS 파일 관리 부담이 크게 줄었다. 다만 클래스명이 길어지는 문제는 여전히 고민거리다.

유틸리티 우선 CSS 프레임워크인 Tailwind CSS를 프로젝트에 도입한 지 3개월이 지났다. 초반의 거부감을 넘어서며 느낀 장단점과 팀 내 적응 과정을 정리했다.