[TIL] React Craco 파일 절대경로 설정/상대경로의 지옥에서 탈출하기

프로젝트의 규모가 작다면 별로 불편함을 느끼지 않겠지만, 프로젝트의 규모가 커지면서 파일의 상대경로 셋팅에 불편함을 느끼게 된다. 폴더 속에 폴더.. 폴더 속의 폴더 속의 파일 등등 이런식으로 끝도 없이 들어가는 경우가 발생하기에 아래와 같은 상황을 겪게 된다.

../../../pages/main/LandingTop
../../../pages/main/LandingMiddle
../../../pages/main/LandingBottom

이렇게 계속해서 ../을 쳐야하는 상황이 발생한다.
../../../../../ .......

 

우리가 프로젝트를 진행하다보면 pages라는 폴더만 있는 것이 아니기 때문에, assets, components, utils 등등 다양한 폴더와 파일의 경로가 생기게 되는데 이를 다 ../../../ 이렇게 쳐서 불러오기는 힘들 것 같다. 그래서 이러한 상대경로 지옥에서 벗어나기 위해 craco 라는 것을 사용해볼 수 있다.

폴더와 파일을 상대경로가 아닌 절대경로로 관리할 수 있도록 해놓은 것! -> Craco

craco를 사용하면 ../../의 지옥에서 벗어나 아래와 같이 import 해서 쓸 수 있다.

@절대경로/나머지 경로

 

1) 가장 먼저 Craco 를 사용하기 위해 모듈을 설치해주어야한다.

GitHub - dilanx/craco: Create React App Configuration Override, an easy and comprehensible configuration layer for Create React

 

npm을 사용한다면 아래와 같이,

npm install @craco/craco --save

yarn을 사용한다면 아래와 같이 입력하여 설치하면 된다.

yarn add craco-alias @craco/craco

 

2) 모듈을 설치했다면 package.json을 변경해주자

기존 package.json

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

 

변경 package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

 

3) craco.config.js 파일 설정

const path = require(‘path’);

module.exports = function() {
	return {
		webpack {
			alias: {
            			// 이런식으로 폴더의 절대경로를 설정해줄 수 있다.
				‘@pages‘: path.resolve(__dirname, ’src/pages‘),
				‘@components‘: path.resolve(__dirname, ’src/components‘),
				‘@assets‘: path.resolve(__dirname, ’src/assets‘),
			},
		},
	};
};

 

4) 각각의 컴포넌트에서 아래와 같이 사용

import LandingTop from '@pages/main/LandingTop';
import LandingMiddle from '@pages/main/LandingMiddle';
import LandingBottom from '@pages/main/LandingBottom';