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

const CracoAlias = require('craco-alias');

module.exports = {

plugins: [

{

plugin: CracoAlias,

options: {

source: 'tsconfig',

// baseUrl SHOULD be specified

// plugin does not take it from tsconfig

baseUrl: './src',

/* tsConfigPath should point to the file where "baseUrl" and "paths" are specified */

tsConfigPath: './tsconfig.paths.json',

},

},

],

};

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 CracoAlias from 'craco-alias';

export const plugins = [

{

plugin: CracoAlias,

options: {

source: 'tsconfig',

// baseUrl SHOULD be specified

// plugin does not take it from tsconfig

baseUrl: './src',

/* tsConfigPath should point to the file where "baseUrl" and "paths" are specified */

tsConfigPath: './tsconfig.paths.json',

},

},

];

위와 같이 import 방식으로 변경해주고 아래 라이브러리를 설치하던지

npm i --save-dev @types/craco-alias

root 디렉토리에 생성해둔 .eslintrc에

"ignorePatterns": ["node_modules/", "craco.config.js"],

ignorePatterns에 작성해서 오류를 해결할 수 있다.

2. tsconfig.paths.json 생성하기

{

"compilerOptions": {

"baseUrl": "./src",

"paths": {

"@assets/*": ["./assets/*"],

"@auth/*": ["./auth/*"],

"@components/*": ["./components/*"],

"@pages/*": ["./pages/*"],

"@reducers/*": ["./reducers/*"],

"@sagas/*": ["./sagas/*"],

"@store/*": ["./store/*"]

}

}

}

위에 방식은 폴더를 절대 경로로 접근하는 방식으로 작성한 것이다.

 @assets 키워드를 사용하면 assets 폴더 내부의 파일에 바로 접근이 가능하다.

폴더가 아닌 특정 파일에 접근할 수도 있다. 아래와 같이 작성하면 된다.

// 파일 설정 예시

"@app": ["./App.tsx"]

설정한 뒤 Can’t parse tsconfig.paths.json. 과 같은 에러가 발생한다면 tsconfig.paths.json 마지막 줄에 쉼표(,)를 작성했는지 확인해보자! 뒤에 추가적인 내용이 없는데 쉼표(,)를 작성하면 에러가 발생한다.

3. tsconfig.json 수정

{

"compilerOptions": {

... 셍략 ...

},

"include": [

"src",

"craco.config.js"

],

"extends": "./tsconfig.paths.json"

}

include와 exclude를 위와 같이 작성한다.

4. package.json 수정

"scripts": {

"start": "craco start",

"build": "craco build",

"test": "craco test",

"eject": "react-scripts eject"

},

위 4가지를 모두 수행하고 나면 아래와 같이 @components 라는 alias(별칭)를 가지고 바로 components 폴더에 접근이 가능하다.

import * as React from 'react';

import Banner from '@components/Banner';

import NavBar from '@components/NavBar/index';

function MainPage(): JSX.Element {

return (

<div>

<Banner />

<NavBar />

</div>

);

}

export default MainPage;