nextjs 14 + msw: useEffect 내에서 호출하면 초기화 되기전에 호출되는 문제

// browser.ts

import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

const worker = setupWorker(...handlers);

export default worker;

// http.ts
import { createMiddleware } from '@mswjs/http-middleware';
import cors from 'cors';
import express from 'express';
import { handlers } from './handlers';

const app = express();
const port = 9090;

app.use(
  cors({
    origin: ['http://localhost:3000'],
    optionsSuccessStatus: 200,
    credentials: true,
  }),
);
app.use(express.json());
app.use(createMiddleware(...handlers));

app.listen(port, () => console.log(`Mock server is ruuning on port: ${port}`));

// MSWComponent.tsx
'use client';

import { useEffect } from 'react';

export const MSWComponent = () => {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      require('@/mocks/browser');
    }
  }, []);

  return null;
};

// handler.ts
import { http, HttpResponse } from 'msw';

const CalendarData = [
  {
    id: 0,
    date: '2024-03-01',
    memo: [
      {
        id: 0,
        text: '식사',
      },
      {
        id: 1,
        text: '운동',
      },
    ],
  },
  {
    id: 1,
    date: '2024-03-02',
    memo: [
      {
        id: 0,
        text: '연차',
      },
      {
        id: 1,
        text: '회의',
      },
    ],
  },
  {
    id: 2,
    date: '2024-03-03',
    reservation: 0,
    canceled: 0,
    noShow: 0,
    memo: [],
  },
  {
    id: 3,
    date: '2024-03-04',
    memo: [
      {
        id: 0,
        text: '공부',
      },
      {
        id: 1,
        text: '휴식',
      },
    ],
  },
  {
    id: 4,
    date: '2024-03-05',
    memo: [],
  },
  {
    id: 30,
    date: '2024-03-31',
    memo: [
      {
        id: 0,
        text: '파티',
      },
      {
        id: 1,
        text: '운동',
      },
    ],
  },
];

export const handlers = [
  http.get('/api/calendar', ({}) => {
    return HttpResponse.json(CalendarData);
  }),
  http.get('https://example.com/api', ({}) => {
    return HttpResponse.json(CalendarData);
  }),
];

프로젝트에서는 해당 방법 채택했음

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까? | 카카오엔터테인먼트 FE 기술블로그

카카오페이지가 적용한 BFF 구조를 소개합니다.

https://fe-developers.kakaoent.com/2022/220310-kakaopage-bff/

NEXT_PUBLIC_API_BASE_URL='http://localhost:9090/api'
NEXT_PUBLIC_API_MOCKING='enabled'

NEXT_PUBLIC_API_ROUTER_MOCK_SERVER=false  # 유사시 nextjs api router 모킹 사용

NEXT_PUBLIC_API_BASE_URL='https:/your-production-url.com'

import axios from 'axios';

const useMockServer = process.env.NEXT_PUBLIC_API_ROUTER_MOCK_SERVER === 'true';
const baseURL = useMockServer ? 'http://localhost:3000' : process.env.NEXT_PUBLIC_API_BASE_URL;

export const axiosInstance = axios.create({
  baseURL,
});

React

• 컴퓨터 전역 환경 변수

• .env.local 파일

• .env.${NODE_ENV}.local 파일

• .env.${NODE_ENV} 파일

• .env 파일

• REACT_APP_으로 시작하는 환경 변수

Next.js env(환경 변수) 정리

환경 변수

https://velog.io/@milkboy2564/Next.js-env환경-변수-정리