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

마조리카·2023년 4월 20일
0

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개의 댓글