백엔드 API가 나오지 않았을 경우 프론트엔드는 어떻게 대응해야 할까 ?

API 모킹 방법 

프론트엔드 개발자라면 백엔드에서 API가 나오지 않았다면 프론트엔드에서는 어떤식으로 대응해야 할까? 라는 고민을 하게 됩니다.

어떤식으로 대응을 할 수 있을 지 방법에 관한 정리 내용 입니다. 

근데 이 API가 나오지 않았다는 가정이 두가지로 나뉘게 됩니다.

1. 진짜로 백엔드 개발자가 API를 만들기 전 

2. API는 만들어 졌지만 코드가 리뷰 대기 상태라 머지가 되지 않음

우선 아래는 실제 API가 만들어 지기 전 이라는 가정하에 예시 입니다.

1. 실제 Mock Data 만들기 

API Mocking이 아닌 프론트엔드에서 더미데이터를 만들어서 넣어주는 방식 입니다.

const MOCK_DATA = [
  { id: 1, name: "안녕" },
  { id: 2, name: "하이" },
  { id: 3, name: "니하오" },
];

 

MOCK_DATA를 만들고 이 데이터를 UI 화면에 뿌려줍니다. 
그러면 백엔드 API가 없어도 미리 데이터를 넣어서 UI를 그릴 수 있습니다.

 

function App() {
  return (
    <div className="App">
      {MOCK_DATA.map(({ id, name }) => {
        return (
          <div key={id}>
            <p>{name}</p>
          </div>
        );
      })}
    </div>
  );
}

장점

- 특별한 세팅 없이 편하게 데이터 모킹이 가능하다.

 

단점

- get 요청을 위한 모킹 방법으로 주로 쓰이면 post,put 요청은 모킹하기 어렵다.

 

2.  API 모킹 라이브러리 사용하기

- Mocking 라이브러리를 사용하면 1번 방식의 더미데이터를 한번 더 감싸서
실제 API 통신을 하는 것 처럼 동작하게 하는 것 입니다.

msw 예시 

설정 방법은 아래 블로그를 보고 하시면 됩니다.

https://www.daleseo.com/mock-service-worker/#%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%9B%8C%EC%BB%A4-%EC%83%9D%EC%84%B1

MSW로 백엔드 API 모킹하기

 

1번 방법처럼 똑같이 MOCK_DATA가 필요합니다.
그리고 이 MOCK_DATA를 그냥 import해서 쓰는 방식이 아닌 msw 라이브러리로 한번 감싸서 응답을 내려줍니다.

import { rest } from "msw";

const MOCK_DATA = [
  {
    id: 1,
    name: "안녕"
  },
  {
    id: 2,
    name: "니하오"
  },
  {
    id: 3,
    name: "니하오"
  }
];

export const handlers = [
  // 할일 목록
  rest.get("/todos", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(MOCK_DATA));
  })
];

 

이제 UI 단에서는 위에 코드를 불러다가 화면에 뿌려주면 됩니다.

 

function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch("/todos")
      .then((res) => res.json())
      .then((data) => {
        setTodos(data);
      });
  }, []);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <div>
        {todos.map(({ name, id }) => (
          <li key={id}>{name}</li>
        ))}
      </div>
    </div>
  );
}

이제 1번과 동일한 UI를 얻을 수 있습니다.

 

장점 

- 실제 패칭 라이브 러리를 사용해서 모킹 할 수 있다.

- get요청 뿐만 아니라 post, delete도 모킹할 수 있다.

 

단점

- 세팅하기 귀찮다.

- 라이브러리 사용법을 익혀야 한다.

- 서버에서 응답 데이터 뿐만 아니라 status 코드값도 생각해야 한다.

 

3.  react-query 사용하기 

요새는 프론트엔드에서 react-query를 같이 사용하는 경우가 많은데 현재 일하고 있는 회사의 경우에도 react-query를 사용합니다.

react-query에 queryFunction에 모킹 데이터를 넣어서 그 값을 받아서 처리할 수 있는 방법이 있습니다.

 

이 방법도 동일하게 MOCK_DATA를 준비해줍니다.

const MOCK_DATA = [
  { id: 1, name: "안녕" },
  { id: 2, name: "하이" },
  { id: 3, name: "니하오" },
];

 

그리고 아래처럼 쿼리 함수에 Promise resolve 부분에 MOCK_DATA를 넣어줍니다.

 

const todosStatus = useQuery(["/todos"], {
    queryFn: () => Promise.resolve(MOCK_DATA),
  });

 

그러면 이제 똑같이 동일한 UI를 그릴 수 있습니다.

 

function App() {
  const todosStatus = useQuery(["/todos"], {
    queryFn: () => Promise.resolve(MOCK_DATA),
  });

  return (
    <div className="App">
      {todosStatus?.data?.map(({ id, name }) => {
        return (
          <div key={id}>
            <p>{name}</p>
          </div>
        );
      })}
    </div>
  );
}

 

또한 이 방법을 사용하면 미리 react-quert 코드 형식을 지정해 놓고 나중에 쿼리 함수만 실제 API 함수 자리에 넣으면 다른 코드를 바꾸지 않고 모든 코드를 그대로 재 사용하면서 편하게 실제 데이터로 바꿀 수 있습니다.

 

function App() {
  const todosStatus = useQuery(["/todos"], {
    queryFn: () => Promise.resolve(MOCK_DATA),
  });

  useEffect(() => {
    if (todosStatus.status === "success") {
      // 성공일 때 로직
    }

    if (todosStatus.status === "error") {
      // 에러일 때 로직
    }
  }, [todosStatus.status]);

  if (todosStatus.isLoading) return <p>로딩컴포넌트</p>;

  return (
    <div className="App">
      {todosStatus?.data?.map(({ id, name }) => {
        return (
          <div key={id}>
            <p>{name}</p>
          </div>
        );
      })}
    </div>
  );
}

장점 

- 리액트 쿼리 코드를 미리 작성해 두고 나중에 쿼리 함수만 바꿔서 쓸 수 있다.

 

단점

- 리액트 쿼리를 쓰지 않는 곳이라면 쓸 수 없는 방법이다.

---

생각 정리 

 

저 같은 경우는 리액트 쿼리를 현재 사용하고 있기 때문에 3번 방식이 제일 좋지만 회사에서는 코드 제너레이터를 쓰기 때문에 알아서 만들어 주는 쿼리들을 직접 작성하는게 불필요하다고 판단해서 1번 방식을 사용하고 있습니다. 

 

API 모킹이 개발할 때 도움이 되는 건 맞지만 어쨋든 API를 모킹해서 UI를 테스트 한다는건 미리 서버 스펙을 예상해서 그 화면을 그리는 건데 실제 개발을 하다보면 기획이 바뀌기도 하고 백엔드 데이터가 추가,삭제 되기도 하기 때문에 또 다시 프론트 엔드에서 스펙을 그에 맞춰서 바꿔야 하기 때문에 되도록 모킹을 하려고 하지 않고 한다 하더라도 1번 방식인 MOCK_DATA만 만들어서 사용하는 식으로 개발하고 있습니다.