웹팩 세팅을 마치고 개발을 시작하려할 때 자주 사용하는 패키지가 있습니다. 바로 webpack-dev-server입니다. 웹팩 설정을 적용한 결과물을 만들어주고 localhost 서버도 띄워서 결과물을 제공하며 hot reloading같은 것도 적용해줍니다. 보통 react나 vue같은 spa 개발을 할 때 데브 서버를 많이 사용합니다.
npm i -D webpack-dev-server타입스크립트를 사용한다면 다음 패키지를 추가로 설치합니다.
npm i -D @types/webpack-dev-server실행 명령어는 다음과 같습니다.
webpack serve --env development예전에는 webpack-dev-server 명령어로 실행했는데 webpack serve로 바뀌었습니다(webpack-cli는 4버전이랑 같이 쓰셔야 합니다). 그런데 이게 아직 공식 문서에 안 나와있습니다... ㅎㅎㅎ 그래서 정확히 어떻게 될 지는 모릅니다. 주기적으로 체크해보겠습니다.
개발 서버에 대한 설정도 webpack.config.js 안에 해주면 됩니다. output이나 plugins가 있는 그 위치에요.
{
...output, entry, module...
devServer: {
historyApiFallback: true,
port: 9000,
publicPath: '/dist/',
proxy: {
'/api/': {
target: '백엔드주소',
changeOrigin: true,
}
}
}
}devServer에도 엄청나게 많은 설정이 있지만 제가 react 개발을 할 때 자주 쓰는 설정은 위에 나오는 것 정도입니다. 나머지는 공식 문서를 참고하실 바랍니다.
port는 개발서버인 localhost의 포트를 바꿔주고, historyApiFallback은 react-router같은 것을 쓸 때 새로고침 시 Cannot GET /signup 이런 에러가 뜨는 것을 해결해줍니다. publicPath는 웹팩 데브 서버가 번들한 결과물이 위치하는 경로인데 보통 output에 적어주는 publicPath와 동일한 위치를 표시해주면 됩니다. devServer의 번들된 결과물은 일반 webpack 명령어와는 다르게 메모리에 저장됩니다. 따라서 개발 서버를 종료하면 결과물도 사라집니다. 개발 서버를 켜놓는 동안만 publicPath 경로 안에서 접근 가능합니다.
proxy는 알아두면 매우 유용한 기능입니다. 여러분이 개발할 때 백엔드 서버로 외부 API를 쓴다면 CORS에러가 발생하는 경우가 많습니다. 브라우저->서버로 요청을 보낼 때는 CORS 에러가 발생할 수 있습니다. 이 때 proxy 서버를 띄워 서버->서버로 요청을 보내게 하면 CORS 에러를 피할 수 있습니다.
위에 제가 설정해 놓은 것에 따르면 localhost:9000/api/test/hello로 요청을 보낼 때 데브 서버가 알아서 프록시 서버를 띄워서 백엔드주소/test/hello로 요청 주소를 바꿔줍니다. 주소에 /api/가 들어있다면 localhost:9000/api/를 백엔드주소로 바꾸는 것이죠. 이러한 행동을 요청을 proxy한다고 말합니다. '/api/' 외에도 다른 주소를 더 추가해서 주소별로 다른 백엔드 API로 요청을 proxy할 수 있습니다. localhost:9000/api/는 백엔드주소로 localhost:9000/api1/은 백엔드주소2로 가게 할 수 있는 것이죠.
CORS로 고통받으셨던 분들은 proxy 옵션을 사용해서 편하게 해결하시면 좋습니다.