json-server+Mock API

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

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

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의 결과가 잘 출력되는 모습니다!