[240417 TIL] env 생각보다 어렵다ㅜㅜ

오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다.

 

바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 

html 마크업부터 하고, js, css 작성 및 연결하는 상황인데,

 

오늘의 문제는 env 사용시 마주친,

"process is not defined" 

 

였습니다... vite 혹은 react, next 프로젝트에서는 env사용시 클라이언트에서도

NEXT_PUBLIC 등을 붙여주면 접근이 가능했는데, 바닐라 환경(?)에서는 

계속해서 process 에 접근하지 못하는 문제가 있었습니다.

 

// 문제가 된 코드
const request = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${process.env.API_KEY}`
);

 

 

그래서 GPT쌤한테도 물어보고 이래저래 찾아본 결과 ! 
이런 바닐라??? 상황에서는 사용할 수 없다! 는 결론을 얻었습니다.

 

그 이유는,

 

process.env 는 Node.js 환경에서 환경 변수에 접근하는 방법이기 때문에,
브라우저는 process 객체를 지원하지 않기 때문이었습니다!

 

 

오늘의 교훈 : 당연하다고 생각했던 것을 의심하자.