피드로 돌아가기
Dev.toFrontend
원문 읽기
Relative Path 제거를 통한 리팩토링 안정성 및 DX 최적화
⚡ Advanced Path Aliases in Vite — Stop Writing ../../ Forever
AI 요약
Context
프로젝트 규모 확장 및 폴더 계층 심화에 따른 Relative Path 의존성 증가로 인한 가독성 저하 발생. 파일 위치 변경 시 수동으로 모든 Import 경로를 수정해야 하는 구조적 취약점 및 유지보수 비용 상승 문제 직면.
Technical Solution
- Vite의 resolve.alias 설정을 통한 디렉토리 기반 절대 경로 매핑 구조 설계
- tsconfig.json의 compilerOptions.paths 설정을 활용한 TypeScript 정적 타입 분석 및 IDE 인텔리센스 동기화
- Node.js의 path.resolve 및 __dirname 활용으로 OS 독립적인 절대 경로 계산 방식 적용
- @components, @hooks 등 도메인별 Alias Prefix 정의를 통한 모듈 식별성 강화
- @types/node 설치를 통한 Node.js 내장 모듈 타입 정의 확보 및 빌드 에러 방지
- Vite 설정과 TypeScript 설정 간의 Mirroring 구조 유지를 통한 런타임-컴파일 타임 일관성 확보
실천 포인트
- vite.config.ts의 resolve.alias 설정과 tsconfig.json의 paths 설정 일치 여부 검토 - @types/node 설치를 통한 __dirname 타입 오류 해결 확인 - 폴더 계층이 3단계 이상 깊어지는 시점에 Alias 도입 검토 - vite-tsconfig-paths 플러그인 사용을 통한 중복 설정 제거 가능성 확인