Frontend

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

TypeScript 3.9가 정식 배포되었다. 빌드 속도 개선과 함께 Promise 타입 체크 강화 등 실무에 유용한 변경사항들이 포함되었다. 팀 프로젝트에 적용하면서 확인한 주요 개선사항을 정리했다.

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

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

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

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

재택근무 전환과 함께 프로젝트에 Tailwind CSS를 도입했다. CSS-in-JS에서 유틸리티 퍼스트 방식으로 전환하며 겪은 경험을 정리했다.

utility-first CSS 프레임워크인 Tailwind CSS를 프로젝트에 도입한 지 한 달이 지났다. 재택근무 환경에서 협업 시 CSS 관련 커뮤니케이션이 줄어든 점이 가장 큰 장점이었다.

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

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