CRA에서 dotenv 설정 할 때 생긴 오류 해결

CRA 에서 dotenv를 설정하기 위해 dotenv 패키지를 설치하고, .env 파일을 생성해서 

api_key를 입력한 다음, 실행하려고 브라우저를 켜보니 아래와 같은 에러가 발생했다. 

 

 Compiled with problems:X
 
 ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
 
 Module not found: Error: Can't resolve 'fs' in '/Users/yubyeong-gug/Desktop/product_server_admin_client/product_server_admin_client/node_modules/dotenv/lib'
 
 
 ERROR in ./node_modules/dotenv/lib/main.js 26:13-28
 
 Module not found: Error: Can't resolve 'path' in '/Users/yubyeong-gug/Desktop/product_server_admin_client/product_server_admin_client/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 }
 
 
 ERROR in ./node_modules/dotenv/lib/main.js 28:11-24
 
 Module not found: Error: Can't resolve 'os' in '/Users/yubyeong-gug/Desktop/product_server_admin_client/product_server_admin_client/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 }

 

해결 방법은 생각보다 간단했다. 

 

CRA (create-react-app)는 기본적으로 dotenv가 설치되어있다.

따라서 .env를 작성해주기만 하면 된다. 

( index.js 파일의 상단에 아래와 같이 import를 해줄 필요가 없다. )

 

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

 

 

추가로 

 

리액트에서 .env파일을 작성하는 방법 

리액트에서는 .env 파일에 필요한 정보들을 작성하는 방법은 아래의 형식처럼 해준다. 

 

 REACT_APP_KEYNAME=value
 

외부에 공개해서는 안되는  값(또는 토큰)을 사용하기 위해 .env라는 파일을 만들어 관리해준다.

(특히 깃헙에 소스를 관리하는 상황에서 데이터베이스 비밀키, API 키를 관리할 때 유용하다.) 

 

(env에 관리할 값 지정하기)

KEY 부분을 작성할 때, 앞에 REACT_APP_ 를 붙여주고 대문자로 작성해준다. (값은 그대로 작성해준다.)

 

(env에 지정한 값 사용하기)

사용할 때에는 process.env.REACT_APP_KEYNAME 형태로 작성해주면 된다. 

 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
   authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
   projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
   storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
   appId: process.env.REACT_APP_FIREBASE_MESSAGING_APP_ID,
 };

(firebase 예제중)

 

 

끝.