nextjs, redux toolkit 프로젝트에 MSW(Mocking Service Worker)를 적용해보았다.
적용방법은 쉽고 간단해서 빠르게 적용하고 실제 api요청을 가로채어 mock데이터를 response로 넘겨주는 것까지 확인하였다.
다만... 포스팅을 하는 이유는...
component 내 useEffect hook을 사용하여 api 호출 하도록 했는데 msw가 useEffect보다 늦게 실행된다!
한참 애를 먹었지만 간단하게 해결하기로.. 하였다..
_app.tsx
import PropTypes from "prop-types";
import Head from "next/head";
import wrapper from "../store/configureStore";
import React, { FunctionComponent, useEffect, useState } from "react";
import "@cmStyles/index.scss";
const Camping: FunctionComponent<{ Component: any; pageProps: any }> = ({
Component,
pageProps,
}) => {
const [isShowComponent, setIsShowComponent] = useState(false);
useEffect(() => {
if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") {
const worker = import("./mocks/browser");
worker.then((w) =>
w.worker.start().then(() => {
setIsShowComponent(true);
})
);
} else {
setIsShowComponent(true);
}
});
return (
<>
<Head>
<meta charSet="utf-8" />
<title>Camping</title>
</Head>
{isShowComponent && <Component {...pageProps} />}
</>
);
};
Camping.propTypes = {
Component: PropTypes.elementType.isRequired,
};
export default wrapper.withRedux(Camping);msw가 실행되는데 어느정도 시간이 필요했다.
env파일에 mocking값이 enable이면 msw를 시작하고, 콜백을 받아 flag값의 true 세팅을 하였다.
mocking이 필요하지 않을 production이나 특정 환경엔 위의 과정없이 바로 flag값에 true를 주었다.
해결.
뛰어난 적응력과 성실함이 장점인 웹개발자 나상엽입니다.