json-server를 모의 서버로 사용

개요

서버와 상호 작용하는 연습을 위해 json-server를 모의 서버로 사용하는 방법을 살펴보겠습니다. 또한 fetch를 사용하여 GET 및 POST 요청을 모두 수행할 것입니다. 시작하기 전에 데이터를 표시할 준비가 된 index.html 및 index.js 파일이 있는지 확인하십시오. 시작하자!

설치 및 설정

터미널에서 json-server 실행npm install -g json-server을 설치하려면. 그런 다음 터미널에 touch db.json를 입력할 수 있는 db.json이라는 파일을 만듭니다.

모의 데이터

이제 모든 것이 제대로 작동하는지 확인하기 위해 모의 데이터를 db.json에 넣을 것입니다. JSON 파일은 JavaScript 개체 및 배열과 유사하므로 친숙해 보일 것입니다.

{
  "blogs": [
    {
      "title": "title example",
      "content": "content example",
      "author": "Your favorite author",
      "id": 1
    },
    {
      "title": "another title example",
      "content": "more content example",
      "author": "Your friend's favorite author",
      "id": 2
    },
    {
      "title": "title example number 3",
      "content": "even better content",
      "author": "me",
      "id": 3
    }
  ]
}

서버 시작

일부 데이터가 준비되면 터미널에서 json-server --watch db.json를 실행하여 서버를 시작합니다.

다음과 같은 내용이 표시되어야 합니다.

user@user:~/Development/practice-project$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/blogs

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

리소스 [ http://localhost:3000 ] 아래의 링크를 ctr + 클릭하면 브라우저에서 db.json 파일이 열립니다.

다음과 같이 표시됩니다.

이제 서버가 실행 중이고 사용할 준비가 되었습니다!

가져오기, 서버에서 데이터를 가져오는 방법

JavaScript에서 서버에 액세스하기 위해 가져오기를 사용할 것입니다. 상당히 간단합니다. 아래에서 볼 수 있듯이 우리는 서버의 URL에서 가져오기를 호출합니다. 이는 약속을 반환합니다. 우리는 이것을 HTTP.then를 반환하는 약속response이라고 부릅니다. 이제 서버의 HTTP 응답을 사용할 수 있는 것으로 변경하기 위해 다른 호출.then ) 그리고 그것은 우리에게 JavaScript 객체에 익숙한 것을 제공합니다. data 가 있으면 원하는 대로 할 수 있고 표시할 가능성이 높지만 지금은 작동하는지 확인하고 콘솔에 기록할 것입니다.
index.js가 다음과 같이 index.html에 연결되어 있는지 확인하세요.

<body>
  <script src="index.js"></script>
</body>

이 코드를 index.js 파일에 넣고 브라우저에서 index.html을 엽니다.

fetch("http://localhost:3000/blogs")
.then(response=>response.json())
.then(data=> console.log(data))

그러면 개발자 도구의 콘솔에 아래 이미지와 같은 내용이 표시됩니다.

효과가있다! 이제 할 수 있는 일은 displayBlog()와 같은 함수를 작성하고 다음과 같이 데이터에 대한 함수를 호출하는 것입니다.

fetch("http://localhost:3000/blogs")
.then(response=>response.json())
.then(data=> displayBlog(data))

json-server에 데이터를 POST하는 방법

이제 서버에 GET 요청을 했고 서버에서 데이터를 표시할 수 있습니다. 이제 서버로 데이터를 보내는 방법을 알아보겠습니다. 우리는 가져오기를 다시 사용할 것이지만 이번에는 조금 더 있습니다. 가져오기를 위한 구성도 포함해야 합니다.

구성 가져오기

가져오기 구성에는 다양한 옵션이 있지만 우리의 목적에는 method , headers 및 body 세 가지만 필요합니다.
method는 "POST"가 될 요청 유형입니다. headers는 가져오기에 우리가 어떤 유형의 데이터와 상호 작용할 것인지 알려주고 있으며, 우리에게는 "Content-Type":"application/json"이 됩니다. 마지막으로 body는 서버에 게시할 데이터입니다.

const newBlog = {title:"Learning JavaScirpt", content:"I learned about objects today!", author:"Java"}

const fetchPostConfig = {
  method:"POST",
  headers:{
    "Content-Type": "application/json",
    "Accept": "appication/json"
  },
  body:JSON.stringify(newBlog)
}

fetch("http://localhost:3000/blogs", fetchPostConfig)
.then(response => response.json())
.then(data => console.log(data))

물론 변수에 저장하는 대신 가져오기에 구성을 직접 작성할 수도 있습니다. POST 요청을 서버에 보낸 후 서버는 GET 요청과 동일하게 처리하는 응답을 다시 보냅니다. 우리는 우리가 보낸 것을 정확히 받아야 합니다.

그리고 우리를 위해 id를 추가했습니다! 완벽한! 그리고 그게 다야!

이 게시물을 즐겼기를 바랍니다. 이제 밖으로 나가서 서버와 상호 작용하는 방법을 배우십시오!

`

Reference

이 문제에 관하여(json-server를 모의 서버로 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/leepzig/using-json-server-as-a-mock-server-25jf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)