CRA 안 쓰고 Webpack으로 구축한 React 프로젝트 환경변수 설정하기 ^^^^^^

이번에 Create React App으로 만들지 않고 직접 Webpack(내 기준 v5.54.0) 설정을 통해 만든 React 프로젝트의 환경변수를 설정하는 과정에서 참담한 경험을 해서 이렇게 글로 남긴다! 만약 이 글을 읽는 당신이 아래 중 하나 이상의 상황에 속해있다면 이 글을 꼭 읽고 환경변수 설정에 성공하기를 바란다^^

 

1. 당신의 React 프로젝트가 CRA(Create React App)로 만들어지지 않았을 때
2. 당신의 React 프로젝트가 Webpack 5버전 이상을 통해 구축됐을 때
3. dotenv 쓰라 해서 썼는데 에러가 발생할 때

 

그냥 문제에 대한 해결 방법을 알고 싶다면 스크롤 쭉 내려서 마지막 3줄 요약을 읽어주세요.

 

길고 긴 여정

일단 한국어로 React 환경변수 설정에 대해 구글링을 해보면 대부분 React로 만든 SPA의 대부분은 CRA로 만들어졌다고 가정하고 그냥 CRA에서만 통하는 환경변수 설정 방법밖에 나오질 않는다;; 물론 내 검색 능력이 별로인 걸 수도 있지만 진짜로 CRA 말고 Webpack으로 직접 구축한 프로젝트를 위한 글은 찾을 수가 없었다.. 일단 여기서 1차 멘붕.

 

 

그럼 이제 영어로 구글링을 해보게 되는데 다행히 CRA 외의 환경에서 환경변수 설정하는 방법이 나온다. dotenv라는 라이브러리를 통해서 환경변수를 설정하라는 건데 공식 레포지토리에서 하라는 대로 설정을 마쳐도 엄청난 에러들과 함께 제대로 애플리케이션이 빌드되지 않는 문제가 발생했다.

 

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in 'D:\My Folder\YAPP\node_modules\dotenv\lib'
 @ ./src/index.tsx 13:37-54

ERROR in ./node_modules/dotenv/lib/main.js 25:13-28
Module not found: Error: Can't resolve 'path' in 'D:\My Folder\YAPP\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
 @ ./src/index.tsx 13:37-54

ERROR in ./node_modules/dotenv/lib/main.js 26:11-24
Module not found: Error: Can't resolve 'os' in 'D:\My Folder\YAPP\node_modules\dotenv\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

진짜 계속 시도해보는데 안 됨

이제 이 문제를 해결해보기 위해 에러 로그를 구글링해보면 아래와 같은 몇 가지 해결책을 추천해 줄 것이다.

웹팩 설정에 아래 코드를 추가해 보세요^^

"browser": {
  "fs": false
},

저거 안 되면 이거 해보세요^^

node: {
   fs: "empty"
}

또 안됐으면 이거 하면 진짜 됩니다^^

const webpackConfig = {
  target: 'node'
};

된다고 한 사람 앞으로 나오시오

 

이렇게 짜증나는 시간만 보내고 있던 와중 다른 라이브러리를 소개해 주는 글을 만나게 되었다. 바로 dotenv-webpack이라는 라이브러리인데, 이 라이브러리의 description을 보자마자 느낌이 빡 왔다. 아, 이 친구가 내 문제를 해결해 주겠구나. 그리고 진짜 성공했다! 이 링크를 클릭해서 Usage 문단이 이끄는 대로 개발하면 바로 완벽하게 문제가 해결된다.

 

결론이 새로운 라이브러리를 사용하는 것으로 너무 싱겁게 끝났지만, 여기까지 도달하는 데 너무 스트레스를 받았다. CRA 안 쓰고 환경변수 설정하기 라고 검색해도 CRA 쓴 프로젝트에 대한 설명만 나오고, 심지어 구글 고급검색으로 CRA라는 단어를 제외하고 검색해도 답이 안 나왔기 때문이다. 그래서 다른 사람은 꼭 나 같은 고통의 시간을 보내지 말라고, 이런 글을 이 세상에 하나라도 더 만들어 본다..

 

잠깐, 근데 왜 저런 오류가 나왔던 거야?

사실 이렇게만 끝내면, 나는 오늘의 고생을 통해 얻는 것 별로 없이 허무하게 잠에 들게 된다. 이게 너무 억울해서 조금 더 이 문제에 대해서 근본 원인을 파악해보려고 한다. 애초에 왜 저런 오류가 나왔을 지 곰곰이 다시 에러 로그를 살펴봤다. 가만 보면 fs, path 등의 모듈이 없다고 알려주고 있다. 그리고 이 모듈들을 사용하기 위해서는 폴리필을 추가하라고 말하고 있다. 근데 fs, path 이거 어디서 많이 본 모듈들 아닌가? 그렇다, 이들은 모두 node.js 환경에서 제공되는 모듈들이다...

 

 

이쯤이면 감이 올텐데, 사실 dotenv 라이브러리는 fs 모듈과 path 모듈로 .env 파일을 읽어서 process.env 객체에 내가 지정한 환경변수 이름-실제 그 환경변수가 가리키는 값을 key-value의 형식으로 저장하는 라이브러리다. 그런데, node.js 환경에서 사용 가능한 모듈들은 npm을 통해 직접 접근이 가능한 경로에 한해 사용이 가능하기 때문에(src/ 하위 경로의 코드에 접근할 수 없다.) 저런 에러가 발생했던 것이다. 즉, 만약 당신이 위와 같은 에러 로그를 봤다면 분명 import dotenv from 'dotenv'를 src/ 하위 경로에 있는 파일에 작성했을 것이다!!

 

어찌됐든 이제 왜 이런 에러가 발생했었는지를 알게 됐다. 현재 시간 오전 3시 18분. 이 에러 발생 이유를 몰랐다면 내가 편하게 잠에 들 수 있었을까? 그건 잘 모르겠지만, 아무튼 문제를 해결하게 돼서 다행이다. 여러분은 꼭 이런 실수 하지 마세요~

 

 

 

3줄 요약(TL;DR)

1. dotenv-webpack 쓰세요.
2. 두번 쓰세요.
3. 세번 쓰세요.