[React] 리액트에서 절대경로 사용하기 (src)

지난 프로젝트까지는 상대경로를 사용했더니, 단점이 있었다.

1. import문이 지저분해진다.
2. 파일의 위치를 파악하기 어렵다.
3. 파일의 위치를 변경했을 때 import문을 수정하기 어렵다.

그래서 대체할 방법을 찾아보니, 절대경로를 사용하는 방법이 있었다.

1. jsonconfig.json

프로젝트 루트에 jsonconfig.json 파일을 만들고 아래 코드를 추가해준다.

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

그러나... 다른 문제가 있었다.

윈도우를 사용하는 팀원분의 노트북에서는 에러가 발생했다.

다른 방법을 찾아보자.

2. cross-env를 이용한 NODE_ENV 주입

🔸 cross-env

운영체제나 플랫폼에 종속되지 않고 동일한 방법으로 env 변수를 주입하는 방법

npm install --save-dev cross-env

🔸 사용법

사용할 명령어 앞에 cross-env [<key>=<value>, ...]를 붙여 작성해준다.

🔸 예시

{
  "scripts": {
    ...
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
    ...
  }
}

🔸 적용

우리 팀은 이렇게 했다.

  "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

NODE_PATH=src는 기본 경로를 src로 둔다는 뜻이다.

파일에서 import문을 이렇게 쓰면된다.

//src의 components하위의 파일을 import하려면
import file from 'components/atoms/file';

Reference

• https://imkh.dev/react-absolute-path/
• https://velog.io/@cckn/windows%EC%97%90%EC%84%9C-NODEENV%EB%A5%BC-%EB%B0%94%EA%BF%80-%EB%95%8C%EC%97%90%EB%8A%94-cross-env%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90