Todo Todos / MSW 기본세팅

Todo 페이지 내부의 Todo들을 GET하고 POST할 수 있는 섹션을 만들고 있다.

👗 Todo page

일단은 작성한 페이지 폼 !

import React, { useEffect, useState } from "react";

import ATodo from "../ATodo/ATodo.tsx";

import { S } from "./TodoBox";

const TodoBox = () => {
  // 하나하나의 Todo와 Todo들이 모인 배열 Todos
  const [todo, setTodo] = useState<string>("");
  const [todos, setTodos] = useState<string[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  useEffect(() => {
    fetch("/todos")
      .then((response) => response.json())
      .then((result) => {
        setTodos(result);
        setLoading(false);
      });
  }, []);

  // 새로운 Todo 추가를 위한 post 통신이 이루어지는 부분
  // FormEvent type check!
  const postTodos = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    fetch("/todos", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify({ todo }),
    }).then(() => {
      fetch("/todos")
        .then((response) => response.json())
        .then((result) => {
          console.log(result);
          setTodo("");
          setTodos(result);
          setLoading(false);
        });
    });
  };

  if (!todos) return null;

  return (
    <S.TodoBox>
      <S.UpperBox>
        <S.NumOfTask>Number of Tasks</S.NumOfTask>
        <S.MemoBox>
    	// 추가 예정인 하루에 대한 메모 !
          {/* <S.MemoTitle>Memo for Today? </S.MemoTitle> */}
        </S.MemoBox>
      </S.UpperBox>
      <S.Tasks>
        // 저장된 Todos가 렌더링되는 부분
        {todos.map((todo) => {
          return <li key={todo}>{todo}</li>;
        })}
      </S.Tasks>
		
	  // 새로운 Todo 저장을 위한 form
      <form onSubmit={postTodos}>
        <S.TaskInput
          type="text"
          name="todo"
          placeholder="new task! ✨"
          disabled={loading}
          value={todo}
          onChange={({ target: { value } }) => setTodo(value)}
        />

        <S.Test disabled={!todo}>test button</S.Test>
      </form>
    </S.TodoBox>
  );
};

export default TodoBox;

여기까지는 그래도 잘 작성해 나갔는데( msw 통신을 위한 부분은 좀 헤맸다.. 🥲 ),

❓MSW

🥲 MSW( Mock Service Worker )
msw는 실제 request를 가로채기위해서 service worker를 사용하는 api mocking 라이브러리

이번 작업은 혼자하는 토이프로젝트이지만, msw를 이용해서 실제로 통신이 이루어지는 것 처럼 작업해보려했다.

'mock'은 가짜라는 뜻으로 실제 api를 작동시키지 않아도 가짜 값을 이용할 수 있도록 하는 것이고,
'service worker'는 프록시 서버 역할을 하는 api 이다.
즉, 실제 서버를 작업하지 않고 서버가 있는 것 처럼 작업할 수 있는 방법이다.

현업에서도 애자일한 환경 속에서, 무작정 백엔드의 api를 기다리는 것이 아니라
프론트엔드에서 mock 작업을 통해 개발을 진행하기 위해 사용된다고 들었다.

MSW를 활용하면 브라우저가 보내는 요청을 Service Worker에서 받는다.
Service Worker가 해당 요청을 가로채서 서버로 보내지 않고, MSW 라이브러리의 핸들러와 매칭한다.
MSW가 등록된 핸들러에서 모의 응답(mocked response)를 Service Worker에 전달하고
이 모의 응답이 브라우저에게 전달되는 방식으로 작동한다.

✔️ msw 설치

npm install msw --save-dev

✔️ 브라우저에 service worker 등록

npx msw init public/ --save

서비스 워커 등록을 위한 파일을 public 폴더에 추가하는 명령어이다.
react 프로젝트의 경우 public이 기본적으로 세팅되어 있다.

❗️src/mocks

✔️ worker.ts

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

export const worker = setupWorker(...handlers);

✔️ server.ts

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

export const server = setupServer(...handlers);

✔️ index.tsx에 추가

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

이렇게 세팅까지는 비교적 수월하게 했다.

✅ from "msw"
import { setupWorker } from "msw/browser";
import { setupServer } from "msw/node";
검색했을 때 이 부분이 다른 사람들은 "msw" 만 있었다.
그런데 오류가 떠서 공식 문서를 확인해보니 변경된 거 !