env 환경 변수 활용하기

🎀 env 환경 변수란?

환경 변수(Environment Variable)란 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다.
포트, DB 관련 정보, API_KEY 등 오픈 소스에 올리기 민감한 정보를 관리할 때 유용하게 쓰인다. 외부 파일(.env)에 환경 변수를 정의하여 전역 변수로 사용한다.

이게 대체 무슨 말일까?

한마디로 요약하면, 프로그램이 돌아가는데 필요한 변수들을 의미한다.

예를 들어 보겠다.

어떤 기관의 대표 번호로 전화를 하고 내가 원하는 부서를 말하면 그에 맞게끔 전화가 연결되는 경험을 해봤을 것이다.

만약에 대표 번호가 없다면 어떻게 될까?

해당 기관의 모든 부서에 전화를 하며 내가 원하는 부서를 찾아야 할 것이다.

환경 변수가 필요한 이유 또한 이와 비슷하다.

환경 변수는 프로세스가 어떠한 작업을 할 때 필요로 하는 정보를 손쉽게 접근/처리할 수 있도록 해주는 것이다.

위의 전화 예시를 살펴보면, 대표 번호라는 환경 변수는 여러 부서에 대한 정보를 손쉽게 접근할 수 있도록 해주는 것이다.

🎀 env 설정하기

1. 프로젝트 루트 경로에 .env 파일을 생성한다.
2. 변수를 생성한다.
   React 프로젝트라면 반드시 REACT_APP_${변수명}으로 변수를 생성해야만 한다.
   단순 경로 텍스트를 적어주는 목적이라면 굳이 따옴표를 사용하지 않아도 된다.

   REACT_APP_API_BASE_URL = https://fake-api.test.kr/api

3. API 경로 사용을 필요로하는 파일에 와서 사용할때는 아래와 같이 사용해야만 한다.

   process.env.${환경변수명}

   위와 같이 사용하면 따로 import 해올 필요가 없다.

   const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;

   위와 같이 따로 변수 지정해주고 사용하면 더 편할 것 같다.

🎀 다시 한번 훑어보는 주의 사항

위에도 간단히 설명했지만 다시 주의할 점들을 정리해 보겠다.

📌 REACT_APP_을 꼭 사용해라

react 프로젝트라면 반드시 변수명 앞에 REACT_APP_을 붙여줘야만 인식을 한다.

📌 gitignore에 추가해라

.env 파일은 반드시 gitignore에 추가해야 한다.

// 환경 변수
.env

어차피 파일은 루트에 있을거니까 저렇게만 적어주면 된다.

📌 설정 완료 후 재시작 필요

.env 파일에 변화가 있었다면 재시작을 해야 반영되니 주의하도록 하자.

간편하고 쉽지만
알게 모르게 예민둥이인 env...
오류와 싸우기 싫다면 주의 사항 필독!!!!!

👉🏻 압도적 감사 (출처)
환경 변수(PATH)란?