react에서 dotenv 관련 에러

환경변수 사용을 위해 dotenv 설치

require("dotenv").config(); 호출시 위와 같은 에러 발생

희한하게 저번 팀 프로젝트에서는 저렇게 선언해도 문제가 되질 않았었는데, 이번 토이 프로젝트에서는 문제가 발생

에러 해독

fs 모듈이 없다, path 모듈이 없다, os 모듈이 없다

dotenv 작동 방식을 보면, os, path 모듈을 통해 .env 모듈을 찾고, fs 모듈로 .env 파일을 물리적으로 읽어들여 process.env에 키와 밸류 형식으로 담고있다

생각해 보면 os, path, fs 모듈은 node.js에서 기본제공하는 모듈이고, dotenv는 node.js의 기본 환경에서 실행되도록 만들어진 패키지이고, 무의존성 모듈이라고 할 수 있다

node.js는 react를 사용해 개발된 프로그램이 실행될 수 있는 런타임 환경을 제공 하는 것이지, react와 직접적인 관계가 있는 것은 아니다

node.js는 Webpack이 config 파일의 설정을 바탕으로 정적 파일들을 번들링하고, npm start로 개발용 서버를 올려 번들링된 파일을 실행할 수 있는 환경을 제공하는 자바스크립트 런타임 환경이다

즉, react 프로젝트의 자바스크립트 파일은 node.js 그 자체가 아니기 때문에 패키지가 필요하면 npm을 통해 설치를 하고 node-modules에서부터 import해서 의존적으로 사용해야 한다
때문에 src 하위 파일에는 dotenv만 설치했으므로, os, path, fs 모듈들을 찾을 수 없었던 것이다

하지만 react에서 이미 dotenv 패키지가 내장되어있어서 별도로 패키지 추가 Wobpack에 대한 설정없이 .env파일을 생성해서 변수를 선언하는 것만으로도 환경변수를 사용할 수 있다

주의
CRA가 내부적으로 REACT_APP_ 으로 시작하는 환경변수만 읽어들이도록 설정을 해두었기 때문에 변수명은 반드시 REACT_APP_ 으로 시작해야 한다