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

GY·2022년 1월 29일
0

리액트

목록 보기
44/54
post-thumbnail

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

  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

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글