728x90
반응형
React를 npm 으로 커스텀 시켜서 만들었다면, webpack 설정에서 environment를 설정해서 사용이 가능하다. 물론 process.env.~ 를 활용하는 것은 아니고 webpack plugin을 활용하여 environment 변수 값을 설정해서 사용이 가능하다
React cli 경우엔 이야기가 다르다. 최상위 디렉토리에 .env 파일을 만들고 거기에 필요한 변수들을 설정해서 사용을 해야한다. 기본적으로 React는 react-script를 사용하기 때문에 설정할 때 prefix 가 필요하다. 지난번 포스팅했던 next.js에 변수를 설정하는 것처럼 React-cli로 React를 설정했다면...
# prefix
- REACT_APP_
- 위와같이 변수를 설정을 해야 읽을 수 있다.
- .env 파일에 prefix 가 없다면 env 설정 값에 적용이 안된다.
REACT_APP_~~~
//ex) REACT_APP_ENV=local
## package.json
- 기본적으로 React-cli는 자체에 설정되어있는 설정값들을 읽기 때문에 package.json 파일에 설정이 필요하다. 실행이 될때 어떤 .env 파일을 읽을 것인지 설정을 한다.
- 먼저 읽을 수 있도록 도와주는 라이브러리가 있다.
npm install dotenv-cli- dotenv-cli 라이브러리를 설치해서 먼저 읽을 수 있도록 설정을 한다.
- 아래 사진처럼 npm run start 할 때, 어떤 .env 파일을 읽지 결정을 해준다.
728x90
반응형
'Coding > React' 카테고리의 다른 글
| React - React cli webpack override 적용 (0) | 2022.02.27 |
|---|---|
| React - Missing semicolon(typescript-webpack) (0) | 2022.02.23 |
| React - regeneratorRuntime is not defined (0) | 2022.02.03 |
| React - React install (0) | 2022.02.02 |
