프로젝트 절대 경로 설정하기 (feat. tsconfig.json)

프로젝트 작업을 할 때,

디렉토리 구조를 변경하면 상대경로를 다시 계산해서 작성하는 것이 귀찮아서,

그리고 가독성도 별로라고 생각해서

세팅 단계 때, 절대 경로를 설정하는 편이다.

(Next.js 같은 경우는 처음부터 npx create-next-app@latest을 실행하면 선택할 수 있게 해뒀다.)

(난 아무래도 초기 세팅은 Next.js가 제일 편한 것 같다)

 

바로 설정하는 방법으로 넘어가자.

JavaScript를 사용한다면 jsconfig.json로, TypeScript를 사용한다면 tsconfig.json로 들어가서 옵션 몇 개를 수정하려고 한다.

 

1. rootDir 

관련 공식문서 링크

• 모든 비선언 입력 파일(non-declaration input files)의 가장 긴 공통 경로.
  • declaration input files란?
    d.ts 확장자를 가진 파일 (타입 정의만을 포함하는 파일): 실제 구현 코드가 없고 타입 정보만 제공합니다
  • non-declaration input files란?
    실제 코드가 작성된 TypeScript 소스 파일 (.d.ts파일을 제외한 나머지 파일들)
• composite:true가 설정된 경우, 기본값은 대신 tsconfig.json 파일이 포함된 디렉터리로 설정.

// 해당 구조에서는 /core 가 rootDir 기본값이다.
MyProj
├── tsconfig.json
├── core
│   ├── a.ts
│   ├── b.ts
│   ├── sub
│   │   ├── c.ts
├── types.d.ts

 

2. baseUrl 

관련 공식문서 링크

• bare specifiers modules names을 해석할 기본 디렉터리를 설정
  • bare specifiers modules 란?
    경로 정보 없이 모듈 이름만으로 표현된 모듈 import

// 만약 baseUrl: ./ 이라면,
// tsconfig.json과 같은 폴더에서 시작되는 파일들을 찾는다.

project
├── ex.ts
├── hello
│   └── world.ts
└── tsconfig.json

import { helloWorld } from "hello/world";
console.log(helloWorld);

 

3. paths 

관련 공식문서 링크

• paths를 사용하면 TypeScript에게 require/import에서 모듈을 어떻게 해석해야 하는지 선언할 수 있다.
• baseUrl이 설정된 경우에는 해당 위치를 기준으로, 그렇지 않으면 tsconfig 파일 자체를 기준으로 import를 조회할 위치를 다시 매핑한다.

"compilerOptions":{
//...
"paths" : [
    {
     "app/*": ["./src/app/*"],
     "config/*": ["./src/app/_config/*"],
     "environment/*": ["./src/environments/*"],
     "shared/*": ["./src/app/_shared/*"],
     "helpers/*": ["./src/helpers/*"],
     "tests/*": ["./src/tests/*"]
    },
        ] 
}

 

 

---

참조

TypeScript공식문서

https://velog.io/@eunnbi/Effective-Typescript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%84%A4%EC%A0%95-tsconfig.json