React / 환경변수 설정 DefinePlugin

React에서 개발환경에 따라 API를 다르게 호출할 수 있는 경우가 있다
예로들면
local : axios.get("http://gateway:9010/test/api")
dev : axios.get("http://devway:9010/test/api")
prd : axios.get("http://prdway:9010/test/api")

Webpack by default does not provide any process to load ‘.env’ files. but there many plugins and libraries that can do the same task.
출처 : https://medium.com/@bhautikbharadava/environment-variables-webpack-config-using-defineplugin-1a7f38e2236e

주로 알려진 환경변수를 지정하는 방법 중 하나가 .env파일을 만드는 것이다. .env파일은 기본적으로 환경과, 서버, db정보들을 포함하는 파일이다. 하지만 기본적으로 웹팩에선 .env파일 로드하는 프로세스를 제공해주지 않아 우린 그대신 라이브러리나 플러그인을 이용하면 된다.

1. dotenv (NPM 패키지)
2. DefinePlugin (Webpack 플러그인)
3. EnvironmentPlugin (Webpack 플러그인)
4. DotEnv 플러그인 (Webpack 플러그인)

이 방법 중 webpack.DefinePlugin 은 전역 상수를 지정해주는 방식이다.

  plugins: [
     new webpack.DefinePlugin({
      API_URL : JSON.stringify("http://devapi:9010") 
    }),
  ],

| 왜 JSON.stringfy()로 감싸주는가?

• 만약 값의 형태가 string이라면 이것을 코드 형태로 사용될 것이다.
• 만약 값이 string 형태가 아니라면 이것은 string 화 될 것이다.

출처 : https://stackoverflow.com/questions/39564802/why-does-webpacks-defineplugin-require-us-to-wrap-everything-in-json-stringify

Why does Webpack's DefinePlugin require us to wrap everything in JSON.stringify?

나는 이런식으로 웹팩파일을 지정해주었다. 그리고 코드에서는

     axios.get(`${API_URL}`+"/ps/leave/apply/"+empCd).then(res => { })

`{API_URL}` 일 경우 내가 yarn local , yarn dev , yarn prd에 따라 각 webpack 설정을 해주었다.