Mock API 사용법

프론트엔드/백엔드 동시 개발을 위해 API를 확정지었더라도, 백엔드가 API 개발을 마쳐야만 프론트엔드가 실제 API를 바탕으로 화면을 만들 수 있다는 단점이 있습니다.

• 이를 극복하기 위해, 현업에서도 많이 사용하는 Mock API 기법을 소개합니다.

• postman 활용, 서버리스 개발 등 많은 방법이 있지만 오늘 저희는 react의 public folder와 .josn 파일을 사용 해 보겠습니다.

첫번쨰 예시 - 전체 게시물 불러오기

• public/getTestData.json

[
  {
    "userId": "hoholily",
    "comment": "Mock Data 뿌셔뿌셔🔥🔥🔥"
  },
  {
    "userId": "wewe",
    "comment": "포스트 정보? 오오오!🏝🏝🏝🏝"
  },
  {
    "userId": "dana",
    "comment": "오오오 들어온다 나의 소중한 데이터~~👀"
  }
]

• public 폴더에있는 json 데이터는 fetch 함수로 불러올수 있습니다.

fetch("http://localhost:3000/getTestData.json", {
        method: "GET",
      })
        .then((res) => res.json())
        .then((data) => {
          console.log(data.result)
        });

• 지금은 그냥 getTestData로 요청을 보내고 있지만 추후에 서버 주소만 쏙! 갈아 껴줄수 있게 백엔드 개발자가 제공해준 rest Api로 요청 경로를 변경해 볼까요?

• public 폴더에서 api라는 폴더를 하나 추가하고 getTestData.josn 파일의 이름을 posts라고 변경해보겠습니다.

fetch("http://localhost:3000/api/posts.json", {
        method: "GET",
      })
        .then((res) => res.json())
        .then((data) => {
          /**
           * 선택 가능한 작업
           * 1. setPosts(data.result)
           * 2. dispatch(setPostList(data.result))
           *  etc...
           */
          console.log(data.result);
        });
    }

• 서버 api가 준비된다면 아래와 같이 서버 주소만 넣어주고 .json 부분만 지워주면 되겠죠?

http://localhost:3000/api/posts.json —> http://myBackend/api/posts

두번째 예시 - 로그인

• 이번에는 로그인 mock api를 만들어 볼게요!
• 이번에도 요청 경로가 되는 폴더를 만들고 dummy data를 넣어볼게요
• 저의 백엔드 개발자는 login 요청을 위해서

[http://myBackend](http://localhost:3000/api/posts.json)/auth/login

과같은 restApi를 만들었다고 하네요.

• 여기에 맞게 public 폴더 아래 auth 폴더를 만들고 login.json을 만들어 볼까요?

public/auth/login.json

{
  "ok": true,
  "result": {
    "user": {
      "token": "aivijajinewjidjads",
      "name": "김항해"
    }
  }
}

이제 컴포넌트에서 로그인 요청 핸들러를 만들어 볼까요?

로그인 함수
const login = () => {
    if ((username, password)) {
      fetch("http://localhost:3000/auth/login.json", {
        method: "GET", // 실제 서버 요청은 POST 요청이겠죠?
      })
        .then((res) => res.json())
        .then((data) => {
					if(data.result.ok){
						 /**
           * 선택 가능한 작업
           * 1. localStorage.setItem("token", data.result.user.token)
           * 2. dispatch(setPostList(data))
           *  etc...
           */
					}
          console.log(data.result);
        });
    }
  };