.env 파일로 환경 변수 설정하기

 

💡

이번에 과제를 진행하면서 API 주소, API KEY와 중요 정보들도 다뤘는데

이때 이러한 값들이 노출되지 않게 하기 위해서는 어떻게 해야 되는지 정리해 봤다.

---

 

💻 프로젝트를 진행할 때 해당 프로젝트에서 사용되는 중요한 정보, KEY등과 같이 공개적으로 노출되면 안되는 값들이 있다. 이럴 때 따로 .env 파일을 만들어 그곳에 저장해서 사용할 수 있는 환경 변수를 설정해 줄 수 있다. 

 

1. 환경 변수란? 

프로젝트가 동작하는 환경 자체에다가 어떤 변수를 만들어서 데이터를 담아놓고 그 환경에서만 데이터를 활용할 수 있는 방법.

 

2. 환경 변수 설정하기

1) 루트 폴더에 .env 파일을 생성한다. 

 

2) .env 파일에 변수와 값을 입력해준다. 

REACT＿APP＿변수 이름 = 값

 

3) 중요한 정보를 담고 있는 파일에 가서 설정해 준 변수를 사용해 준다. 

const environment = {
  API_KEY : process.env.REACT＿APP＿변수이름
};

 

4) 깃허브에 배포할 때 올라가지 않게 .gitignore 파일에 추가해준다.

 

 

💡 이때, 나는 이렇게 설정을 하고 확인을 하려고 하니 환경 변수 설정을 해준 값들이 전달이 되지 않는 에러가 발생했다. 

🚨 ReferenceError: process is not defined

 

다시 찾아보니 내가 했던 설정은 Create React App 을 사용 했을 경우의 설정이었다. 나는 Vite로 프로젝트를 진행 했기 때문에 그에 맞게 다시 설정을 해주었다. 

 

.env 파일

VITE_변수 이름 = 값

 

변수 사용하기

const environment = {
  API_KEY : import.meta.env.VITE_변수이름
};

 

 

더 자세한 내용은 아래에서 확인할 수 있다. 

 

Vite

 

💡 Create React App / Vite 처럼 환경 변수를 설정하는 방법이 조금 씩 다르니 각자 사용하는 도구를 확인해서 설정해주는 것이 좋겠다.