[VITE] VITE 에서 .env 변수 에러

Vite 빌드도구를 이용해서 react 프로젝트를 하고있다.

프로젝트 내용중에 공유하기가 있어서 작업하다 에러잡기가 생각보다 오래 걸려서 ㅠㅠㅠ

이것저것 찾아 보다 너무 간단하여 허탈하였지만....

생각보다 오려 걸려 다음에 이걸 보고 기억하기 위해서 적어본다.

 

 

 문제 

kakao key값을 은닉하기 위헤 Vite에서 .env를 사용하려는데 인식이 안되는 것 부터 오류가 났다.

 

 

 .env 파일 만들기 [예시 key] 

우선 루트 디렉토리에 .env 파일을 만든다.

// 예를 들어 사용할 key 값
REACT_APP_KEY = abcd1234 <= 예시사용
REACT_APP_KEY2 = abcd12342
REACT_APP_KEY3 = abcd12343

// 찾아보니, '', "", ; 이런거는 사용하지 않는다고 한다.

 

 

 

이렇게 사용하였다. 에러가 났다!!! 사용이 안되었다.

// 사용코드
kakao.init(process.env.REACT_APP_KEY)

 

 

 

 

 

 

 Vite .env 변수 에러 

에러가 많이 났다. 이유를 찾아보니

Vite에서는 [process.env]를 사용하지 않는다는 에러가 막 났다.

 

 

 

그래서 찾아보니.

Vite는 [import.meta.env]로 사용한다는것을 찾았다!

코드를 수정하고 실행을 하니 또 에러가 난다..

console.log로 key값을 찍어보니 undefind다..

값이 없다~ 에러는 계속 난다~  다시 찾아보자.

Kakao.init(import.meta.env.REACT_APP_KAKAO_SHARE_KEY);

 

 

 

 

 

 

 

 Vite .env 변수 해결 

블로그를 찾아보고, 외국사이트도 보고 챗GPT와 데이트를 하며 찾았지만 해결방안을 못찾아..

마지막으로 공식문서에서 찾아보았다. 해결은 여기서 났다(역시.. 공식문서인가..)

.env 파일이름을 VITE_ 시작하는걸로 바꾸면 끝이다!!

 

 

 

 

 해결코드 

// .env ==> 변수 접두사를 'VITE_'시작하기 
VITE_KAKAO_KET = a1234

// 사용하는 코드 ==> import.meta.env로 사용하기
Kakao.init(import.meta.env.VITE_KAKAO_KET);

 

 

 

 

 

 

[vite 공식문서]

https://ko.vitejs.dev/guide/env-and-mode