feat: msw 기반으로 next.js에서 mock service worker 추가

[alstn2468]

진행한 것

• msw 이용해서 백엔드 API 모킹 진행
• 공통으로 사용할 수 있도록 packages 폴더로 이동 시도

문제점

첫 렌더링시 서비스 워커 등록이 되지 않아 네트워크 오류가 발생하는 문제가 있음
그것을 useEffect와 shouldRender 상태를 이용해 해결함
하지만 렌더링 자체를 막음으로써 msw기반의 상태에서 Suspense를 이용하기 어려워보임 (초기 렌더링의 경우에 해당할 듯)

• Before

if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
  require('@weekly/msw');
}

function App() {
// ...
}

• After

function App(props: AppProps) {
  const { Component, pageProps } = props;
  const [shouldRender, setShouldRender] = useState(
    !process.env.NEXT_PUBLIC_API_MOCKING,
  );
  useEffect(() => {
    async function init() {
      const { initMocks } = await import('@weekly/msw');
      await initMocks();
      setShouldRender(true);
    }
    if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
      init();
    }
  }, []);
  if (!shouldRender) {
    return null;
  }
  // ...

연결 이슈

• Dynamic "import" creates a race condition with initial load requests vercel/next.js#43284
• MSW + NextJS 12+ : doesn't intercept first request, waitUntilReady not working mswjs/msw#1474
• With-msw example, If api call was made inside a useEffect block in first render, msw would be initialized after the api call, resulting in 404 response. vercel/next.js#39695

top-level-await관련 babel 설정 넣어서 initMocks를 기다리게 하는 방법이 있는 것 같았지만 axios 관련 버그가 또 터지네.
서버 개발 전에 잠깐 쓰는거니 그냥 그대로 쓰는 것도 좋을듯~!

[zi-gae]

목서버 보다 api 가 먼저 나올 것 같은건 기분탓일까..

[zi-gae]

top-level-await관련 babel 설정 넣어서 initMocks를 기다리게 하는 방법이 있는 것 같았지만 axios 관련 버그가 또 터지네.
서버 개발 전에 잠깐 쓰는거니 그냥 그대로 쓰는 것도 좋을듯~!

axios 걷어내~ fetch 면 충분하지

[alstn2468]

@zi-gae 인증관련 인터셉터 쓸일 있을 것 같아서 axios 걷는건 반려!
API가 더 먼저 나올거 같기도해 ㅋㅋㅋㅋㅋ

[9yujin]

처음 써보는데 열씨미 공부해보겠습니다 헤헤