FrontEnd [REACT] .env 를 이용한 변수선언 및 사용법

[REACT] .env 를 이용한 변수선언 및 사용법

ENV란?

  • 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다.

.env 파일

외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다.

.env 파일은 프로젝트의 최상위 루트에 파일을 만들어놓는다.

변수명은 반드시 ‘REACT_APP­_‘으로 시작되어야한다.

create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시작되지 않는 환경변수는 무시한다.

사용방법은 아래와 같이 .env 파일을 생성하여 사용할수 있다.

.env사용하기

process.env.REACT_APP_는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다.

process.env는 실행시 로드되기 때문에 .env의 설정을 바꾸게 되면 React 프로젝트를 다시 구동해야된다.

Leave a Reply

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Related Post

[React] npx create-react-app 설치오류 “We no longer support global installation of Create React App”[React] npx create-react-app 설치오류 “We no longer support global installation of Create React App”

요새 도커로 개발하고 왠만한 개발환경들인 사전에 설치되어있어서 오랜만에 새프로젝트나 공부하려고 하다보니 설치오류가 종종발생한다 이처럼 버전문제가 항상 발생하는데 이때 발생하는 문제를 가볍게 해결할수 있는 방법을 몇가지 메모하고자한다. 방법 1. 12 npx clear-npx-cache