프론트엔드 개발 시 백엔드 API 없이 개발해야 할 때 Mockup data를 제공해주는 Mockup API를 만들어서 개발하면 수월하다.
웹팩 개발 서버는 Mockup API를 제공하는 기능도 있다.
Mockup API
우선 웹팩 개발 서버 공식문서를 확인하면서 작성하자
웹팩 개발 서버에서 api 요청에 대한 미들웨어를 작성할 수 있다.
onBeforeSetupMiddleware 옵션이 있는데 이 옵션은 deprecated 될 것이므로 setupMiddlewares 옵션을 사용해보자
setupMiddlewares는 커스텀 함수를 실행하고 커스텀 미들웨어를 적용하는 기능을 제공한다.
webpack.config.js
module.exports = {
...
devServer: {
...
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error("webpack-dev-server is not defined");
}
devServer.app.get("/api/users", (req, res) => {
res.json([
{
id: 1,
name: "Alice",
},
{
id: 2,
name: "Bek",
},
{
id: 3,
name: "Chris",
},
]);
});
return middlewares;
// middlewares.unshift({
// path: "/api/users",
// middleware: (req, res) => {
// res.json([
// {
// id: 1,
// name: "Alice",
// },
// {
// id: 2,
// name: "Bek",
// },
// {
// id: 3,
// name: "Chris",
// },
// ]);
// },
// });
// return middlewares;
},
},
...
}마지막에 반드시 middlewares를 반환해야 한다
다른 모든 미들웨어보다 먼저 미들웨어를 실행하려면 unshift 메소드를 사용하고
다른 모든 미들웨어 이후에 미들웨어를 실행하려면 push 메소드를 사용하면 된다.
npm start 명령어를 통해 웹팩 개발 서버를 실행하고 url에 /api/users를 입력하여 반환되는 값을 확인해보자
이렇게 Mockup API를 만들 수 있다.
그렇다면 이 Mockup API를 호출하는 코드를 작성해보자
API를 호출하기 위해 AJAX 요청을 해야하는데 Axios 라이브러리를 설치하여 요청해보자
$ npm install axiosapp.js 파일에서 우리가 만든 Mockup API를 호출해 브라우저에 출력해보자
src/app.js
import "./app.css";
import nyancat from "./nyancat.jpeg";
import axios from "axios";
document.addEventListener("DOMContentLoaded", async () => {
const res = await axios.get("/api/users");
document.body.innerHTML = `
<img src="${nyancat}" />
<div class='user_container'></div>
`;
const container = document.querySelector(".user_container");
container.style.color = "white";
container.innerHTML = (res.data || [])
.map((user) => {
return `<div>${user.id}: ${user.name}</div>`;
})
.join("");
});
이렇게 웹팩 개발 서버에 Mockup API를 만들어서 프론트엔드 단에서 호출하여 사용할 수 있다.
connect-api-mocker
Mockup API 작업이 많을때는 connect-api-mocker 패키지의 도움을 받을 수 있다.
특정 목업 폴더를 만들어 API 응답을 담은 파일을 저장한 뒤, 이 폴더를 API로 제공해 주는 기능을 한다.
$ npm install -D connect-api-mocker프로젝트 루트 경로에서 mocks라는 폴더를 만들고 그 안에 API 경로와 맞춰서 폴더를 만들어주자
우리가 만든 Mockup API의 경로는 /api/users였으므로 mocks/api/users 폴더를 만들고
users 폴더 안에 GET.json이라는 파일을 만들어주면 된다.
.
├── app.js
├── babel.config.js
├── dist
├── mocks
│ └── api
│ └── users
│ └── GET.json
├── my-babel-plugin.js
├── my-babel-preset.js
├── my-webpack-loader.js
├── my-webpack-plugin.js
├── package-lock.json
├── package.json
├── src
│ ├── app.css
│ ├── app.js
│ ├── bg.png
│ ├── index.html
│ ├── math.js
│ └── nyancat.jpeg
├── webpack.config.js
└── yarn.lock현재 내 프로젝트 폴더 구조인데 mocks 폴더의 구조를 참고하면 된다.
GET.json 파일 안에는 우리가 만든 가짜 데이터를 넣어주면 된다
mocks/api/users/GET.json
[
{
"id": 1,
"name": "Alice"
},
{
"id": 2,
"name": "Bek"
},
{
"id": 3,
"name": "Chris"
}
]
webpack.config.js에서 아까 설치한 connect-api-mocker 패키지를 불러오고 setupMiddlewares 옵션에서 아래와 같이 세팅해주면 된다.
webpack.config.js
const apiMocker = require("connect-api-mocker");
...
module.exports = {
...
devServer: {
...
setupMiddlewares: (middlewares, devServer) => {
if (!devServer) {
throw new Error("webpack-dev-server is not defined");
}
devServer.app.use(apiMocker("/api", "mocks/api"));
return middlewares;
// middlewares.unshift(apiMocker("/api", "mocks/api"));
// return middlewares;
},
},
...
}apiMocker에서 첫 번째 인자인 /api는 /api로 요청이 오는 것은 apiMocker가 처리하겠다는 의미다.
두 번째 인자인 mocks/api는 앞서 작성한 mocks 폴더의 경로를 작성해주면 된다.
다시 개발 서버를 실행해서 브라우저를 확인해보면 똑같이 Mockup API를 받아오는 것을 확인할 수 있다.
더미 데이터를 따로 json파일로 관리하여 Mockup API 데이터를 쉽게 확장할 수 있다.
실제 API 연동: devServer.proxy
이번에는 api 서버를 로컬환경에서 띄운 다음 Mockup이 아닌 이 서버에 직접 API 요청을 한다고 가정해보자.
프론트엔드 개발 서버의 도메인은 localhost:9000 이라고 하고 데이터를 받아오는 서버의 도메인은 localhost:8080 이라고 했을 때, 위에서 했던 거처럼 API요청을 하면 CORS 에러가 날 것이다.
CORS는 교차 출처 리소스 공유 정책인데 Protocol, Host, Port 이 세개가 동일해야 Same Origin 이라고 판단하고 하나라도 다르면 Cross Origin이라고 한다
웹 생태계에서는 SOP(Same Origin Policy) 정책이 있는데 같은 출처에서만 리소스를 공유할 수 있다는 뜻이다
따라서 프론트엔드 개발 서버의 localhost:9000과 서버의 localhost:8080은 포트가 다르기 때문에 Cross Origin이다. 따라서 리소스를 공유할 수 없는 것이다.
이를 해결하기 위해서는 서버에서 api 응답 헤더에 Access-Control-Allow-Origiin: * 헤더를 추가한 뒤 응답하거나 프론트엔드에서 Proxy처리를 해주면 된다.
웹팩 개발 서버에서는 proxy 속성으로 이를 지원한다.
webpack.config.js
module.exports = {
devServer: {
proxy: {
"/api": "http://localhost:8080", // 프록시
},
},
}개발 서버에 들어온 모든 http 요청 중 /api로 시작되는 것은 http://localhost:8080로 요청한다는 설정이다.
이렇게 웹팩 개발 서버에서 CORS를 처리하여 API를 연동할 수 있다
참고자료: https://webpack.kr/configuration/dev-server/#devserversetupmiddlewares
https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/dashboard
