[Json-server] 프론트에서 mock 서버 만들기

개요

웹 프로젝트를 하고 있는데 아직 서버 API가 없어서 mock 서버를 파기로 했다..! 

json server는 그냥 npm으로 설치하면 돼서 프론트엔드가 테스트용으로 서버를 팔 때 간단하고 쉽게 만들 수가 있다.

---

Json Server 설치 & 실행

1. json server 설치

npm install -g json-server

2. 폴더 생성

mkdir mockserver //mockserver 폴더 생성
cd mockserver //mockserver로 가기

mkdir db //mockserver 안에 db 폴더 생성

폴더를 생성해주고 db 폴더 안에 db.json 파일을 하나 추가해주면  된다.

 

3. Mock Json 

db.json안에 원하는 데이터를 넣어준다.

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "profile": {
    "input1": "1",
    "input2": "2",
    "input3": "2",
    "input4": "2"
  },
  "board": {
    "board": "hhh"
  }
}

 

4. 서버 실행

서버를 실행해준다!

그냥 json-server watch db.json만 쳐줘도 되지만 앞 포트들에 React App들이 쌓여있어서 넉넉하게  3010번 포트로 열어주었다.

json-server watch db.json --port 3010

아래처럼 뜨면 성공한 것이다!

Resources가 세 개 뜨는 이유는 위에서 posts, comments, profile 이렇게 세 개의 자원을 만들었기 때문이다.

우선은 저 Home으로 들어가면 아래 사진처럼 뜬다.

각각의 Resources를 들어가면 아래 사진처럼 뜬다.

그럼 이제 fetch함수로 데이터들을 왔다갔다 하면 된다..!

 

5. Fetch함수 Method

해당 API에 GET(조회), POST(등록), PUT(수정), DELETE(삭제)를 해주면 된다.