Webpack dev server를 이용한 개발 환경 구성 Part2

본 글은 Webpack dev server를 활용하여 백엔드와 연동하는 개발 모드 구현 방법을 설명합니다. Part1에서 다룬 프론트엔드 단독 개발 모드와 달리, Part2에서는 리버스 프록시를 사용하여 백엔드 API 호출 및 페이지 이동이 가능하면서도 Webpack Hot Reload 또는 Hot Module Replacement를 통해 수정 사항을 즉시 반영하는 개발 환경 구축에 초점을 맞춥니다.

SPA가 대세인 환경에서 전체를 SPA로 만들기 어려운 경우, 일부 페이지만 SPA로 구성하는 하이브리드 방식의 장점을 살리면서도 개발 편의성을 높이는 방법을 제시합니다. 이를 위해 Webpack4, Vue-CLI2, Axios를 사용하며, 싱글 페이지 형식 프로젝트에서 멀티 페이지 형식 개발의 장점을 흡수하는 방안을 모색합니다.