Webpack dev server, Spring 개발 환경 구축

Webpack dev server, Spring 개발 환경 구축

웹 프론트로 webpack dev server 로 개발 환경을 구축하고 개발하면서 백엔드는 기존 Spring rest 서버(tomcat)를 그대로 사용할 경우가 생겼었다. 그런데 프론트, 백엔드가 각각의 서버에서 돌아가니 프론트에서 백엔드로 api 호출할 때 어떻게 해야 할지 막막했다. 개발 당시에는 그냥 프론트에서 api 호출 하는 부분을 주석 처리하고 더미 데이터로 채워 응답이 온 것처럼 개발하였다. 그런 후 프론트 개발을 완료되면 주석을 제거하고 빌드 된 파일을 Spring쪽으로 옮긴 다음 테스트하는 방식으로 개발을 하였기 때문에 매우 번거로웠다.

그런데 오늘 위의 번거로운 작업없이 심지어는 webpack dev server의 HMR 기능도 사용 가능하다는 것을 알았다.

webpack.config.js 에 다음과 같이 추가한다.

  devServer: {
    publicPath: '/',
    host: "127.0.0.1",
    port: 3000,
    proxy: {
        "**": "http://localhost:8080"
    }
  }