React

재택근무 중 프로젝트 성능 이슈를 마주했다. 특정 페이지에서 input 입력 시 전체 리스트가 리렌더링되면서 타이핑이 버벅이는 문제였다. React.memo와 useCallback을 적용하며 배운 것들을 정리했다.

React 17 RC가 공개되면서 새로운 JSX Transform이 도입됐다. 더 이상 파일마다 React를 import 하지 않아도 되는 변경 사항과 실제 프로젝트 적용 과정을 정리했다.

재택근무 중 프로덕션에서 발생한 런타임 에러로 전체 화면이 깨지는 문제를 겪었다. React ErrorBoundary를 도입해 에러 격리와 사용자 경험을 개선한 과정을 정리했다.

styled-components로 관리하던 스타일을 Tailwind CSS로 전환했다. 초기 설정과 팀 적응 과정, 그리고 실제 사용하며 느낀 장단점을 정리했다.

재택근무로 전환되면서 사용자 네트워크 환경을 고려한 최적화가 필요해졌다. 번들 분석부터 코드 스플리팅까지 적용한 과정을 정리했다.

코로나로 인한 재택근무가 시작되면서 회사 맥북이 아닌 개인 PC로 작업하게 되었다. 빌드 시간이 2배 이상 늘어나는 문제를 webpack 설정 최적화로 해결한 과정을 정리했다.

함수 컴포넌트에서 이전 props 값을 비교해야 하는 상황이 생겼다. useRef와 useEffect를 조합해 커스텀 훅으로 해결한 과정을 정리했다.

재택근무로 전환되면서 사내 어드민 프로젝트 리팩토링을 진행했다. styled-components에서 Tailwind CSS로 전환한 과정과 장단점을 정리했다.

재택근무로 전환하면서 팀원들의 낮은 사양 노트북에서 성능 이슈가 발생했다. React.memo와 useMemo를 활용해 불필요한 리렌더링을 제거한 과정을 정리했다.

재택근무로 전환 후 팀원들이 사용하는 관리자 대시보드의 렌더링 성능 문제를 발견했다. Context API를 사용한 전역 상태 관리 구조에서 불필요한 리렌더링이 발생하고 있었고, 이를 분할과 메모이제이션으로 해결했다.