[REACT] dotenv로 비밀 키 숨기기

dotenv는 API 키를 사용하거나 할 때 깃허브에 업로드하면 안 되는 것들을 숨겨놓는 역할을 한다. 

npm install dotenv

설치하고

REACT_APP_GOOGLE_MAP_API = 숨길키

폴더 구조 최상위(.gitignore, package.json이랑 같은 위치)에 .env 파일을 만들고 .gitignore에 .env를 써준 다음에

.env 파일 안에 저렇게 숨길 내용을 넣어주면 된다. 

리액트에서는 REACT_APP_으로 prefix를 해줘야 정상적으로 읽는다.

 

const mapKey = process.env.REACT_APP_GOOGLE_MAP_API;

이런 식으로 사용하면 된다. 

 

create-react-app으로 만든 리액트 프로젝트에는 이미 dotenv 패키지가 내장되었기에 많은 블로그에서 나오는 

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

저 둘 중 하나로 불러오는 코드가 필요가 없다. import 넣어서 줄줄이 에러 나와서 삽질 좀 했다

Compiled with problems:X

ERROR in ./node_modules/dotenv/lib/main.js 1:11-24

Module not found: Error: Can't resolve 'fs' in 'C:\폴더구조\node_modules\dotenv\lib'

ERROR in ./node_modules/dotenv/lib/main.js 3:13-28

Module not found: Error: Can't resolve 'path' in 'C:\폴더구조\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 5:11-24

Module not found: Error: Can't resolve 'os' in 'C:\폴더구조\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 }

 

 

이 오류 만난 거면 import문을 넣어서 생긴 문제다.

아래 링크 블로그에서 잘 설명해놓았다.

https://db2dev.tistory.com/entry/React-Webpack%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EC%B6%95%ED%95%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98env-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] Webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기

 

 

그리고 이 글을 쓴 목적은

💡⭐🌟dotenv는 서버를 껐다 켜야 반영이 된다!🌟⭐💡

콘솔 찍어봐도 undifined 떠서 계속 디버깅했는데 사실 서버 재시작을 안 해서 생긴 문제였다는 점!

 

 

참고 블로그

https://jjanddakdevlogg.tistory.com/m/entry/react-%EC%97%90%EC%84%9C-dotenv%EB%A1%9C-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

react 에서 dotenv로 환경변수 사용하기