json-server+Mock API

리액트 심화/Mock API + HTTP 요청

json-server+Mock API

덕구공 2022. 6. 9. 06:33

Mocking API?

mocking api는 실제로 REST API가 구축되어 있지 않더라도, 있는 것처럼 테스트 환경을 만들어주는 것이다.
실제로 뭔가 저장하진 않고 흉내만 내는 거니까 프로덕션 레벨에서 사용할 수 없다.
→ API 준비가 덜 된 상태로 개발 진행을 한다거나 공부할 때 쓰기 좋다.

한계점

텍스트 데이터와 관련된 프로토타입을 만들 때만 사용가능하다
인증을 기반으로 API 영역에 한계를 설정할 수 없다.
Mock API는 실서버 환경에서는 사용할 수 없으며, 사용되어져서는 안된다

Mock API 설정하기

Mock API를 사용할 폴더에서 프로젝트를 초기화해서 package.json 파일을 만들자

yarn init -y

패키지 설치하기

yarn add json-server

DB로 쓸 json 파일을 하나 만들자!. 나는 db.json으로 만들었다

db.json

사람들의 id와 나이, 키가 저장된 json 파일이다
- id 값은 꼭 넣어주자!! 각각의 데이터를 구분하기 위해!
여기서 people은 엔드포인트이다. HTTP 요청을 할 때 localhost:5008/people로 요청할 수 있다
- 만약 post 요청으로 데이터를 추가할 때 id는 빼도 된다!! 자동으로 생성됨!!

{
    "people": [
        {
            "id": 1,
            "age": 25,
            "height": 179
        },
        {
            "id": 2,
            "age": 27,
            "height": 181
        },
        {
            "id": 3,
            "age": 19,
            "height": 190
        },
        {
            "id": 4,
            "age": 35,
            "height": 171
        },
        {
            "id": 5,
            "age": 22,
            "height": 179
        }
    ]
}

json-server를 실행해보자

# --watch: 보고있을 db를 지정한다
# --port: port를 지정해준다 지정하지 않으면 디폴트 값은 3000번 포트이다
yarn json-server --watch db.json --port 5008

매번 실행 명령어를 입력하기 귀찮으면 package.json에 실행 명령어를 추가하자

"scripts": {
  "server-start": "yarn json-server --watch db.json --port 5008"
}

위와 같이 설정하면 아래 명령어로 실행할 수 있다

yarn server-start

서버를 실행하면 Resources와 Home의 url이 나온다.

Resource 주소로 접속하면 db.json 파일의 데이터를 json 형식으로 볼 수 있다.

Home 주소로 접속하면 Resource 탭에서 json 데이터를 볼 수 있고 Documentation 탭에서 사용설명서를 볼 수 있다.

사용 설명서 ↓↓↓↓

https://github.com/typicode/json-server

Postman으로 데이터 조작해보기

Mock api는 별도의 api 없이 HTTP 요청으로 DB의 데이터를 CRUD할 수 있다!
예를 들어 데이터를 가져오라는 api가 없는데도 엔트리 포인트에 GET 요청을 하면 전체 데이터를 가져올 수 있다!

데이터 전체 가져오기

엔트리 포인트에 get 요청을 보내면 엔트리 포인트에 있는 데이터를 모두 리턴한다

GET localhost:5008/people

데이터 일부 가져오기

엔트리 포인트에 URI 파라미터로 데이터의 id 값을 넣거나 쿼리 파라미터로 데이터의 키 값을 넣어서 데이터를 하나 가져올 수 있다!!

GET localhost:5008/people/4
GET localhost:5008/people?id=4

++ 페이지네이션

페이지네이션 기능도 가능하다!!
쿼리 파라미터로 _page 속성으로 데이터를 가져올 수 있는데 페이지 하나당 기본적으로 10개의 데이터를 리턴한다.
**만약 뒤에 _limit 파라미터를 넘기면 한 페이지에 몇개 가져올 수 있는지 지정할 수 있다!**

// 첫번재 페이지에 기본 10개 가져오기
GET localhost:5008/people?_page=1

// 20개 가져오기
GET localhost:5008/people?_page=2&_limit=20

데이터 생성하기

엔트리 포인트에 POST 요청을 사용해서 HTTP Body에 id 값을 제외한 key, value 쌍을 json 형식으로 넣어주면 자동으로 엔트리 포인트에 데이터가 생성된다!
- id 값은 자동으로 생성되며 만약 이미 있는 id 값을 넣어주면 오류가 발생한다!
반드시 Header에 Content-Type: application/json을 표시해야 한다!

POST localhost:5008/people

// 삽입할 데이터 - id 제외하기!
{
   "age": 95,
   "height": 164
}

우선 Header 설정을 한 후,

Body에 데이터를 넣어서 요청하자!
응답으로 자동으로 생성된 id와 넣어준 데이터가 합쳐진 데이터가 오는 것을 볼 수 있다!

db.json 파일에 방금 넣어준 데이터가 들어간 것을 볼 수 있다!

데이터 수정하기

PUT 메서드를 이용해서 데이터를 수정할 수 있다!
URI 파라미터로 수정할 데이터의 id를 넣은** 후에 **Header에 Content-Type: application/json을 추가하고 HTTP body에 id를 제외할 수정할 값을 넣어주자!!

PUT localhost:5008/people/2

// 수정할 데이터
{
   "age": 70,
   "height": 777
}

우선 Header에 Content-Type: application/json 추가!

수정할 데이터의 id를 URI 파라미터로 넣고 수정할 데이터를 HTTP Body에 넣어서 요청하기!

데이터가 변경된 것을 볼 수 있다!

데이터 삭제하기

DELETE 메서드를 이용해서 데이터를 삭제할 수 있다
URI 파라미터로 삭제할 데이터의 id를 넣어주면 삭제할 수 있다!!

DELETE localhost:5008/people/3

id가 3인 데이터가 삭제되었다!

리액트에서 Mock API 사용하기

Mock API 프로젝트 실행

Mock API를 작성한 프로젝트 실행

yarn json-server --watch db.json --port 5008

리액트 프로젝트 실행

리액트 프로젝트와 Mock API를 제작한 프로젝트가 각각 다른 프로젝트에 있을 것이므로 다른 명령 프롬프트에 리액트 프로젝트를 실행시킬 것이다

yarn start

리액트 프로젝트에서 HTTP 요청 해보기

json-server에서 불러온 데이터를 리액트 프로젝트에서 콘솔에 출력해보자

import axios from "axios";
import { useEffect } from "react";

const App = () => {
  useEffect(()=>{
    const get_data = async() => {
      const res = await axios.get("http://localhost:5008/people/2");
      console.log(res.data);
    }
    get_data();
  }, []);
  return null;
}

export default App;

리액트 서버에서 요청한 api의 결과가 잘 출력되는 모습니다!