CRA + typescript 절대 경로 셋팅

1. CRA와 타입스크립트로 프로젝트를 셋팅

npx create-react-app my-app --template typescript

다음과 같은 명령어로 만들 수 있다.

 

만일 이미 만들어 둔 프로젝트에 타입스크립트를 추가하는 것이라면

 

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

다음과 같은 명령어를 입력해주면 된다. 

 

그 후 절대 경로를 설정해주기 위해서는 세 가지 과정이 필요하다. 

1. craco 설정 

2. root 경로에 tsconfig.json파일 생성 및 설정

3. root 경로에 tsconfig.paths.json 파일 생성 및 설정

 

craco란 CRA로 만들어진 프로젝트를 쉽게 설정하기 위해 만들어진 라이브러리다. 

CRA에서 eject를 하지 않아도 root 폴더에 craco.config.js파일을 추가해서 eslint나 babel과 같은 셋팅을 쉽게 할 수 있다. 

craco는 라이브러리이기 때문에 패키지 매니저 yarn이나 npm을 통해 설치가 가능하다. 

yarn을 통해 설치하는 경우 

 

$ yarn add @craco/craco 
$ yarn add craco-alias -D

다음과 같은 명령어를 사용하면 되고 

root 경로에 craco.config.js파일을 생성한다. 

그 후 다음과 같은 내용을 적어주면 된다. plugin옵션에 baseURL을 ./src폴더를 주고 source를 tsconfig, tsconfigPath를 tsconfig.paths.json를 설정해주면 된다. 

 

2.

craco를 설정했으면 그 후 root경로에 tsconfig.json파일을 만든 후 다음과 같이 extends옵션에 tsconfig.path.json을 주고 include옵션에 craco.config.js 파일을 설정해주면 된다. 

 

3. tsconfig.paths.json

 

 

그 후 경로를 설정할 때 ./src폴더를 baseURL로 주고 자신이 원하는 표기법에 해당하는 경로를 넣어주면 절대 경로로 module들을 import할 수 있다. 

모듈들을 절대 경로로 import 한 모습

 

그 후 package.json 파일의 스크립트들을 수정해준다.