파트너스 레거시 코드 리팩토링 - 타입스크립트, 리액트쿼리를 도입하다

카카오헤어샵의 파트너스 서비스 웹사이트에서 레거시 코드 리팩토링을 진행한 경험을 공유합니다. 프로젝트 규모가 커지고 의존성이 복잡해지면서 발생할 수 있는 라이브러리 및 프레임워크 버전 관리의 어려움, 그리고 수정 시 예측 불가능한 에러 발생 가능성 때문에 리팩토링의 필요성을 인지했습니다.

특히, 리브랜딩 및 기능 확장을 앞두고 개발 리소스가 충분하다고 판단하여 리팩토링을 결정했습니다. 리팩토링 범위는 작업될 페이지로 한정했으며, Typescript, React-query, 함수형 컴포넌트 도입을 통해 휴먼 에러 감소, 서버 데이터 효율적 관리, 코드 가독성 및 직관성 개선을 목표로 했습니다.

이를 통해 팀 내 프론트 코드 컨벤션을 확립하고 ESLint 규칙을 정립하는 성과를 얻었습니다.