[VITE] [typescript] dotenv 설정

리액트를 배울 때 '타입스크립트에 대한 러닝커브가 있더라도, 생산성이 달라지므로 타입스크립트를 도입해줬으면 좋겠다.'라는 선생님의 말에 따라, CRA를 사용하지 않고 vite-reactts-eslint-prettier 템플릿을 사용해서 조금씩 만지작거리고 있었다. 파이어베이스를 설정해서 간단하게 프로젝트를 진행하고자 했는데, 이전에 파이어베이스 키를 코드에 그대로 박아놓은 뒤 커밋했다가 낭낭한 경고메시지를 받았던 게 생각났다. 아무튼 .env를 설치하고 파이어베이스를 설정하기 위한 값들을 세팅하는데... 어라? 뭐가 잘 안된다. 알고보니 .env파일을 참조하는 방식이 조금 달라서 그런 것이였다. 나중에 되면 까먹고 또 헤맬게 뻔하므로, 겸사겸사 VITE/typescript 환경에서 dotenv를 설정하는 방법을 정리해보기로 했다.

dotenv 설치와 값 설정

우선 npm 혹은 yarn을 사용하여 dotenv 패키지를 추가해준다. 무엇으로 추가해도 큰 차이는 없다.

npm install dotenv
yarn add dotenv

프로젝트 루트 디렉토리에 .env파일을 생성하고, 키-값을 입력해주자. 여기서 주의할 점은, 번들러에 따라 prefix가 붙는 경우가 있다는 점이다. 얘를 들어서 CRA를 사용하는 경우(업데이트가 되고 있지 않아서 CRA를 사용하는 것 자체가 권장되지는 않지만), REACT_APP_이라는 접두어를 붙여줘야한다. 마찬가지로 VITE를 사용할때는 VITE_라는 접두어를 붙여줘야한다.

이 내용은 VITE 문서 env&mode - env files 항목에 명시되어있다. 만약 크롬에서 VITE 문서 페이지 접속시 경고창이 뜨지 않는다면, thisisunsafe를 입력하자. (...)

TARGET_ADDRESS="127.0.0.1" //일반적인 키-값
REACT_APP_TARGET_ADDRESS="127.0.0.1" //CRA에서의 키-값
VITE_TARGET_ADDRESS="127.0.0.1" //VITE에서의 키-값

React에서 .env에 설정한 값을 참조해보자

require를 사용해서 .env를 참조하려면, 아래와 같이 config()를 호출해주면 된다.

require("dotenv").config();

나는 vite-reactts-eslint-prettier 템플릿을 사용했기 때문에 Eslint를 설정했는데, import/export와 require를 섞어쓰는게 썩 이쁘지도 않은 와중에 Eslint가 미친듯이 코드에 그어대서, 다음과 같이 import 구문을 사용하려고 했다.

import dotenv from 'dotenv';
dotenv.config();

'사용하려고 했다'로 문장이 끝나는 걸 보고 대충 눈치챘겠지만, VITE환경에서 dotenv.config()이 평가될 때 다음과 같은 에러가 발생한다.

Uncaught ReferenceError: process is not defined

이 에러구문을 구글링해보면 로드 순서의 문제로, 별도 파일로 작성해서 import하면 된다는 내용을 찾을 수 있다. 실제로는 VITE에서 process가 deprecated됐기 때문에 발생하는 에러이다. (자세한 내용은 Uncaught ReferenceError: process is not defined 이슈를 참조하도록 하자.) 하지만 정작 VITE 문서에서 dotenv.config()를 어떻게 실행해야하는지 방법을 찾지 못했는데, 그렇다면 이 문제는 어떻게 해결해야할까.

우연히 코드를 작성하다보니 dotenv.config()를 빼먹었는데, 코드가 잘 동작하고 있었다. 그렇다. 문서의 env&mode - env files 항목을 읽어보면 environment directory 설정에 따라 dotenv를 사용하여 추가적인 환경 변수를 로드할 수 있다고 되어있다. 결국 dotenv.config()를 사용하지 않아도 VITE가 알아서 .env파일에 정의해놓은 값들을 불러온다는 얘기다. 와, 편리해!

정리

이번에는 굉장히 간단한 환경 설정 얘기로, VITE를 사용할 때 .env파일에 값을 정의하고 코드 내에서 불러오는 방법을 정리해봤다. 프로젝트를 처음 시작할 때가 아니고서야 이런걸로 헤맬 일은 거의 없을 것 같지만, 아무튼 익숙해질 때까지 VITE를 사용해서 프로젝트를 시작할 때는 이 글부터 참조해야 할 것 같다. ' ㅈ';;;