티스토리 뷰
create-react-app(CRA)로 생성된 프로젝트는 env파일을 활용하여 전역 설정과 같은 환경변수를 사용할 수 있다. 배포 환경에 따른 타이틀, 화면이나, port, API 주소 정보들이 바뀌어야 할 때 유용하다.
env 파일 우선순위
NODE_ENV 환경변수는 script에 따라 자동으로 값이 지정되는데, npm start는 development, npm run build는 production, npm test test로 매핑된다. 이점을 활용하면 된다.
여기서 중요한 점이 있는데 env 파일에 대한 우선순위이다.
- npm start : .env.development.local, .env.development, .env.local, .env
- npm run build : .env.production.local, .env.production, .env.local, .env
- npm test : .env.test.local, .env.test, .env
각 스크립트에 따라 왼쪽 파일의 우선순위가 높다.
파일 생성
env 파일은 프로젝트 루트 폴더에 추가하면 된다.
변수명은 반드시 'REACT_APP_'으로 시작되어야 한다. 보안이 필요한 환경변수의 유출을 방지하기 위해 'REACT_APP_'으로 시작되지 않는 환경변수는 무시된다.
- .env.development
- .env.production
REACT_APP_SERVICE_PORT = 8080
각 환경에 맞게 값을 다르게 설정하면 아래와 같이 process.env 접근자를 통해 활용이 가능하다.
<!-- JSX -->
<div className="contents">
{process.env.REACT_APP_SERVICE_PORT}
</div>
// 상수
export const SERVICE_PORT = `${process.env.REACT_APP_SERVICE_PORT}`;
'프로그래밍 > Front end' 카테고리의 다른 글
[Front end] React noImage Component (0) | 2021.04.24 |
---|---|
[Front end] Firebase 문자 인증 (Firebase SMS authentication) (2) | 2021.04.21 |
[Front end] SNS 로그인 연동(네이버, 카카오) with React (1) | 2021.03.26 |
[Front end] 간단한 React 구동 Shell 스크립트 (0) | 2021.03.24 |
[Front end] React QuillEditor HTML mode custom (0) | 2021.02.19 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
링크
TAG
- Collection
- 프로그래머스
- 리액트 16
- effective java
- 정렬 알고리즘
- 제주도 여행
- Java
- 제주도 3박4일 일정
- Linux 명령어
- 개발환경
- 회고
- sort algorithm
- SQL
- 오라클
- Tomcat
- 이직
- 오라클 내장 함수
- Eclipse
- 자바스크립트
- 소프트웨어공학
- 성능분석
- 경력관리
- React
- spring
- 리눅스 명령어
- 자바
- 리액트
- 프로그래머
- Maven
- javascript
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함