👀create-react-app?
리액트로 웹 애플리케이션을 만들기 위한 환경을 빠르게 구축해주는 CLI
바벨(babel), 웹팩(webpack), 테스트 시스템(jest), HMR(hot-module-replacement), ES5+, CSS 후처리 등 필수적 개발환경을 한 번에 구축해줌
빌드 시점에 환경 변수를 코드로 전달할 수 있고, 개발 / 테스트 / 배포 환경별로 다른 값을 적용할 때 유용합니다.
NODE_ENV라는 환경 변수를 기본으로 제공하며, 직접 등록하는 것도 가능합니다.
환경 변수는 코드에서 process.env.{환경 변수 이름} 으로 접근할 수 있습니다.
// 환경변수 확인하기
console.log(`NODE_ENV = ${process.env.NODE_ENV}`);
환경 변수 설정하는 법
NODE_ENV 환경 변수 외에 다른 환경 변수는 REACT_APP_를 반드시 붙여야 합니다.
환경 변수는 셸(shell)에서 입력하거나 .env 파일을 이용해 입력할 수 있습니다.
셸(shell)에서 입력하기👇
.env 을 이용해 입력하기
- .env : 기본
- .env.local : test환경 외에 모든 환경에서 로드됨
- .env.development : 개발 환경 / npm start로 실행할 때
- .env.test : 테스트 환경 / npm test로 실행할 때
- .env.production : 배포 환경 / npm run build로 실행할 때
💥 .env.~ 파일은 프로젝트의 최상위 경로에 위치해야 함
💥 REACT_APP_을 반드시 붙여야 함
💥 환경변수를 설정한 뒤 restart해주어야 함
// .env.development 파일
REACT_APP_DATA_API=dev-api.myapp.com
REACT_APP_LOGIN_API=dev-auth.myapp.com
// .env.test 파일
REACT_APP_DATA_API=test-api.myapp.com
REACT_APP_LOGIN_API=test-auth.myapp.com
// .env.production 파일
REACT_APP_DATA_API=api.myapp.com
REACT_APP_LOGIN_API=auth.myapp.com
// 환경변수 출력해보기
console.log(`REACT_APP_DATA_API = ${process.env.REACT_APP_DATA_API}`);
console.log(`REACT_APP_LOGIN_API = ${process.env.REACT_APP_LOGIN_API}`);
<!-- index.html 파일에서 환경변수 사용하기 -->
<title>%REACT_APP_NODE_VERSION%</title>
'STUDY > React' 카테고리의 다른 글
React | Next.js 사용해보기 (1) - 생성 및 실행, navigation (0) | 2021.01.29 |
---|---|
React | SVG 사용 (0) | 2021.01.18 |
React | Hooks (0) | 2020.12.17 |
React | 이미지 여러 장 미리보기 (preview multiple images) (0) | 2020.12.03 |
React | react-facebook-login ( + 차단된 URI... 화이트리스트... ) (0) | 2020.12.01 |