create-react-app으로 생성한 앱에서 절대 경로 사용하기

소스코드를 깔끔하게 유지하려면 절대 경로를 사용 할 수 밖에 없다.

절대 경로를 사용하려면 tsconfig.json과 webpack의 설정을 건들여야 한다.

단순하게 tsconfig.json의 paths 설정을 바꾸면 된다 생각했지만 React 실행시 강제적으로 paths 설정을 지워 버린다. (충격...)

 

React의 create-react-app으로 생성된 프로젝트는 내부적으로 webpack을 사용한다.

하지만 숨겨놨기 때문에 react 프로젝트를 eject ($ yarn eject) 하지 않는 이상 건드릴 수가 없다.

 

eject를 하면 해결 가능하나,

한번 eject를 하면 React의 버전업에 대한 자동으로 다른 구성요소 및 설정이 변경되는 장점을 잃어버리게 된다.

 

이를 해결하기 위해 나온 모듈이 react-app-rewired, craco이다.

둘다 사용 해 본 결과 craco를 사용하기로 결정했다. tsconfig의 paths 설정을 바로 사용하기 위해 craco-alias도 함께 설치 해 준다.

 

설치

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

 

사용법

package.json 파일을 수정한다. (react-script를 craco로 변경)

{
	...
	"scripts": {
		"start": "craco start",
		"build": "craco build",
		"test": "craco test",
		"eject": "react-scripts eject"
	},
    ...
}

 

tsconfig.paths.json 파일을 루트에 생성하고 paths 설정을 한다.

{
	"compilerOptions": {
		"baseUrl": "src",
		"paths": {
			"~/*": [
				"./*"
			],
			"@utils/*": [
				"utils/*"
			],
			"@res/*": [
				"res/*"
			],
			"@locales": [
				"locales"
			]
		}
	}
}

 

tsconfig.json 맨 윗 라인에 확장 옵션을 넣는다.

{
	"extends": "./tsconfig.paths.json",
    "compilerOptions": {
    },
    ...
}

 

craco.config.js 파일을 루트에 생성 후 webpack 설정을 변경하면 된다.

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

module.exports = {
	plugins: [
		{
			plugin: CracoAlias,
			options: {
				source: 'tsconfig',
				// as you know, CRA doesn't allow to modify tsconfig's compilerOptions
				// so you should create a separate JSON file and extend tsconfig.json from it
				// and then just specify its path here:
				tsConfigPath: 'tsconfig.paths.json',
			},
		},
	],
};

 

이제 다음과 같이 사용 할 수 있다!! WOW!

import { useAppSettings, getAppSettings } from '~/settings';
import { containAlphabet } from '@utils/string-util';
import { useLocalization } from '@locales';