[React] React 프로젝트 환경변수 설정

- 개요

안녕하세요. 이번 시간에는 개발 환경과 배포 환경에 대한 환경 변수 선언 방법에 대해 알아보겠습니다.

 

Node.js로 개발을 해보셨다면 어떤 느낌인지 팍 오실 거예요.

 

보통 Node.js에서는 모듈을 사용해 환경 변수를 설정하거나, package.json 파일에 명령어에 직접 선언하는 방식으로 사용하셨을 거예요.

 

React에서도 비슷한 방법으로 사용할 수 있습니다.

 

- 환경변수 선언

저는 .env 파일을 생성해서 환경변수를 선언하겠습니다.

 

기본적으로 리액트에서는 REACT_APP_ 을 반드시 붙여서 선언해야 됩니다.

 

• .env : 기본
• .env.local : test 환경 외에 모든 환경에서 로드할 때 사용
• .env.development : 개발환경 / npm run start & yarn start 명령어로 실행할 때 사용
• .env.test : 테스트 환경 / npm run test & yarn test 명령어로 실행할 때 사용
• .env.production : 배포 환경 / npm run build & yarn build 명령어로 실행할 때 사용

프로젝트 최상위에 .env 파일을 만들어 사용합니다.

 

.env 파일

그리고 해당 파일에 원하는 값을 설정하면 됩니다.

 

환경 설정 파일

위처럼 작성하면 원하는 값이 실행됩니다.

 

 

 

이번 시간에는 환경 변수를 선언하는 방법에 대해 알아봤습니다.

 

실습은 꼭 잊지 마세요. :)