API 서버 연동 - 풀이
// webpack.config.js
module.exports = {
devServer: {
overlay: true,
stats: "errors-only",
proxy: {
"/api": "http://localhost:8081", // 프록시
},
},
}
아까와 다르게 리스트가 뜨는 것을 확인할 수 있다.
검색을 하면 저렇게 개발 서버에 로그가 뜨는 것을 확인할 수 있다.
api 연동 서버를 갖추는 것은 프론트엔드 개발할 때 필수이다.
왜냐면 프론트에서 데이터를 다루는 것이 아니라 서버 API를 통해서 데이터를 많이 다루기 때문에 API를 세팅할 때가 많다.
그래서 이렇게 웹팩 개발 서버를 세팅하는 방법을 알고 계시면 훨씬 수월하게 개발환경 세팅을 할 수 있을 것이다.