[React.js] env 환경변수 사용하기/불러오기 ( Vite, CRA )

 

 

1. env를 사용해야만 하는 이유

env를 사용하지 않은 채, 배포가 되어있는 서버 url을 그대로 적어서 백과 통신하게 된다면, 서버에 직접접근이 매우 쉬워 아무나 서버로 요청을 날릴 수 있다.

 

그 말은 즉슨? 배포를 aws와 같은 클라우드를 통해 배포되었다면, 인생 망할 수 있다 ~ 라는 뜻이다.

 

프론트에서 보안적으로 서버 URL을 가릴 방법은 env를 사용하는 것이다.  

하지만 React에서 env환경을 사용할 때에는 Vite환경이나 CRA환경이냐에 따라 사용법이 미세하게 다르다.

 

Vite환경과 CRA환경의 env의 차이는  생성할 때에는 VITE_ 와   REACT_ 가 다르고, 불러올 때에는 import.meta와 process가 다르다.

팀 프로젝트를 진행하면서 Vite환경과 CRA환경을 왔다 갔다 하다 보니, 헷갈리는 경우가 많아 따로 정리하려 한다.

 

 

 

env를 사용하려면, 프로젝트 root폴더 밑에 .env파일을 생성하여 사용하면 된다.

 

.env 파일을 .gitignore에 등록하는 것을 반드시 잊지 말자!!!!!!!!!!!!!!!!
.env 파일을 .gitignore에 등록하는 것을 반드시 잊지 말자!!!!!!!!!!!!!!!!
.env 파일을 .gitignore에 등록하는 것을 반드시 잊지 말자!!!!!!!!!!!!!!!!
.env 파일을 .gitignore에 등록하는 것을 반드시 잊지 말자!!!!!!!!!!!!!!!!
.env 파일을 .gitignore에 등록하는 것을 반드시 잊지 말자!!!!!!!!!!!!!!!!
.env 파일을 .gitignore에 등록하는 것을 반드시 잊지 말자!!!!!!!!!!!!!!!!

 

 

 

 

 

 

2. Vite 환경에서 env사용

 

환경 변수 등록

.env파일에 환경변수를 등록하려면, 다음과 같이 .env파일에 작성해 주면 된다. 개수는 상관없다~

VITE_SERVER_URL="http://example.com"
VITE_MAP_ID="#########"

 

 

환경 변수 사용

사용하려면, 아래와 같이, meta.env를 통해 호출해 주어야 한다.

import.meta.env.VITE_MAP_ID

 

 

3. CRA 환경에서 env사용

 

환경 변수 등록

.env파일에 환경변수를 등록하려면, 다음과 같이 .env파일에 작성해 주면 된다. 개수는 상관없다~

REACT_APP_SERVER_URL="https://example.com"

 

 

환경 변수 사용

사용하려면, 아래와 같이, process.env를 통해 호출해 주어야 한다.

process.env.REACT_APP_SERVER_URL