[REACT] 리액트에서 환경변수 사용하기 (dotenv)

프로젝트를 진행하다보면 공개하기 민감한 정보들이 프로젝트내에서 코드들과 함께 작성되어있게 된다.

이럴때 공개되면 안될만한 정보들을 관리할 수 있는것이 환경변수이다. 이러한 환경변수를 사용하기 위해서는 라이브러리가 필요하다.

$ npm install dotenv

사용법은 간단하다.

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

다운받은 라이브러리를 이렇게 프로젝트 상단에 import 해오고

프로젝트 최상단 디렉토리에 .env 파일을 생성한다.

src 디렉토리가 아닌 package.json과 동일한 깊이의? 디렉토리에 놔두어야 한다.

일반적으로 환경변수를 작성할때에는 아래와 같이 작성한다.

KAKAO_MAP_API=abcabcabcabcabc

GOOGLE_MAP_API=1a2a3a4a5a6a7a8a9a

🌟주의 : " " 쌍따옴표나 ' ' 작은 따옴표등으로 감싸면 동작하지 못하니 주의해야 한다. 띄어쓰기 등도 하면 안된다.

이렇게 선언한 환경변수는 process.env.변수명 으로 사용할 수 있다.

하지만 React(리액트)에서는 조금 다른 방식으로 환경변수를 사용할 수 있다.

React 의 경우는 환경변수 앞에 필수적으로 아래의 키워드 REACT_APP_ 키워드를 붙여줘야 한다.

REACT_APP_

react 에서도 똑같이 process.env.변수명으로 접근하여 환경변수를 사용할 수 있다.

ex)

마지막으로 제일 중요한 부분!!!

.gitignore 파일에 .env 작성하기!!!

프로그래밍 공부 노트