타입스크립트 tsconfig 경로

baseUrl 

절대경로를 기준으로 하는 기본 디렉터리 지정

{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

// 상대 경로 사용
import MyComponent from '../../../components/MyComponent';

// 절대 경로 사용
import MyComponent from '@components/MyComponent';

• 가독성 향상 : 긴 상대 경로 대신 짧고 명확한 경로 사용
• 경로 관리 용이 : 프로젝트 구조가 변경되더라도 baseUrl 설정만 변경하면 되므로 유지보수 용이

paths 옵션 

파일 내에서 특정 모듈 경로를 별칭으로 설정할 수 있는 옵션

• 긴 상대 결로를 사용하지 않고도 모듈을 쉽게 import 할 수 있다. 
• 코드의 가독성과 유지보수성 향상
• 명확성 : 모듈의 위치가 명확해져 프로젝트의 구조를 쉽게 파악

{
  "compilerOptions": {
    "baseUrl": "src", // 기본 경로 설정
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@styles/*": ["styles/*"]
    },
    // 기타 설정들...
  },
  "include": ["src"]
}

// 상대 경로 사용
import MyComponent from '../../../components/MyComponent';

// 절대 경로와 paths 옵션 사용
import MyComponent from '@components/MyComponent';

 

 

 

참고

타입스크립트의 경로 맵핑 (baseUrl, paths)