지난 프로젝트까지는 상대경로를 사용했더니, 단점이 있었다.
- import문이 지저분해진다.
- 파일의 위치를 파악하기 어렵다.
- 파일의 위치를 변경했을 때 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
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.