import 시 복잡한 relative path 피하기 (feat. tsconfig.json)

위와 같이 폴더 구조가 되어있는경우를 가정해보자.

나는 parent.ts 안에 내용물을 deelChild.ts 에 import 하려고한다.

그러면 아래와 같이 작성이 된다.

이런일이 일어나지않을거라 생각하겠지만, 거대한 app 을 작성하다보면 폴더 계층 구조가 점점 nested 되게 되고,

위와 같이 ../../../../ 의 지옥에 빠지게된다.

이렇게 되는 이유는 import from 의 경로가 현재 자신의 위치를 기반으로 출발하기때문이다.

이때 tsconfig.json 을 수정하면

본인이 원하는 경로에서 import 의 시작점을 지정할수있다.

// tsconfig.json

{
  "compilerOptions": {
  
    "baseUrl": "src"
    
  }
  
}

위와 같이 tsconfig.json 파일안에, compilerOptions 안에 baseUrl 속성의 값으로 src 를 적으면

import 의 시작점이 폴더 자기자신이 아닌 src 에서 시작하게된다.

 

그럼 결과적으로,

import { parent } from 'parent/parent'

위와 같이 import 할수있다.