react에서 .env 접근방법 (CRA, Vite)

마조리카·2023년 4월 20일

vite프로젝트에서 env사용 방법
firebase key값들을 .env에 넣어서 쓰고자 했지만
인터넷에서 나오는 REACTAPP 네이밍 방법이 적용되지 않아서 곤란했다.
결과적으로 CRA를 통해 만든 프로젝트는 REACTAPP
Vite를 통해 만든 프로젝트는 VITE_ 네이밍을 사용해야 한다.

에러메세지 :
Uncaught ReferenceError: process is not defined at firebase.js

- Create-React-App 환경변수 사용법
1. 디렉토리에 .env파일 생성
2. 변수명 REACT_APP_로 시작하는 변수생성
3. 따옴표로 감싸거나 띄어쓰기를 주지 않는다
   
   REACT_APP_TEST_DATA = abcd 

사용시 process.env.변수명으로 호출
  process.env.REACT_APP_TEST_DATA
  
  
- vite에서 환경변수 사용법
1. 디렉토리에 .env파일 생성
2. 변수명 VITE_로 시작하는 변수생성
3. 따옴표를 감싸도 괜찮음
  
  VITE_TEST_DATA = "abcd"

사용시 import.meta.env.변수명으로 호출
  import.meta.env.VITE_TEST_DATA

0개의 댓글