[React] 리액트 환경변수(.env)

질문

REACT_APP_FIREBASE_API_KEY에 API 키 값을 대입하면 별도의 import 과정 없이 process.env.REACT_APP_FIREBASE_API_KEY로 해당 변수를 호출할 수 있다.

어떻게 이럴 수 있는지 설명해주고 해당 환경변수가 정확히 컴퓨터 어느 경로에 저장되는 지 알려줘.

 

답변(GPT-4o)

React 애플리케이션에서 환경 변수를 사용하면 `process.env.REACT_APP_*` 형태로 접근할 수 있습니다. 이는 Create React App (CRA)에서 제공하는 환경 변수 관리 방식 덕분입니다. 환경 변수가 작동하는 방식과 저장 위치를 설명하겠습니다.

### 어떻게 `process.env.REACT_APP_*` 형태로 접근할 수 있는가?
1. **Create React App 설정**:
   CRA는 애플리케이션의 빌드 과정에서 환경 변수를 자동으로 읽어오고, 이를 애플리케이션 코드에서 사용할 수 있도록 처리합니다. 환경 변수를 읽어오는 과정은 다음과 같습니다:
   
   - **.env 파일**: 프로젝트 루트 디렉토리에 `.env` 파일을 두고, 여기에 환경 변수를 정의합니다.
   - **빌드 시점**: `npm start`, `npm run build` 등의 명령을 실행하면 CRA는 `.env` 파일을 읽고, 환경 변수를 Webpack을 통해 번들링합니다. 이 과정에서 `REACT_APP_` 접두사가 붙은 변수만 포함됩니다.
   - **코드에서 접근**: 이렇게 포함된 환경 변수는 애플리케이션 내에서 `process.env.REACT_APP_*` 형태로 접근할 수 있게 됩니다.

2. **Webpack DefinePlugin**:
   CRA는 내부적으로 Webpack의 DefinePlugin을 사용하여 환경 변수를 애플리케이션의 전역 변수로 설정합니다. DefinePlugin은 문자열을 코드 내에 삽입하기 때문에, 런타임이 아닌 빌드 타임에 변수가 결정됩니다.

### 환경 변수 저장 위치
환경 변수는 `.env` 파일에 정의되며, 빌드 과정에서 JavaScript 코드에 삽입됩니다. 이는 서버나 클라이언트의 특정 경로에 저장되지 않고, 빌드된 코드 내에 포함되는 방식입니다.

```plaintext
// .env
REACT_APP_FIREBASE_API_KEY=AIzaSyDmnhQlJo4PbA0nwKHlAU5u3nhbRmO6D9E3
```

빌드된 결과물은 보통 `build` 디렉토리에 생성됩니다. 이 디렉토리에 포함된 JavaScript 파일은 환경 변수를 포함하게 됩니다. 예를 들어, `main.[hash].js` 파일 내에 `process.env.REACT_APP_FIREBASE_API_KEY`가 실제 API 키 값으로 변환되어 포함됩니다.

### 예시: 환경 변수 설정 및 접근
1. **.env 파일 작성**:
   ```plaintext
   REACT_APP_FIREBASE_API_KEY=AIzaSyDmnhQlJo4PbA0nwKHlAU5u3nhbRmO6D9E3
   ```

2. **환경 변수 사용 코드**:
   ```javascript
   // src/App.js
   function App() {
     console.log('Firebase API Key:', process.env.REACT_APP_FIREBASE_API_KEY);
     return (
       <div className="App">
         <header className="App-header">
           <p>
             Firebase API Key: {process.env.REACT_APP_FIREBASE_API_KEY}
           </p>
         </header>
       </div>
     );
   }
   
   export default App;
   ```

### 요약
React에서 `process.env.REACT_APP_*` 환경 변수를 사용하는 것은 Create React App이 제공하는 빌드 시점 환경 변수 주입 기능 덕분입니다. 환경 변수는 `.env` 파일에 정의되고, 빌드 과정에서 애플리케이션 코드에 삽입됩니다. 이는 Webpack의 DefinePlugin을 통해 이루어지며, 빌드된 코드 내에 포함됩니다. `process.env.REACT_APP_*` 변수는 클라이언트 측에서 직접 접근할 수 있게 되지만, 보안에 주의하여 민감한 정보를 노출하지 않도록 해야 합니다.

 

이해한 것

1. create-react-app으로 프로젝트를 생성했을 때 npm start 명령 실행 시에 리액트는 .env 파일을 읽는다.

2. .env 내 환경변수들을 Webpack을 통해 번들링한다.(  `REACT_APP_` 접두사가 붙은 환경변수만 포함 )

3. 포함된 환경 변수는 애플리케이션 내에서 `process.env.REACT_APP_*`  형태로 접근할 수 있다.

4. 환경 변수는 `.env` 파일에 정의되며, 빌드 과정에서 JavaScript 코드에 삽입된다. 즉, 서버나 클라이언트의 특정 경로에 저장되지 않고, 빌드된 코드 내에 포함되는 방식이다.

5. 위와 같은 이유로 인해서 협업 시에는 .env 파일을 공유해야하며 빌드 시에는 환경변수를 따로 등록해줘야하는 것이다.

(환경변수가 서버나 클라이언트의 특정 경로에 저장되지 않고 빌드된 코드 내에 포함되는 방식이기 때문)