CRA(create-react-app) + Typescript 절대경로 설정하기 (@ alias 사용)
프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 import 경로를 작성하는것이 어려워진다.
상대경로를 사용하여 특정 파일을 import 하게되면 아래와 같이 작성해야 한다.
ex)
../../../components/header/index.tsx
이러한 문제점을 절대경로를 사용하여 해결할 수 있다.
하지만 절대경로에도 문제가있는데 운영체제별로 절대경로가 (root 경로가)달라서 협업시 문제가 있을 수 있다.
윈도우면 C:\\Windows\System32\... 이런식이고
맥이면 /User/lsw/... 이런식이다.
하지만 위와 같은 방식으로 root부터 절대경로를 사용하지 않고 @ 키워드 즉 alias(별칭)를 사용해서 운영체제의 root 부터가 아닌 특정 폴더에 바로 접근할 수 있는 방법을 알아볼 것이다.
CRA(create-react-app) + Typescript에서 절대경로 설정
일단 절대경로를 사용하려면 tsconfig.json과 webpack 설정을 변경해야 한다.
하지만 CRA로 생성한 프로젝트는 기본적으로 webpack이 설정되어있어서 eject를 해서 webpack 설정을 직접 변경해줘야 하는데 권장되는 방법은 아니다. (버전 업데이트 등의 문제 발생)
그래서 CRA를 eject 하지않으면서도 webpack 설정을 바꾸어 줄 수 있는 라이브러리가 있다. 바로 Craco
1. Craco 설치
craco를 사용하면 CRA를 eject 하지 않아도 CRA에 설정되어있는 eslint, webpack, babel 등을 쉽게 커스터마이징할 수 있다.
두가지 라이브러리를 설치해야 한다.
npm i @craco/craco
npm i -D craco-alias
두 라이브러리를 설치하고 root 디렉토리에 craco.config.js 를 생성한다.
craco.config.js
options에는 더 많은 설정을 할 수 있는데 위에 세가지만 적용했다. options 설정 목록은 아래 참고!
Options 설정 목록
source: default 값은 options로, jsconfig, tsconfig 선택 가능
baseUrl: default 값은 ./로 root 폴더를 가리킴
aliases: alias 이름과 경로, default 값은 {}
tsConfigPath: 만약 source가 tsconfig이라면 해당 파일 이름 작성
debug: default 값은 false이며, 만약 버그가 생긴다면 해당 값을 true로 바꾸어 console로 내용 확인 가능
* 설정하면서 발생했던 에러 해결방법!
Require statement not part of import statement.eslint@typescript-eslint/no-var-requires
eslint 규칙때문에 발생한 에러이다.
위와 같이 import 방식으로 변경해주고 아래 라이브러리를 설치하던지
npm i --save-dev @types/craco-alias
root 디렉토리에 생성해둔 .eslintrc에
ignorePatterns에 작성해서 오류를 해결할 수 있다.
2. tsconfig.paths.json 생성하기
위에 방식은 폴더를 절대 경로로 접근하는 방식으로 작성한 것이다.
@assets 키워드를 사용하면 assets 폴더 내부의 파일에 바로 접근이 가능하다.
폴더가 아닌 특정 파일에 접근할 수도 있다. 아래와 같이 작성하면 된다.
설정한 뒤 Can’t parse tsconfig.paths.json. 과 같은 에러가 발생한다면 tsconfig.paths.json 마지막 줄에 쉼표(,)를 작성했는지 확인해보자! 뒤에 추가적인 내용이 없는데 쉼표(,)를 작성하면 에러가 발생한다.
3. tsconfig.json 수정
include와 exclude를 위와 같이 작성한다.
4. package.json 수정
위 4가지를 모두 수행하고 나면 아래와 같이 @components 라는 alias(별칭)를 가지고 바로 components 폴더에 접근이 가능하다.
댓글
댓글 쓰기