환경 변수 (리눅스, dotenv, 리액트에서 dotenv)

• 리눅스에서는 이미 많은 환경변수들이 사용되고 있다.
  ⛷ CLI에서 export 명령어를 사용하면, 이 환경변수들을 확인할 수 있다.
• export 변수이름="값" 처럼, 새로운 환경변수를 지정할 수 있다.
  🏂 이때, = 앞뒤로 공백이 있으면 안된다.
• echo $변수이름 으로 환경변수의 값을 출력할 수 있다.

dotenv

• 자바스크립트에서는 dotenv를 이용하여 환경변수를 사용할 수 있다.
• npm i dotenv으로 모듈을 설치할 수 있다.
• Node.js의 내장객체인 process.env을 통해서, 위의 export 명령어로 확인한 리눅스의 환경변수들을 확인할 수 있다.
• dotenv에서 .env를 이용하여 Node.js 환경에서 영구적인 환경변수를 사용할 수 있다.

// 우선 .env 파일을 만들고 .env 파일에 myname=kimcoding 이라는 환경변수를 설정한다.
/*   그리고 해당 node.js 환경에서의 js파일의 내용이다.  */

const dotenv = require("dotenv");
dotenv.config();
console.log(process.env.myname); // kimcoding이 출력된다.

• 위와 같은 방법으로 node.js 환경에서 환경변수값을 조회할 수 있다.
• 환경변수를 이용하여 API 키나 데이터베이스의 비밀번호와 같은 민감한 정보를 저장하고 관리할 수 있다.
• 환경변수를 이용하여 코드를 작성하면, 다른 PC나 .env 파일과 같은 다른 작업환경에서 같은 변수에 다른 값을 넣을 수 있다.
• 개발환경, 테스트 서버 환경, 실제 production 환경에서 별도의 API키나 데이터를 사용할 수 있다.
  ⛄ 개발환경과 실제 서비스가 이루어지는 환경을 구분하여 코드를 작성할 수 있다.

리액트 환경에서 dotenv

• create react app로 만들어진 리액트 프로젝트는 기본적으로 dotenv를 내장한다.
  ⛄ 따라서, const dotenv = require("dotenv").config();와 같은 과정이 필요하지 않다.
• .env에 환경변수를 추가하고, process.env.변수이름 으로 바로 접근하여 사용하면 된다.

🏂 리액트에서 dotenv 사용시 환경변수 이름에 관한 주의사항

환경 변수의 이름은 무조건 REACT_APP_ 으로 시작해야 한다.

ex. REACT_APP_KEY, REACT_APP_NAME, REACT_APP_AGE

REACT_APP_을 붙여주지 않으면, undefined의 값이 출력될 것이다.

참고 자료 : 코드 스테이츠