개요

• 깃허브 레포 링크
• 프로젝트는 팀프로젝트였지만 리팩토링은 공부 후에 개인적으로 작업한 내용으로, 배포 사이트에는 적용 되어 있지 않습니다. 작업 사항은 전부 로컬 환경에서 적용했습니다.
• 레거시 코드의 복잡함을 줄이고, 기존에 구현하기 어려웠던 부분의 업데이트를 진행했습니다.

기술 스택

• TypeScript
• React
• Redux-toolkit / React Query
• Styled-components
• Socket.io
• Prettier / ESLint

개발 업무

새로운 기술 스택 도입

• ESLint
  • 기존에는 prettier만 사용하여 코드 스타일을 관리했습니다. 리팩토링 하면서 ESLint를 도입하여 문법 오류를 사전에 발견하고 일관된 코드 스타일로 작성할수 있도록 했습니다.
• TypeScript
  • 기존에 자바스크립트로 작성된 코드를 타입스크립트로 변경하였습니다. 타입을 명시함으로써 컴파일 단계에서 에러를 먼저 잡아낼 수 있습니다.
• React Query
  • 서버 상태와 클라이언트 상태 관리를 나누고, 리액트 쿼리의 강력한 캐싱 기능이나 무한 스크롤 기능을 사용하기 위하여 도입했습니다. 서버 데이터는 더 fresh한 상태를 유지시키고 기존의 상태 관리 라이브러리는 클라이언트 데이터만 관리하면서 비교적 가벼워졌습니다.

컴포넌트를 더 잘게 나누기

• 기존의 하나의 파일에서 여러가지의 일을 하던 컴포넌트 들을 UI와 비즈니스 로직으로 분리하거나, 공통된 컴포넌트는 적극적으로 분리하여 재사용하면서 읽기 좋은 코드를 쓰기 위해 노력했습니다.

커스텀 훅 적극적으로 사용하기

• 재사용이 가능한 로직은 커스텀 훅으로 관리하여 중복 코드를 줄이고, 커스텀 훅 내에 로직을 추상화하여 인터페이스 컴포넌트의 코드 가독성을 높이기 위해서도 적극적으로 커스텀 훅을 도입하였습니다.