> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/add-env.md).

# 환경 변수 활용

환경 변수 등록 및 참조

## 모듈 변수 <a href="#variables-in-module" id="variables-in-module"></a>

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

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

## 환경 변수 <a href="#environment-variables" id="environment-variables"></a>

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

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

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

{% tabs %}
{% tab title=".env" %}

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

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="JavaScript" %}

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

{% endtab %}
{% endtabs %}

## 주의할 점 <a href="#caveats" id="caveats"></a>

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

{% tabs %}
{% tab title=".env" %}

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

{% endtab %}
{% endtabs %}

## HTML 문서에서 참조 <a href="#referencing-environment-variables-in-the-html" id="referencing-environment-variables-in-the-html"></a>

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

```markup
<title>%REACT_APP_WEBSITE_NAME%</title>
```

{% hint style="warning" %}
몇 가지 기본 제공 변수를 제외한 나머지 변수는 모두 "`REACT_APP_`" 접두사를 사용해야 합니다.

* NODE\_ENV
* PUBLIC\_URL
  {% endhint %}

## Shell에 임시 환경 변수 설정 <a href="#adding-temporary-environment-variables-in-your-shell" id="adding-temporary-environment-variables-in-your-shell"></a>

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

{% tabs %}
{% tab title="Linux, macOS (Bash)" %}

```bash
REACT_APP_TEMP=temporary npm start
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Windows (cmd.exe)" %}

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

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Windows (Powershell)" %}

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

{% endtab %}
{% endtabs %}