[React] .env 환경변수 사용법 (Vite / CRA 환경)

.env를 사용하는 이유

1. github 같은 오픈 리포지토리에 소스코드를 업로드할 경우, 오픈되면 안되는 정보들을 변수화하여 노출 없이 관리하기 위함

ex) `API Key`, `DB 정보`

2. 자주 사용되는 값을 전역 환경변수로 지정해두고, 유지보수를 용이하게 하기 위함

ex) Backend `API Uri` 혹은 `Port` 등

 

---

.env 파일 생성하기

어떤 프로젝트 파일이든, 처음 생성하면 `.env` 파일이 없는 경우가 많다.

그 경우 직접 만들어주면 된다!

⭐️.env 파일의 위치⭐️

`.env` 파일은 꼭 정해진 위치 -프로젝트 최상위 Root- 에 생성되어야 한다!

헷갈리면 `package.json`과 동일 선에 있다고 생각하믄 됨.

 

⭐️.env 파일 gitignore 처리⭐️

열심히 `.env` 파일 만들어놓고 gitignore처리를 하지 않으면, github에 또 노출되고 만다 ㅋㅎ...

`.gitignore` 파일에 들어가서, `.env`를 추가해주기!

이러면 `.env` 파일이 더이상 깃 히스토리에 트래킹 되지 않는다.

 

---

.env 변수 사용하기

변수 사용법은 프로젝트 빌더에 따라 차이가 있다. 이 글에서는 요즘 많이 쓰는 `Vite`, 그리고 정통 `CRA`기준으로 방법을 알아보겠다.

Vite 빌드 프로젝트

1. Vite 환경변수 만들기

• 규칙 : `VITE_` 로 시작해야 함

VITE_API_KEY=blahblah~

 

2. Vite 환경변수 사용하기

• 별도 import 필요 없고, 어디에서든  `import.meta.env.key이름`으로 불러올 수 있다.

import.meta.env.VITE_API_KEY

 

CRA (create-react-app) 빌드 프로젝트

1. CRA 환경변수 만들기

• 규칙 : `REACT_APP_` 으로 시작해야 함

REACT_APP_API_KEY=blahblah~

 

2. CRA 환경변수 사용하기

• 별도 import 필요 없고, 어디에서든 `process.env.key이름`으로 불러올 수 있다

process.env.REACT_APP_API_KEY

 

 

---

참고: https://shape-coding.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-env-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0