가짜 서버(json-server) 사용하기

서버 : 프론트엔드에서 정보 요청, 정보 전달 시 DB에서 조회하거나 저장 역할

가짜 서버가 필요한 이유 : 백엔드 API가 준비가 되어있지 않아도 스스로 동작 테스트 가능

npm install -g json-server

Json-server 실행

1. db.json 생성(가짜 DB 역할)
   id값은 필수이다

{
  "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }],
  "comments": [{ "id": 1, "body": "some comment", "postId": 1 }],
  "profile": { "name": "typicode" }
}

2. json-server --watch db.json

  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

3001로 port 번호 설정

json-server --watch data.json --port 3001

3. read 함수 작성

      function getData() {
        //조회 get 요청
        fetch("http://localhost:3000/posts")
          .then((response) => response.json())
          .then((json) => console.log(json));
      }

4. insert 함수 작성

//삽입 post 요청
      function postData() {
        const newData = {
          name: "HHHHH",
          company: "DCU",
          email: "HHHHH@cu.ac.kr",
          phone: "010-0000-0000",
          address: "Daecu",
        };
        fetch("http://localhost:3000/myData", {
          method: "POST",
          body: JSON.stringify(newData),
          headers: {
            "content-type": "application/json; charset=UTF-8",
          },
        })
          .then((response) => response.json())
          .then((json) => console.log(json));
      }

5. 수정 함수 작성

      //수정 put 요청
      function putData() {
        const newData = {
          name: "HHHHH",
          company: "DCU",
          email: "HHHHH@cu.ac.kr",
          phone: "010-0000-0000",
          address: "Daecu",
        };
        fetch("http://localhost:3000/myData/(!아이디값!)", {
          method: "PUT",
          body: JSON.stringify(newData),
          headers: {
            "content-type": "application/json; charset=UTF-8",
          },
        })
          .then((response) => response.json())
          .then((json) => console.log(json));
      }

6. 삭제 함수 작성

      //삭제 DELETE 요청
      function deleteData() {
        fetch("http://localhost:3000/myData/63591480d5ac0ddd89509078", {
          method: "DELETE",
        })
          .then((response) => response.json())
          .then((json) => console.log(json));
      }