Vite 환경변수.. 오류.. 해결...

최근에 프로젝트 api 주소를 github에 올렸다가 서버비 폭탄 맞고 ncp에 구제 요청하는 상상을 해본 적이 있습니다. 그런 김에 해결책을 찾아보았는데요 마침 '환경변수'를 이용하는 방법을 찾았습니다.
 
 
 
 
 

왼쪽의 파일은 .env 파일이고, 이 파일을 gitignore에 입력하여 github에 올라가지 않게 합니다. 그리고 컴포넌트에서 오른쪽처럼 사용하면 특정 문자열을 숨길 수 있습니다.
 
지금까지 환경변수를 사용해본 적은 없지만, 다른 사람의 프로젝트를 참고해서 쉽게 사용해 봤습니다.
 
 
 
 
 

하지만 역시 인생은 쉽지 않습니다. 바로 process가 not defined 라네요.
 
어떻게 써봐도 안 돼서 문제점을 더 찾아보다가, vite에서는 환경변수 사용법이 다르다는 것을 알게 되었습니다. 위의 방법은 CRA에서 사용하는 방법이라고 합니다.
 
 
 
 
 
https://ko.vitejs.dev/guide/env-and-mode.html

Vite

Vite 공식 문서를 보면, 환경변수의 접두사는 VITE_로 사용해야 하며, import.meta.env 객체를 통해 환경 변수에 접근할 수 있다고 합니다. 바로 시도해 봅니다
 
 
 
 
 

두근
 
 
 
 
 

왜 안 되 는 거 야 이 렇 게 하 라 며
 
 
 
 
 

절망과 인고의 시간 속에서 해결책을 찾았습니다.
 
.env 파일은 package.json 파일과 동일하게 프로젝트의 최상단에 위치해야 한다고 합니다. 하지만 저는 src 폴더 안에 생성했네요 ㅎㅎ;
 
 
 
 
 

최상단으로 옮긴 이후에는 잘 출력되는 것을 확인할 수 있습니다.
 
이제 제가 api를 하드코딩 하지 않는 이상 ncp에 구제 요청 메일을 보낼 일이 없어지게 됐습니다. 감사합니다.