리액트 절대경로 설정 및 모듈/경로 별명 짓기 with CRA (absolute path, path alias)

왜 절대경로를 사용할까?

디렉토리 구조 sample

위와 같은 디렉토리 구조를 갖는 프로젝트가 있다고 해보자.

entry.js에서 target.js 을 import 해야 할 경우에 우리는 어떻게 경로를 작성해야 할까?

 

아마 다음과 같이 작성할 것이다.

import target from '../../../target';

 

상대 경로로 target.js를 찾다 보니 import 하는 path의 경로가 장황해졌다.

 

지금과 같이 간단한 예시에서는 별 문제가 아니라고 생각할 수도 있겠다.

하지만 프로젝트의 규모가 점점 커지고 디렉토리의 복잡도가 커질수록 import 의 경로를 찾는 게 점점 힘들어질 것이다.

 

---

 

심할 경우에는 다음과 같아질지도 모른다. 

import target from '../../SomeThing/../../SomePath/../../../../../target'

혹시나 여기서 상위 폴더를 삭제한다거나 디렉토리의 계층이 조금이라도 바뀐다면? 

에디터의 도움이 없다면 거북목으로 노트북을 바라보며 import 경로를 찾는데에 시간을 낭비하게 될 것이다.

 

 

자! 🥸
상대경로가 아니라 절대경로로 접근한다면 ?

 

시작 경로가 현재 디렉토리가 아니라 src에서 시작한다면 조금 더 찾기 수월하지 않을까?

import target from 'a/target';

위와 같은 경로가 보기에나 관리하기에나 상대경로로 접근하는 것보다 용이해 보인다. 

 

이러한 이점을 위해 절대경로를 사용하는 방식이 도입되었다!

 

---

CRA 에서 절대경로 사용하기

CRA 즉,  `create-react-app` 을 통해 부트스트랩 된 프로젝트라면 절대경로를 도입하기 굉장히 쉽다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

프로젝트의 루트 경로에 jsconfig.json 파일을 생성한 뒤 위의 내용을 입력해주면 끝난다.

 

---

CRA에서 path alias 사용하기

이번에는 경로에 별명을 붙여보자.

내가 자주 사용하는 경로가 있다면 축약형 혹은 별명을 지어 손쉽게 사용하면 좋으니까!

 

(절대경로를 사용할 경우) 위와 같은 디렉토리 구조에서 GreenButton의 index.js 를 import 하기 위해서는 다음과 같이 작성할 것이다.

import GreenButton from 'Components/Buttons/GreenButton';

이제 이 경로에 `@GreenButton` 이라는 별명(alias)을 붙여볼 것이다.

 

그러기 위해서는 CRA의 webpack 설정을 수정해야 한다. 

그러기 위해서는 (2) CRA 프로젝트에 eject 를 수행해야 한다.

CRA의 eject란 무엇일까?
링크 를 참조하자

만약 eject를 하지 않고 alias를 설정하고 싶다면?

CRA의 webpack 설정을 override 할 수 있는 기능을 제공하는 craco를 사용하자. 
이는 본 포스팅에서는 다루지 않겠다. 링크 를 참조하자.

---

eject 수행하기

yarn eject

위의 명령을 실행하면

 

CRA에서는 eject 없이도 많은 기능을 제공한답니다! 정말... 하시겠어요?

 

라고 물어본다. 과감하게 `y` 를 눌러주자.

 

자. 이제 두 가지의 작업을 통해 별명을 설정할 것이다.

1. webpack에게 별명을 이해시키기
2. 에디터에게 별명을 이해시키기

webpack에게 별명을 이해시켜보자

eject가 끝나면 프로젝트의 루트 경로에 config라는 폴더가 보이고 그 안에 webpack.config.js 라는 파일이 있을 것이다.

이 파일이 webpack의 설정이 담긴 파일이다.

 

파일을 열어 resolve / alias가 있는 위치를 찾아보자.

resolve: {
  // ... 
  alias: {
	// ...
	'@GreenButton': path.resolve(__dirname, '../src/Components/Buttons/GreenButton/'),
  },
}

위와 같이 작성하면 webpack이 별명을 이해할 수 있게 된다.

@GreenButton 을 실제 경로 path.resolve(__dirname, '../src/Components/Buttons/GreenButton/') 로 매핑시켜준다.

 

이젠 개발자와 webpack 모두 별명을 이해했다.

에디터에게만 별명을 이해시키면 된다. 그래야 자동완성 같이 에디터에서 제공하는 기능을 사용할 수 있다.

 

---

에디터에게 별명을 이해시켜보자

사실 하나도 어렵지 않다.

jsconfig.json 파일을 다음과 같이 수정해보자.

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@GreenButton/*": ["./src/Components/Buttons/GreenButton/*"]
    }
  },
  "includes": ["src"]
}

paths 속성을 추가해주고 위와 같은 형식으로 적어주면 된다.

다만 주의할 점은 원본 경로를 배열 형식으로 넘겨주어야 한다!

---

path alias를 사용하기 위한 준비가 끝났다.

훨씬 짧고 간단해진 경로를 통해 모듈을 import 해보자.

---

without CRA 프로젝트에서 path alias 사용하기

크게 다를 것은 없다.

위에서 한 것처럼 webpack.config.js와 jsconfig.json 파일에 path를 명시해주면 된다.

 

다음의 링크에서 path-alias가 적용된 React 개발환경 템플릿을 확인할 수 있다.

제가 만든 초라한 boilerplate입니다 😢

https://github.com/KimKwon/my-simple-react-boilerplate

GitHub - KimKwon/my-simple-react-boilerplate: React + webpack + babel + ESLint + prettier = my boilerplate 🥸

 

---

 

CRA 환경에서 절대경로를 설정하는 방법과 경로에 대해 별명을 설정하는 방법에 대해 작성해보았다.

무조건 알아야 하는 것은 아니지만 알아두면 좋으니 문서로 정리해본다.