dotenv 오류

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Desktop\JS-project\react-movie-app\movie\node_modules\dotenv\lib'
 @ ./src/routes/Home.js 10:0-28 12:0-13
 @ ./src/App.js 6:0-36 72:41-45
 @ ./src/index.js 7:0-24 13:35-38

ERROR in ./node_modules/dotenv/lib/main.js 3:13-28
Module not found: Error: Can't resolve 'path' in 'C:\Users\user\Desktop\JS-project\react-movie-app\movie\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/routes/Home.js 10:0-28 12:0-13
 @ ./src/App.js 6:0-36 72:41-45
 @ ./src/index.js 7:0-24 13:35-38

ERROR in ./node_modules/dotenv/lib/main.js 5:11-24
Module not found: Error: Can't resolve 'os' in 'C:\Users\user\Desktop\JS-project\react-movie-app\movie\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:
Compiled with warnings.

문제

github 업로드할 때 API KEY를 숨기고 올려야한다고 해서 구글링 하였고, 해당 코드를 입력하였는데 위와 같은 오류가 발생함…

이유

찾아보니 Create-react-app 으로 생성된 react앱에는 기본적으로 dot env가 내장되어 있어, 하단의 코드 사용없이 바로 사용이 가능해서 오류가 발생했었음

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

참고 블로그