저번에는 프로젝트의 계기와 그 준비 과정에 대한 이야기를 적었다.
여기서는 1주차에서 기본 요소라고 생각한 페이지들을 구현하면서 배우거나 알게 된 점들을 적어보고자 한다.
Next.JS가 아닌 Vite로 진행하니까 구현할 때, 설정 면에서 차이점을 느끼기도 했고, 또 하다 보니까 Firebase나 styled-components 등 이미 익숙하다고 생각했던 것에도 고민하거나 헤멘 부분들이 나오기도 했다.
그 중에는 진짜 글자 하나 때문에 발생한 사소한 실수도 있었는데, 그런 것까지도 이번에는 잊지 말자고 생각해 이렇게 글로 남겨봤다.
Next.JS 등을 사용할 당시에 env 파일에 배치한 환경 변수를 불러올 때, 보통 process.env.(변수명)으로 불러왔던 기억이 있다.
Vite에서 환경 변수를 불러올 때는 그 형식이 좀 다르다는 걸 깨달았다.
VITE_라는 접두사를 붙이자.
Vite 내에서 사용할 환경 변수를 정의하고 싶다면, ‘VITE_’라는 접두사를 붙여야 한다.
(envPrifix를 통해서 접두사 규칙을 변경할 수 있는데, 그게 아니라면 저 접두사를 꼭 붙여주자.)
process.env.(변수명)이 아닌 import.meta.env.(변수명)이다.
Vite에서 환경 변수를 쓸 때는 위의 이미지처럼import.meta.env.(변수명)으로 불러와 써야한다.