프로젝트 리팩토링을 한다고요? 제가요?

프로젝트가 끝난지 4개월이 지나고 나서 한 친구가 단톡에 리팩토링을 할 생각이 있는지 물었다.

다들 리팩토링에 대한 갈증이 있었는지 다들 동의를 했고, 그렇게 리팩토링을 시작하게 되었다.

1. 내가 리팩토링을 하려는 이유와 목표

1.1. 이유

프로젝트가 끝난 직후에 작성한 회고다.
짧은 시간 안에 필요한 기능을 구현해야 했고, 당시에 React와 TypeScript, recoil을 모두 처음 사용하는 상황이라서 개발 속도가 느렸다.
따라서 중복되는 코드가 많고, 모듈화를 담당하였음에도 모듈화의 장점을 살리지 못한 코드를 작성하였다.

프로젝트 당시의 코드를 보면 목으로 날아가는 새를 구현한 그 자체였다.

1.2. 목표

따라서 이번 리팩토링에서 나의 목표는 다음과 같다.

code 개선

• 불필요한 코드 삭제하기
• 복잡한 폴더 구조 개선하여 직관적으로 수정하기
• 모듈화의 장점 살려 재사용성 높이기
• recoil 사용해야 할 부분에만 사용하기
• TypeScript를 사용한 만큼 type을 구체적으로 작성하기

그 외

• 리팩토링 과정을 velog에 기록하기
• 코어타임 정해서 정해진 시간에만 몰입하기
• GitHub issue, project, wiki 이용하기

2. 리팩토링 계획

2.1. 대략적인 팀 일정

• 8월까지 리팩토링 끝나고, 9월에는 추가기능 구현하기

2.2. 리팩토링 할 부분

프로젝트에서 내가 맡은 부분은 다음과 같다.

• 모듈화: button, dropdown, slider, card, accordion

• 페이지

  • 취향설문 페이지
  • 여행지 목록 페이지(추천 여행지 목록, 전체 여행지 목록)

• 기능

  • lazy loading
  • filtering
  • api 통신

내가 리팩토링할 부분은 다음과 같다.

• any 타입으로 지정된 것 모두 맞는 타입으로 수정하기
• 모듈화 코드 수정
  • Button, DetailBtn, accordion 내 Button 파일과 같이 중복되는 파일 합치기
  • 모듈화한 코드는 common에 모아두기
  • slider 라이브러리 사용하지 않고 구현하기
• 파일 분리
  • type 코드는 types 폴더에
  • recoil 폴더에 recoil 코드만 넣기
  • api 폴더 따로 파서 async 코드는 여기에 기능별로 파일 따로 작성하기(기존에 한 파일에 있어서 가독성 좋지 x)
• survey 폴더 내 복잡한 폴더 구조 수정
  • 모듈화된 요소 사용하면 파일 수 줄이기 가능
• button 선택 및 다중선택 프로세스 수정

(작성 중)