[React] import 절대경로 설정하기

💡 리액트 프로젝트에서 import시, 더 이상 ../../../ 를 쓰지 않도록 src를 기준으로 경로 설정을 해보자!

목표

• import를 상대경로뿐만 아니라 절대경로로 설정할 수 있다.
• Craco를 통해 원하는 관심사의 경로 매핑과 커스터마이징 할 수 있다.

 

다들 상대경로 `../../../` 지옥에서 벗어나기 위해 왔을 것이라고 확신한다 : )

import문 작성 시 상대경로는 물론 절대경로도 인식 가능하게 하고, 개발의 편의를 위해 필요에 따라 관심사별로 미리 경로를 지정하여 커스터마이징하게 매핑할 수 있는 방법을 정리해본다. 특정 관심사란, components, containers, services, views 등이 있을 수 있다. 각각의 역할은 본인이 정한 것으로 하자.

 

절대경로 설정이 필요한 이유

상대경로는 유지보수 입장에서 번거로움 지옥에 빠지기 아주 쉽다.

import 배부른코더 from '../../components/react/배부른코더';

 

위 코드는 문제가 없어 보이지만, 패키지의 구조가 깊어질 경우를 생각해보자.

'../../../../../../../../../' 이것보다 더 깊은 뒤로 가기가 필요하다. 게다가, 현재 작업중인 스크립트 경로를 변경하게 된다면, 상대경로로 작성된 모든 import 문에서 난리가 나버린다. 이러한 이슈들은 import문 작성에 있어 절대경로로 작성하는 것이 유지보수 측면에서도 꼭 필요하다고 볼 수 있다.

 

상대경로의 문제점

1. import문 코드가 불필요하게 길어진다.
2. import문에 대한 유지보수 비용이 크다.

import 배부른코더 from '@components/react/배부른코더';

우리가 최종적으로 원하는 설정은 위와 같다.

깔끔한 경로를 설정하기 위해서 몇 가지 스탭을 거쳐보자.

 

절대경로 설정하기

① Craco

Craco(Create React App Configuration Override)는 Create-React-App(CRA)을 쉽게 설정하기 위해 만들어졌다.

root 폴더에 craco.config.js를 추가함으로 eslint, babel 등을 쉽게 설정할 수 있다.

 

② Craco 설치 및 설정

craco 설치

$ npm i -S @craco/craco 
$ npm i -S craco-alias
# or
$ yarn add @craco/craco
$ yarn add -D craco-alias

기존에는 npm i -D craco-alias 였던 것 같은데, -D옵션으로 설치하면 오류가 뜬다.

마음편하게 npm i -S craco-alias로 설치해주자.

craco.config.js 설정 파일 추가

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: './tsconfig.paths.json',
      },
    },
  ],
};

root 경로에 craco.config.js 설정 파일을 생성하고, 위와 같이 설정한다.

가장 기본적인 설정으로 추가적으로 필요한 부분은 CRACO GitHub를 참고하자.

경로를 커스터마이징하고 싶다면, React + Typescript 기준 tsconfig.paths.json도 만들어 줘야한다.

React만 사용해도 confing.paths.json으로 만들어주던지 이름은 크게 상관없다.

 

③ 커스터마이징 경로 설정

tsconfig.paths.json 설정 파일 추가

여기가 경로 설정의 꽃이다. 원하는 관심사별로 경로를 미리 지정할 수 있다.

경로의 맨 처음 @component라고 명시했을 때, 어떤 경로를 의미하는지 매핑시켜둘 수 있다.

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@containers/*": ["containers/*"],
      "@services/*": ["services/*"],
      "@layouts/*": ["containers/layouts/*"],
      "@views/*": ["containers/views/*"]
    }
  }
}

tsconfig.json 설정 추가

추가된 설정을 인식하기 위해 extends에 config.paths.json 경로를 지정한다.

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

 

④ Package.json

package.json 파일의 scripts 를 다음과 같이 react-scripts에서 craco로 수정이 필요하다.

craco가 프로젝트를 설정한 경로들로 오버라이드하여 컴파일 해준다.

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

 

Craco 주의사항

위와 같은 설정을 마치고, 상대경로를 모두 절대경로로 변경해보자.

// Layouts
import Dashboard from '@layouts/Dashboard';

// Login view
import Login from '@views/Login';
import Logout from '@views/Logout';

// Admin views
import Admin from '@views/Admin';
import User from '@views/Admin/User';

완전 깔끔하게 변경할 수 있음을 육안으로도 명확하게 알 수 있다.

하지만, 필자는 여기서 반나절을 날려버리는 오류가 발생했다.

 

esLint 설정

설정 및 경로를 모두 수정 후, npm start 명령어를 실행하면 프로젝트는 정상적으로 작동한다.

하지만, 경로 수정 과정에서 eslint가 미쳐날뛰게 되었다.

ESLint: Unable to resolve path to module '~components/index'.(import/no-unresolved)

위 오류 메시지가 출력되면 .eslintrc.js 설정을 추가하자.

settings: {
    'import/resolver': {
      typescript: {},
    },
  },
  ...
},

이래도 안 되면, VSCode를 재가동 하자!

나는 VSCode 재가동을 안 해서 초기화와 재설정을 반나절이나 반복했다!!!

 

 

 

3. 마무리

이 글을 읽는 사람들은 모두 한 번에 설정을 끝냈으면 좋겠다.

설정이 제일 어렵다 ㅠㅠ

 

 

 

Last Updated. 2021. 11. 04.