[.env] 민감한거 숨기기 #React + Vite

💡 .env

`.env` 파일은 환경 변수를 설정하기 위해 사용된다. 쉽게 말해 프로젝트 전역에서 참조할 수 있는 값들을 모아놓은 파일이라고 생각하면 된다. 여러가지 목적이 있겠지만 가장 큰 2가지 이유는 다음과 같다. 

 

1. 민감한 데이터를 보관한다.

• 작업자이외의 사람들은 `.env`의 값들을 확인할 수 없다. (`.gitignore`필수 설정)

 

2. 프로젝트 환경에 맞게 데이터 설정 가능

• 개발환경, 로컬환경, 테스트, 배포.. 등의 환경마다 값을 다르게 사용할 수 있게 된다.

예를 들어 개발 환경에서는 어떤 데이터들을 불러올 때 더미데이터를 불러오는 api를 사용하고, 배포할 때는 실제 데이터의 api를 사용한다고 가정. 원래라면 api 주소값을 할당한 모든 부분을 수정해야 하지만 `.env`를 잘 사용하면 환경 만 변경해주면 알아서 잘 변경된다는 의미이다.

---

1. dotenv 패키치 설치

yarn add dotenv

 

2. .env 파일 생성

프로젝트 루트 경로에 `.env` 파일을 생성한다.

 

 

2-1) .env 작성 예제

VITE_Google_Client_ID="123"
VITE_Naver_Client_ID="456"
VITE_Kakao_Client_ID="789"
VITE_Server_IP="http://127.0.0.1:8080"
VITE_API_KEY="abc"

• 변수명은 필수적으로 `VITE_` 로 시작한다. (Create React App은 ` REACT_APP_ `로 시작한다.)
• 값에 공백이 있다면 따옴표를 사용한다. (공백이 없다면 생략가능)
• 변수명과 값 사이에는 공백이 없도록한다.
  • ex) `VITE_API_KEY = "abc"` X
  • ex) `VITE_API_KEY="abc"` O

 

 

2-2) 컴포넌트에서 사용 예제

/* 기타 코드 생략 */
const apiKey = import.meta.env.VITE_API_KEY;

이게 끝

 

 

🚨 주의

• 변수명과 값 사이에는 공백이 없도록한다.
• 변수명은 무조건 `VITE_` 로 시작한다.
• `.env`파일은 `.gitignore`에 추가하도록 하자. (보안)