절대 경로 사용

[cskime]

리팩터링의 목적이 무엇인가요?

• 현재 코드는 모듈을 import 할 때 상대 경로를 사용합니다.
• 상대 경로를 사용하면 폴더 구조에서 특정 모듈의 depth가 깊어질 때 ../ 코드가 길어져서 알아보기 어렵습니다.
• 특정 모듈의 경로는 언제든지 변경될 수 있으므로 상대 경로로 import 하면 수정 빈도가 높아집니다.
• 따라서, 특정 조건을 만족하는 모듈은 절대 경로로 import 하도록 수정합니다.

어떤 작업을 할 예정인가요?

• 현재 모듈의 근처에 위치하여 ./ 또는 ../로 접근할 가능성이 높다면 상대 경로 사용
  • src/features/rolling-paper/components/header 경로에서 rolling-paper-header.jsx 외에 나머지 4개 모듈은 같은 경로에 위치하여 rolling-paper-header.jsx에서 사용될 확률이 높습니다.
  • 이 경우, rolling-paper-header.jsx 내부에서 나머지 4개 모듈을 import 할 때는 상대 경로를 사용해도 경로가 깨질 가능성이 낮습니다. (e.g. ./rolling-paper-reactions.jsx)
• 그 외 관련성이 없는 모듈들은 절대 경로 사용
  • /src/assets과 같이 전역적으로 사용되며 그 경로가 바뀔 가능성이 낮은 파일들은 절대 경로가 유리합니다.

참고자료 (선택)

• React + TS 환경에서 path alias 설정하기
• Vite | resolve.alias