[React.js] dotenv 라이브러리로 .env .dev .local 환경 변수 설정

dotenv 파일을 일단 설치 해 줍니다

yarn 혹은 npm 설치 방법

$ npm i dotenv
$ yarn add dotenv

dotenv 사용 예시 입니다

import { config } from "dotenv";

config();

export const API = `${process.env.REACT_PROTOCOL}://${process.env.API_URL}`;

config를 import  해준 후 , 해당 JS 파일에 config(); 선언 후, 

process.[환경변수파일명].[선언된규칙] 으로 사용할 수 있습니다.

예시 : process.env.REACT_PROTOCOL 

그럼 .env 파일을 생성 후, 아래와 같이 선안해줍니다.

REACT_PROTOCOL="http"
API_URL="127.0.0.1"

 

간략한 예시로 오늘 dotenv 라이브러리 설명 드렸습니다.

백엔드에선 여러가지 환경변수 예를 들어, db 정보같은 환경을 설정할 때 쓰이지만 프론트도 개발서버/운영서버 배포에 따른 환경변수 등 다양한 방면에서 필요한 것으로 보입니다.

 

감사합니다.