[React] custom 환경 변수 사용하는 방법 (.env 파일 사용)

요며칠 node.js와 함께 인증의 세계에 다녀왔다. 그러면서 .env 파일에 환경 변수를 설정해서 쓰는 법을 알게 되었다. 

이번 포스팅의 주제는 아니지만 node.js에서는 dotenv 모듈을 사용하면 쉽게 처리할 수 있다. 

 

1. .env 파일에 필요한 key를 다음과 같이 설정해준다. 

ACCESS_SECRET= YourSecretKeyForAccessToken
REFRESH_SECRET= YourSecretKeyForRefreshToken

2. 환경 변수를 불러와야 하는 파일에서 dotenv 모듈을 불러온다.

require("dotenv").config();

3. .env 파일에 저장했던 환경 변수 앞에 process.env.를 붙여서 사용한다.

const generateToken = (user, checkedKeepLogin) => {
    const payload = {
      id: user.id,
      email: user.email,
    };
    let result = {
      accessToken: sign(payload, process.env.ACCESS_SECRET, {
        expiresIn: "1d", 
      }),
    };

    if (checkedKeepLogin) {
      result.refreshToken = sign(payload, process.env.REFRESH_SECRET, {
        expiresIn: "7d", 
      });
    }
    return result;
}

 

 

오늘 과제는 서버가 아닌 클라이언트에서 환경 변수를 사용해야 했는데, 클라이언트 코드는 Create React App으로 짜여져 있었다. 

create-react-app 공식 문서에 설명이 상세하게 나와있어서 그대로 진행하면 됐다. 이번 포스팅에서는 간단하게 순서와 주의사항을 정리해보려고 한다. 

 

1. root 디렉토리에 .env 파일을 생성한다. 

2. .env 파일에 사용하고자 하는 환경 변수를 설정한다. 이때 변수명 앞에 REACT_APP_을 접미사로 꼭 붙여줘야 한다. custom 환경 변수를 위해 create-react-app에서 정해놓은 키워드라고 생각하면 된다.  

REACT_APP_CLIENT_ID=PutYourClientIDHere

3. 환경 변수를 사용하고자 하는 컴포넌트 파일에서 환경 변수명 앞에 process.env.를 붙여서 사용한다. (dotenv 처럼 따로 불러와야 하는 코드 없이 바로 사용할 수 있다.) 

const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;

 

주의 사항: 

환경 변수는 build 타임에 임베드되기 때문에 서버를 구동 중에 환경 변수를 변경했다면 서버를 한 번 닫았다가 재시작(npm start)을 해줘야 환경 변수가 제대로 적용된다.

 

 

📚 참고자료

Adding Custom Environment Variables | Create React App

[삽질] - parcel build시 root 문제

GitHub - motdotla/dotenv: Loads environment variables from .env for nodejs projects.