환경 변수 활용

환경 변수 등록 및 참조

모듈 변수

React 앱을 구성하는 JavaScript 파일은 개별 모듈 파일로 독립적인 영역(scope)을 가집니다. 즉, 파일 내부의 모든 변수는 지역 변수이므로 다른 파일과 공유하기 위해서는 명시적으로 ES 모듈(import, export)을 사용해야 합니다.

export const WANT_SHARE_VARIABLE = '이 변수를 다른 파일과 공유하길 원합니다.'

환경 변수

반면 환경 변수(environment variables)는 명시적으로 모듈을 불러오지 않고도 접근할 수 있습니다. 앱에서 기본적으로 사용 가능한 환경 변수는 NODE_ENV 입니다.

if (process.env.NODE_ENV === 'production') {
  // 배포 모드인 경우, 조건 블록 처리 됨
}

그리고 CRA는 REACT_APP_ 접두사를 사용해 커스텀 환경 변수 등록을 지원합니다. 커스텀 환경 변수는 .env 파일에 정의합니다. (개발 모드 우선 순위 .env.development.local > .env.local > .env.development > .env)

.env

REACT_APP_SHARE_VARIABLE='이 변수는 모든 파일과 공유됩니다.'

JavaScript

if (process.env.REACT_APP_SHARE_VARIABLE === '이 변수는 모든 파일과 공유됩니다.') {
  // ...
}

주의할 점

개발 서버가 구동 중에 환경 변수를 변경하면 바로 반영이 안되므로 개발 서버를 다시 시작해야 합니다. 그리고 환경 변수로 보안과 관련된 민감한 정보(예: API_KEY)를 저장해서는 안됩니다. 환경 변수는 빌드 과정에서 포함되므로 추후 빌드 된 앱 파일 코드를 살펴볼 수 있어 민감한 정보가 외부로 유출될 수 있습니다.

.env

# 민간함 정보가 외부로 유출될 수 있으니 환경 변수 사용 시 주의하세요!
REACT_APP_NOT_SECRET_CODE=awjjkjviwdwnrkj2d9wkdiwyuwj6sks

HTML 문서에서 참조

정적 HTML 문서(예: public/index.html)에서 환경 변수에 접근해 사용할 수도 있습니다.

<title>%REACT_APP_WEBSITE_NAME%</title>

몇 가지 기본 제공 변수를 제외한 나머지 변수는 모두 "REACT_APP_" 접두사를 사용해야 합니다.

• NODE_ENV

• PUBLIC_URL

Shell에 임시 환경 변수 설정

환경 변수 정의는 운영체제(OS) 마다 다릅니다. 이 설정은 Shell 세션이 종료되기 전까지 임시적으로 작동합니다.

Linux, macOS (Bash)

REACT_APP_TEMP=temporary npm start

Windows (cmd.exe)

# 후행 공백을 피하기 위해 변수 할당을 따옴표로 묶어야 합니다.
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start

Windows (Powershell)

($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)