MSW 세팅하기

2023.04.11

Overview

• 에디터 리팩토링 진행 중
• 복잡도가 높은 제품을 어떻게 하면 조금 더 읽기 좋은 코드로 작성할 수 있을까 고민 중
• 추상화의 중요성, 함수형 프로그래밍 접근 방식에 대해 학습하고 있음
• 취미 목적의 독서 모임을 시작함

Next.js 환경에서 MSW 세팅

Vercel의 MSW 예제를 참고하는 것이 도움이 됨.

// _app.tsx
const MSWServerInit = async () => {
  if (typeof window !== 'undefined') return
  const { server } = await import('@/mocks/server')
  server.listen()
}

const MSWClientInit = async () => {
  if (typeof window === 'undefined') return
  const { worker } = await import('@/mocks/browser')
  worker.start()
}

if (isTest()) MSWServerInit()
if (isTest() || isDev()) MSWClientInit()

useEffectOnce 커스텀 훅

React 18의 StrictMode에서는 빈 의존성배열의 useEffect가 개발 환경에서 두 번 실행됨. 이를 해결하기 위한 유틸 훅 작성.

import { EffectCallback, useEffect, useRef } from 'react'

const useEffectOnce = (callback: EffectCallback) => {
  const effectCalled = useRef(false)
  useEffect(() => {
    if (!effectCalled.current) {
      callback()
      effectCalled.current = true
    }
  }, [])
}

export default useEffectOnce

유틸성 커스텀 훅의 가치를 재평가하는 계기가 되었다.