타입스크립트, 리액트쿼리 도입 - 파트너스 레거시 코드 리팩토링(1)

간단 소개

카카오헤어샵 파트너스 페이지 리팩토링 과정을 공유하며, Typescript, React-query 도입 효과와 팀 협업의 중요성을 강조한다.

AI Summary

리팩토링 필요성 합의
- 레거시 코드는 프로젝트 규모가 커질수록 발생하며, 리팩토링은 개발 효율성을 높이기 위한 선택이다.
- 팀은 파트너스 페이지의 리브랜딩, 기능 확장, 개발 리소스 확보를 고려하여 리팩토링을 결정했다.
리팩토링 범위 및 목표
- 리팩토링 범위를 기능 개편 페이지로 한정하고, 새로운 기술 스택 환경 구성을 목표로 설정했다.
- Typescript 도입으로 휴먼 에러 감소, React-query 도입으로 코드 간결성 및 효율적인 서버 데이터 관리, 함수형 컴포넌트 전환으로 직관적인 코드 스타일 개선을 기대했다.
리팩토링 결과
- ESLint를 활용하여 팀 내 프론트엔드 코드 컨벤션을 확립하고 import order Rule을 설정했다.
- 새로운 기술에 대한 팀원 간 토의와 탐구를 통해 이해도를 높이고 팀워크를 강화했다.
- Typescript 도입으로 컴파일 단계에서 에러를 사전 감지하고, React-query 도입으로 코드 가독성을 향상시켰다.