[ React ] React의 env파일

exceed_96·2024년 2월 27일

목록 보기

9/18

프로젝트를 하다보면 외부에 노출하지 맗아야 하는 변수들을 다뤄야 할 때가 있다. 예를 들면 토큰, 외부 서비스 URL, API 키, 데이터 베이스 연결 정보, 보안 키, 서버 구성 정보 등등 이러한 정보들은 외부로 공개될 시 굉장한 곤욕을 치를 상황이 발생할 것이다. 이를 위해 env파일에 해당 값들을 정의하고 사용하는 방법을 알아보자.

1. .env파일이란?

.env 파일은 환경 변수를 설정하는 데 사용되는 파일이다. 주로 웹 애플리케이션 또는 서비스에서 사용되며, 환경 변수를 설정하여 애플리케이션의 동작을 제어하거나 구성할 때 유용하다.

2. .env파일의 구성

.env파일은 텍스트 파일이며, 각 줄은 하나의 환경변수를 정의하는데 사용된다.

일반적으로 KEY=VALUE형식으로 되어 있다.

KEY_1=hello
KEY_2=password

위 예시에서 "KEY_1", "KEY_2"는 환경변수의 이름이고 해당 이름은 코드상에서 해당 값을 불러올 때 사용된다.

3. React에서의 .env파일

.env파일은 생성한 React프로젝트의 루트 경로에 위치해야 한다.

REACT_APP_KEY_1=hello
REACT_APP_KEY_2=password

키(KEY) 정의

환경변수의 키 맨 앞에 REACT_APP_을 꼭 붙여줘야 한다.

영문 표기법은 소문자 대문자 상관없지만 관례적으로는 대문자로 작성하는 것이 일반적이다.

값(VALUE) 정의

값을 정의할때는 홀'', 쌍 따옴표""로 감싸주면 undefined로 인식하기 때문에 감싸주면 안된다.

값의 맨 끝에 세미클론 ;을 붙이지 않는다.

환경 변수 정의를 끝냈다면 React서버를 재시작 해줘야 한다.

4. 정의한 env파일 사용하기

.env파일에 정의된 환경변수들을 쓰고 싶을때는 모듈을 따로 import할 필요가 없다.

const envKey = process.env.REACT_APP_ENVKEY

위와같이 사용할 환경변수 값을 process.env.뒤에 정의하여 코드상의 변수에 초기화 하여 사용이 가능해진다.

5. 주의 할 점

.env파일은 외부에 노출되어서는 안 될 파일이여서 Git에 push할 때 올라가면 안된다!!!!!!!

실제로 .env파일이 Git에 올라가서 서버가 털리는 경우도 종종 있다.

이를 위해선 Git같은 경우, .gitignore에 .env파일을 포함시켜서 노출되지 않도록 주의해야 한다.

npx create-react-app을 통해서 React프로젝트를 생성했다면 아래 설정은 이미 정의되어 있겠지만 정의되어 있지 않다면 꼭 설정해줘야 한다.

.env
.env.local             //로컬 환경에서 사용되는 환경변수 설정 파일
.env.development.local //개발 환경에서 사용되는 로컬 환경 변수 설정 파일
.env.test.local        //테스트 환경에서 사용되는 로컬 환경 변수 설정 파일
.env.production.local  //프로덕션 환경에서 사용되는 로컬 환경 변수 설정 파일