728x90
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파일 로드하는 프로세스를 제공해주지 않아 우린 그대신 라이브러리나 플러그인을 이용하면 된다.
- dotenv (NPM 패키지)
- DefinePlugin (Webpack 플러그인)
- EnvironmentPlugin (Webpack 플러그인)
- DotEnv 플러그인 (Webpack 플러그인)
이 방법 중 webpack.DefinePlugin 은 전역 상수를 지정해주는 방식이다.
plugins: [
new webpack.DefinePlugin({
API_URL : JSON.stringify("http://devapi:9010")
}),
],
| 왜 JSON.stringfy()로 감싸주는가?
- 만약 값의 형태가 string이라면 이것을 코드 형태로 사용될 것이다.
- 만약 값이 string 형태가 아니라면 이것은 string 화 될 것이다.
나는 이런식으로 웹팩파일을 지정해주었다. 그리고 코드에서는
axios.get(`${API_URL}`+"/ps/leave/apply/"+empCd).then(res => { })
`{API_URL}` 일 경우 내가 yarn local , yarn dev , yarn prd에 따라 각 webpack 설정을 해주었다.
728x90
반응형
'REACT' 카테고리의 다른 글
AWS- appspec.yml root (0) | 2020.09.24 |
---|---|
gapi oauth2 - google Calendar (0) | 2020.09.15 |
[리액트,React] Props 부모-자식 전달 (0) | 2020.08.10 |
React // Object.map is not a function (0) | 2020.08.10 |
React/FullCalendar next,prev 이벤트 핸들링 (0) | 2020.08.07 |