깊은 곳에 있는 파일 경로의 절대경로 만들기 (feat. tsconfig.json)

위와 같이 깊게 들어가있는 폴더의 단축 경로를 tsconfig.json 에서 만들수있다.

// tsconfig.json

{
  "compilerOptions": {

    "baseUrl": "src",
    "paths": {

        "@foo" : ["nested/nested/nested/nested/nested/Foo"],

    }

}

이때 반드시 baseUrl 을 설정해줘야하는것을 잊지말자.

저 baseUrl 을 기준으로 출발하기때문이다.

 

위와 같이 tsconfig.json 파일을 작성하였다면..

import { foo } from './nested/nested/nested/nested/nested/Foo'

에서

import { foo } from '@foo'

로 작성할수있게된다.

'@' 는 꼭 붙이지않아도 되지만,  약간의 convention 으로써 (이 경로는 요약경로이다라는 것을 알리는..) 사용된다.

 

 

주의!!)

 

create-react-app 의 경우 tsconfig.json 을 위와같이 설정하면 아래와 같이 경고창이 뜨면서,

tsconfig.json 이 reset 된다.

Facebook 의 react github 에도 사람들이 불만을 토로하고있다.

https://github.com/facebook/create-react-app/issues/8909

 

해결책은...

 

npm 에서 제3자가 만든 react 플러그인을 설치하고 추가적인 설정을 해주어야한단다..,

cra 의 설정에 override 할수있다고한다.

짜증나게 왜 cra 에서 자체적으로 지원을 왜 안하는지 모르겠따..

 

https://www.npmjs.com/package/craco-alias#examples

craco-alias

 

이 부분에 대해 craco 를 사용하여 해결하는 방법을 서술하신 다른분의 블로그.

전체 글들을 꼼꼼히 읽어보면 도움이 된다.

https://velog.io/@shin6403/React-Typescript-절대경로-적용하기feat.React-CRA