[오류 해결] 첫 렌더링 시 msw 404 에러 해결하기

문제

매번 첫 렌더링 시에는 msw의 모킹 API를 찾지 못하는 404에러가 발생했다 ㅠㅠ

근데 또 새로고침을 하면

API를 잘 받아오는 오류가 발생했다 ㅠㅠ

---

첫번째 시도 - 공식 문서 확인하기

보통 오타나 철자를 빼먹는 실수로 인해 오류가 많이 생겨서 내가 빼먹은 게 있나 공식 문서를 확인했다.

import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'
 
async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
 
  const { worker } = await import('./mocks/browser')
 
  // `worker.start()` returns a Promise that resolves
  // once the Service Worker is up and ready to intercept requests.
  return worker.start()
}
 
enableMocking().then(() => {
  ReactDOM.render(<App />, rootElement)
})

worker.start()를 호출하는 부분으로 이 부분을 먼저 실행하고 앱을 렌더링하라고 한다.

async function mountApp() {
  if (process.env.NODE_ENV === 'development') {
     worker.start();
  }

  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
}

mountApp();

나의 코드에서도 worker.start()를 먼저 호출 해준 후 앱을 렌더링 해주고 있었기 때문에 여기서는 문제가 없다고 생각했다 ㅜㅜ

---

2번째 시도 - 구글링

다행히 나와 같은 문제를 겪은 사람들이 있었고 문제를 해결 할수 있었다.

1번째 시도 때 내가 잘못 생각했던 것으로 나는 worker.start()를 먼저 호출해준 후 앱을 렌더링하고 있다고 생각했는데 알고 보니 그렇지 못했고 동시에 작업이 진행되고 있어 발생한 문제였다 ㅜㅜ

 if (process.env.NODE_ENV === 'development') {
     await worker.start(); //<- 이 부분에 await 추가
  }

---

🤔후기

일단 매번 신경 쓰였던 문제였는데 해결해서
기분이 홀가분하다 ㅎ
나는 결국 구글링을 통해 문제를 해결했지만 내가 참고한 블로그에서는 공식 문서를 분석해서 문제를 해결하셨는데
정말 대단하신 거 같다 👍👍
나도 나름 공식 문서를 봤지만 끝내 해결하지 못한 게 아쉽다 ㅠㅠ 하지만 시작이 반이라고 이제부터 구글링도 좋지만 공식 문서를 찾아보며 문제를 파악하는 습관을 가져야겠다.

---

📜참고

• https://mswjs.io/docs/integrations/browser
• https://hanaindec.tistory.com/entry/msw-404-Not-Found-from-service-worker-%EC%98%A4%EB%A5%98