[msw] 첫 랜더링시는 404, 이후 200이 뜨는 에러

 

문제

 
처음 화면을 랜더링하면 404에러가 뜨고 이후에 무언가를 수정하고 요청하게되면 그때부터는 200이 떴다.
왜그러지 왜그러지 싶은데 콘솔에 찍히는
Mocking enabled.가 요청 이후에 찍히는게 좀 이상했다.
 
404에 대해서 구글링을 해봤는데 원하는 해결책이 없었다.
그래서 msw문서를 다시 찾아보다가 카테고리중 브라우저 환경에서 세팅하는게 있었다. 
 

이 카테고리에서 Browser intergration의 예시가 리액트로 되어있었고 최상위 컴포넌트 랜더를 할 때 순서가 잘못되어 있는걸 알았다.
 
 

문제 원인

import React from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './app'
import { worker } from './app/__mock__'

if (process.env.NODE_ENV === 'development') {
  worker.start()
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)

 
moking이 완료된 후에 랜더를 하는게 아니라서 처음에는 404가 떴던 것이다.
 

해결

import React from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './app'

async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
  const { worker } = await import('./app/__mock__')
  return worker.start()
}

const root = createRoot(document.getElementById('root'))
enableMocking().then(() => {
  root.render(<App />)
})

위의 코드로 수정을 해주었다. (msw사이트 예시랑 똑같다)
서비스 워커가 가동되어 요청을 가로챌 준비가 되면 화면을 랜더하기 때문에 처음 오류상황과 다른 콘솔 순서가 뜨고
처음 요청부터 200이 뜬다.
 

 
 
 

---

참고 
- https://mswjs.io/docs/integrations/browser