리팩토링 - 계획

목표

• 이 프로젝트에 관해서 아무것도 모르는 사람이 읽고서 이해하기 쉬운가
• 새로운 기능을 추가하거나 기존 기능을 제거하기 쉬운가
• 중복되는 코드를 최소화했는가
• 적절한 네이밍을 부여했는가

 

리팩토링 순서

 

폴더구조 정리 ➡️ 재사용 가능한 컴포넌트 분리 ➡️ 네이밍 ➡️ 인터페이스 정의 ➡️ 테스트코드 도입

 

---

매주 월요일 저녁 8시까지 스프린트 방식으로 메인 프로젝트 리팩토링을 하기로 했다. 멘토님에게 지적받은 부분과 우리가 생각하는 보완할 점을 개선하기 위함이다. path alias를 설정, eslint를 일부 추가하였다.

 

 

폴더의 depth 가 깊어질수록 경로가 복잡해지기 때문에 path alias를 사용하여, 프로젝트 파일들을 상대경로(../../)에서 절대경로로 전부 변경해 주었다.

 

/** tsconfig.json **/
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
}

 

import Tag from '@/components/mediaDetail/Tag';
import useMediaQuery from '@/hooks/useMediaQuery';
import Error from '@/pages/Error';