프로젝트 리팩토링 계획 (feat.리쿠르탐)

작년 1년은 공부 없이 무작정 코드를 짰던 시기..
이제는 공부를 하면서 코드에 대해 고민을 하는 시간을 가지고 있다.

한동안 코드를 안짰지만, 다시 코드를 작성하면서 코드에 대해 더욱 깊이 고민해보고자 한다.

현재 내 코드의 문제점

• 왜 쓰는지 모르는 기술 스택
• typescript의 장점을 살리지 못한 문제
• 자주 반복이 일어나는 코드
• 수정하면 다른 코드에 영향을 끼치는 코드
• 명확하지 않은 변수와 함수명
• 사용이 올바르지 않은 폴더 명 속 파일

등 말고도 엄청 많은 문제가 있는 듯하다.

다시 내 코드를 봤을 때 수정하기 쉽도록 하는 것이 목표이다.

계획

1. 확장성에 초점을 맞춰

2. CRA -> Vite로

Vite는 esbuild와 브라우저 모듈을 이용한 프론트엔드 번들 도구입니다.

Q. 왜 Vite로 변경하는가?

React에서는 현재 cra를 권장하지 않는다.
그리고 CRA는 노드 모듈의 크기가 커서 빌드 속도가 느리고, SEO 측면에서도 좋지 않은 것으로 알려져 있다.

현재 리팩토링할 프로젝트의 경우 서버사이드 작업이 필요하지않기 때문에 Next.js로 수정은 하지 않고 빠른 개발 서버와 HMR(앱을 종료하지 않고 새로 갱신된 파일만을 교체하는 방식) 덕에 개발 시간을 단축시켜준다는 점에서 Vite로 마이그레이션 하고자했다.

3.구조적인 import 순서 유지하기

라이브러리
ㄴ React 관련 패키지
ㄴ 외부 라이브러리

컴포넌트
ㄴ 공통 컴포넌트
ㄴ 현재 컴포넌트 기준 상대적으로 먼 컴포넌트
ㄴ 현재 컴포넌트 기준 상대적으로 가까운 컴포넌트

함수, 변수 및 설정 파일
사진 등 미디어 파일
CSS 파일

4. 내가 hooks을 잘 사용했는가?

useState나 useEffect는 많이 사용했지만,
다른 훅들은 전혀 사용하지 않았다. 공식문서를 조금씩 읽어가면서 hook에 대해 이해도를 높여보자.

5. 스타일 가이드

• 인라인 스타일을 사용하지 않기
• 적절한 import 구조를 유지하기 (서드파티 import를 먼저 --> 내부에서 쓰는 import를 마지막으로)
• 커밋(commit) 전에 코드 형식 맞추기

6. 기능분할설계 (FSD)

Q. 나는 FSD를 왜 사용했는가?

이 프로젝트에서 FSD를 사용했지만, 왜 좋은지 깨닫지 못했다.
그렇다는 말은? 내가 잘 사용하지 못했다는 말이다.
조금 더 이해도를 높여 FSD를 사용하면서 왜 사용을 했고, 어떤 점에서 다른 구조의 차이점을 가지는 지 경험해 볼 것이다.

7. 단 한번이라도 제대로 된 테스트 코드를 짜보자.

테스트 코드가 지금 당장 내 프로젝트에서 필요하다고는 느끼지 못했다.
지금은 우선, 문제가 생기지 않는 코드를 짜기 보다는,
내가 지금 이 기능을 위해 어떤 것을 수행해야하며,
테스트를 한다면 어떤 문제가 발생할지 코드에 대한 고민을 조금 더 해보고자 계획에 포함시켰다.

그냥 단 한번이라도 테스트 코드를 짜보는 것. 그것을 통해 내가 어떤 깨달음을 얻을 수 있는지 그것이 내 목표이다.

8. lazy-loading / 코드 분리 시도해 보기

9. 재사용 가능한 로직을 커스텀 훅으로 분리하기

이것 말고도 지켜야 할 것은 많지만,
조금씩 다양한 고민을 통해서 리팩토링해보자.

참고자료

• 리팩토링
• 좋은 폴더 구조
• 린터
• 스타일 가이드