프로젝트 리팩토링 계획
React와 TypeScript를 활용한 [혼자옵서예: 1인 제주도 여행 일정공유 플랫폼 프로젝트]가 마무리 되었다. 생각보다 구현해야 할 기능이 많아, 에러와 버그를 파악하고 잘 작동하게 만드는 것만으로 시간이 훌쩍 가버렸다. 이에 따라 임기응변으로 수정하거나 방치한 코드가 정말 많다. 따라서 프로젝트를 복기하며 정리하는 시간을 갖기 전에 반드시 리팩토링을 하고 싶은 부분을 기록해두려고 한다.
AS IS
‘기획 의도에 어긋난 부분 없이, 잘 작동하게 만들 것’을 1차 목표 잡았기 때문에 코드가 깔끔하지 않고 얼기설기 꿰어낸 곳이 존재한다. 또한, 불필요하게 상태를 관리하고 있거나 hook에 대한 이해 없이 useEffect, useCallback, useMemo 등을 사용했기 때문에 불필요한 로직이 많다.
TO BE
코치님의 코드리뷰와 개인적으로 아쉬웠던 점을 토대로, 다음과 같은 리팩토링 계획을 설정했다.
1. 커스텀 훅으로 상태관리 하기
오피스 아워에서 코치님을 통해 알게 된 방법이다. 부모 컴포넌트에서 총괄적으로 상태를 관리하고, 이를 자식에게 props로 전달함으로써 여러 파일에 흩어져 있는 코드의 응집성을 높일 수 있고 유지보수에 용이하도록 리팩토링할 수 있다.
2. API 연결 코드를 부모 컴포넌트로 통합하기
1번과 유사한 내용이다. 현재의 코드에서는 useCallback으로 API 함수에서 데이터를 받아오는 비동기 코드를 정의하고, useEffect로 이 코드를 실행하고 있다. 하지만 이 방식은 코드의 영향범위를 파악하기 어려운 단점이 있다. 이에 따라, 모든 API 관련 비동기 함수를 부모 컴포넌트에서 호출하고, 그 데이터를 props로 전달하는 방식으로 수정해볼 예정이다.
3. 컴포넌트 관심사 분리하기
현재 코드는 파일을 새롭게 작성하고 import해오는게 번거롭다는 이유로 컴포넌트 내부에 유틸함수가 작성되어 있다. 이는 프로젝트 기간에도 인지하고 있었던 부분이며, 리팩토링할 때 별도의 디렉터리를 생성하여 별도로 관리할 예정이다.
이 외에도 컴포넌트 내부에서 분리할 수 있는 로직은 최대한 분리해보면서 나만의 세분화 기준을 정립하고 싶다.
4. Suspense로 로딩 처리하기
로딩 처리는 프로젝트 기간동안 계속 마주쳤던 난제다. 내가 맡은 목적지 리스트 페이지는 백엔드와 통신하는 API가 10개에 달했고 하나의 컴포넌트에 2개 이상의 비동기 함수를 사용하는 경우가 많았다. 따라서 모든 데이터를 받아와 페이지에 한 번에 보여주는 방법에 대한 고민이 있었다. 특히 페이지에 처음 접속했을 때 1초 미만의 시간동안 state의 undefined, null과 같은 initial Value가 순간적으로 렌더링되는 문제가 있어, 이를 해결하기 위해 조건문을 걸기도 했다.
당시에는 데이터가 undefined나 null인 경우에 아예 렌더링 되지 않도록 처리했었다. 그러나 이번 리팩토링에서는 로딩 처리를 목적으로 React에 새롭게 추가된 Suspense 기능을 이용해 볼 생각이다.
5. 테스트 코드 작성해보기
내 개인적인 욕심으로는 테스트 코드도 작성해보고 싶다! 엘리스에서 교육과정 거의 막바지에 맛보기 수준으로 들은 강의가 전부이지만, 현업에서 App 출시 전에 테스트 코드를 작성하고 시험하는건 당연한 과정일 것이다. 앞선 계획만으로도 오랜시간이 걸리겠지만 테스트 코드에도 도전해보고 싶다.
그 외 개선사항은 코드를 복기하며 추가할 예정이다.
+ (6.26) 5번 계획 추가