CRA , VITE 에서 .env 파일 사용하기

env 파일이란??

db 관련 데이터 , api key등 외부에 노출되면 안되는 값들을 관리하기 위하여 관련 변수들을 저장해두는 파일이다.

이때 dotenv패키지가 필요하다.

프로젝트의 최상위 루트에 파일을 만들게 된다.

 

CRA (Create React App) 에서의 환경 변수 사용법

cra 에서는 내부적으로 dotenv를 지원해 줌으로써, node js 환경처럼 설치를 따로 안해줘도 된다.

사용 방식은 

1. 프로젝트 루트 디렉토리에서 .env 파일을 생성.
2. .env 파일에 변수를 추가해준다. 예를 들어, REACT_APP_API_KEY=abcdefg와 같이 작성한다. 변수 이름은 REACT_APP_으로 시작해야 합니다.(필수!!!!!!)
3. 프로젝트에서 변수를 사용할 파일에서 process.env.REACT_APP_VARIABLE_NAME과 같이 작성하여 변수 값을 가져온다. 예를 들어, const apiKey = process.env.REACT_APP_API_KEY와 같이 작성한다.

변수 이름은 꼭 REACT_APP_ 으로 시작해야 CRA에서 인식이 가능하다!!!

Vite 에서의 환경 변수 사용법

CRA랑 똑같은 방식으로 사용하면 되는줄알고 좀 고생했다.....

비슷하지만 조금 다르다!!

1. 프로젝트 루트 디렉토리에서 .env 파일을 생성.
2. .env 파일에 변수를 추가해준다. 예를 들어, VITE_API_KEY=abcdefg와 같이 작성한다. 변수 이름은 VITE_으로 시작해야 합니다.(필수!!!!!!)
3. 프로젝트에서 변수를 사용할 파일에서import.meta.env.VARIABLE_NAME과 같이 작성하여 변수 값을 가져온다. 예를 들어, const apiKey = import.meta.env.VITE_API_KEY와 같이 작성한다.