# 개발환경 / 배포환경별 API URL 바꾸기 (feat. React & axios)

# process.env

React도 여타 node.js를 사용한 개발과 같이, `process.env` 오브젝트를 통해 현재 node.js가 실행되고 있는 환경변수를 가져올 수 있다.

한편, `create-react-app`을 통해 제작한 앱의 경우에는 `.env`을 지원한다.

`.env`가 항상 불러오는 전체 용도이고,

`.env.development`는 `npm start`를 통해 실행할 경우 불러오는 경우이며,

`.env.production`는 `npm run build`를 실행할 경우 빌드 타임에 env를 가져오는 방식이다.

# `.env` 문법

```bash
# .env.production
REACT_APP_API_URL="https://some-api.test.com"
```

```bash
# .env.development
REACT_APP_API_URL="http://localhost:8000"
```

위와 같이 `REACT_APP_` 로 사전 정의된 이름으로 시작해야, React에서는 "아 이게 react용이구나" 라고 자체적으로 관리하는 환경변수로 인식한다.

한편, 위 변수 이름은 `process.env.REACT_APP_API_URL` 와 같이 풀네임으로 사용해야 해당 값을 불러올 수 있다.

또한, 해당 환경 변수값은 코드상에서는 `process.env.~~` 형식이지만 `npm start`등 React 빌드가 진행된 이후에는 const value로 동작한다.

# React에서 API 주소 with Axios

```js
import axios from "axios";

// axios.defaults.baseURL = "http://localhost:8000";
axios.defaults.baseURL = process.env.REACT_APP_API_URL;
``` 

따라서, API 주소를 환경에 따라 바꾸기 위해서는 위처럼 고정된 string으로 넣는 대신, `process.env.REACT_APP_API_URL`로 넣어주면 해결된다.