[REACT] 리액트에서 환경변수 사용하기 (dotenv)
프로젝트를 진행하다보면 공개하기 민감한 정보들이 프로젝트내에서 코드들과 함께 작성되어있게 된다. 이럴때 공개되면 안될만한 정보들을 관리할 수 있는것이 환경변수이다. 이러한 환경변수를 사용하기 위해서는 라이브러리가 필요하다. $ npm install dotenv https://www.npmjs.com/package/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 작성하기!!!