분류 javascript

JSON 서버로 REST API 생성

컨텐츠 정보

  • 조회 301 (작성일 )

본문

프런트 엔드 개발자의 일반적인 작업은 JSON 형식의 일부 데이터를 프런트 엔드 애플리케이션에 전달하고 모든 것이 예상대로 작동하는지 확인하기 위해 백엔드 REST 서비스를 시뮬레이션 하는 것입니다.


물론 전체 백엔드 서버를 설정할 수 있습니다. Node.js, Express 및 MongoDB를 사용합니다. 그러나 시간이 좀 걸리고 훨씬 간단한 접근 방식이 프런트 엔드 개발 시간을 단축하는 데 도움이 될 수 있습니다.


JSON Server는 CRUD 작업으로 REST API를 매우 빠르게 설정하는 데 도움이 되는 간단한 프로젝트입니다. 프로젝트 웹 사이트는 https://github.com/typicode/json-server에서 찾을 수 있습니다.


다음에서는 JSON 서버를 설정하고 샘플 REST API를 게시하는 방법을 알아 봅니다. 또한 다른 라이브러리인 Faker.js를 사용하여 JSON 서버를 사용하여 노출되는 REST API에 대한 가짜 데이터를 생성하는 방법을 볼 수 있습니다.


JSON 서버 설치 


JSON 서버는 NPM 패키지로 제공됩니다. Node.js 패키지 관리자를 사용하여 설치할 수 있습니다.


$ npm install -g json-server 


-g 옵션을 추가하여 패키지가 시스템에 전역적으로 설치되었는지 확인합니다.


JSON File 


이제 이름이 db.json 인 새 JSON 파일을 만들어 보겠습니다. 이 파일에는 REST API에 의해 노출되어야 하는 데이터가 포함되어 있습니다. JSON 구조에 포함 된 객체의 경우 CRUD 진입점이 자동으로 생성됩니다. 다음 샘플 db.json 파일을 살펴보십시오.


{
"employees": [
{
"id": 1,
"first_name": "Sebastian",
"last_name": "Eschweiler",
"email": "sebastian@codingthesmartway.com"
},
{
"id": 2,
"first_name": "Steve",
"last_name": "Palmer",
"email": "steve@codingthesmartway.com"
},
{
"id": 3,
"first_name": "Ann",
"last_name": "Smith",
"email": "ann@codingthesmartway.com"
}
]
} 


JSON 구조는 세 개의 데이터 세트가 할당 된 하나의 직원 객체로 구성됩니다. 각 직원 개체는 id, first_name, last_name 및 email의 네 가지 속성으로 구성됩니다.


서버 실행 


다음 명령을 실행하여 JSON 서버를 시작하겠습니다.


$ json-server --watch db.json 


매개 변수로 JSON 구조 (db.json)를 포함하는 파일을 전달해야 합니다. 또한 — watch 매개 변수를 사용하고 있습니다. 이 매개 변수를 사용하여 서버가 감시 모드에서 시작되었는지 확인합니다. 즉, 파일 변경을 감시하고 그에 따라 노출 된 API를 업데이트합니다.


Image for post 





이제 브라우저에서 URL http : // localhost : 3000 / employees를 열 수 있으며 다음 결과가 표시됩니다.


Image for post 

출력에서 직원 자원이 올바르게 인식되었음을 알 수 있습니다. 이제 직원 링크를 클릭하면 http : // localhost : 3000 / employees에 대한 HTTP GET 요청이 다음 결과를 보여줍니다.


Image for post 


다음 HTTP 엔드 포인트는 JSON 서버에서 자동으로 생성됩니다.


GET /employees
GET /employees/{id}
POST /employees
PUT /employees/{id}
PATCH /employees/{id}
DELETE /employees/{id} 


POST, PUT, PATCH 또는 DELETE 요청을 수행하면 변경 사항이 db.json에 자동으로 저장됩니다. POST, PUT 또는 PATCH 요청은 요청 본문에서 JSON을 사용하기 위해 Content-Type : application / json 헤더를 포함해야 합니다. 그렇지 않으면 200 OK가 되지만 데이터는 변경되지 않습니다.


추가 매개 변수로 URL을 확장 할 수 있습니다. 예 : 다음과 같이 URL 매개 변수를 사용하여 필터링을 적용 할 수 있습니다.


http://localhost:3000/employees?first_name=Sebastian


결과적으로 하나의 직원 개체 만 반환됩니다. 또는 모든 속성에 대해 전체 텍스트를 수행하십시오.


http://localhost:3000/employees?q=codingthesmartway


사용 가능한 URL 매개 변수의 전체 목록은 JSON 서버 문서 (https://github.com/typicode/json-server)를 참조하십시오.


POSTman으로 API 엔드 포인트 테스트 


간단히 브라우저를 사용하여 GET 요청을 시작하는 것은 쉽습니다. 다른 유형의 HTTP 요청을 시작하려면 Postman (https://www.getpostman.com)과 같은 HTTP 클라이언트 도구를 사용할 수 있습니다. Postman은 MacOS, Windows 및 Linux에서 사용할 수 있습니다. 또한 Postman은 Chrome 앱으로 사용할 수 있습니다.


Get Request 


Postman 사용자 인터페이스는 사용하기 쉽습니다. GET 요청을 시작하려면 다음 스크린 샷에서 볼 수 있는 것처럼 양식을 작성하십시오. 보내기 버튼을 클릭하면 JSON 형식으로 응답을 받게 됩니다. 


Image for post 


DELETE REQUEST 


해당 삭제 요청은 다음 스크린 샷에서 볼 수 있습니다.

Image for post 

POST REQUEST 


새 직원을 만들려면 게시 요청을 수행하고 본문 콘텐츠 유형을 JSON (application / json)으로 설정해야 합니다. 새 직원 개체는 본문 데이터 섹션에 JSON 형식으로 입력됩니다.


Image for post 

PUT REQUEST 


기존 직원 레코드를 업데이트하거나 변경하려는 경우 HTTP PUT 요청을 사용할 수 있습니다.


Image for post 

Mocking Data with Faker.js 


지금까지 API에 의해 노출 된 데이터를 JSON 파일에 수동으로 입력했습니다. 그러나 더 많은 양의 데이터가 필요한 경우 수동 방식이 번거로울 수 있습니다. 이 문제에 대한 쉬운 해결책은 Faker.js (https://github.com/marak/Faker.js/) 라이브러리를 사용하여 가짜 데이터를 생성하는 것입니다. Faker.js를 JSON 서버에 통합하는 것은 쉽습니다. 아래 단계를 따르십시오.


먼저 현재 저장소에서 새 NPM 프로젝트를 초기화 해 보겠습니다.


$ npm init 


다음으로 NPM 패키지 faker를 사용하여 Faker.js를 설치합니다.


$ npm install faker 


Faker.js는 node_modules 폴더에 설치됩니다. 다른 파일 employee.js를 만들고 다음 JavaScript 코드를 삽입합니다.


// employees.js
var faker = require('faker')
function generateEmployees () {
  var employees = []
  for (var id = 0; id < 50; id++) {
    var firstName = faker.name.firstName()
    var lastName = faker.name.lastName()
    var email = faker.internet.email()
    employees.push({
      "id": id,
      "first_name": firstName,
      "last_name": lastName,
      "email": email
    })
  }
  return { "employees": employees }
}
module.exports = generateEmployees


50 명의 직원을 포함하는 JSON 객체를 생성하기 위해 generateEmployees() 함수를 구현하고 있습니다. 이름, 성 및 이메일에 대한 가짜 데이터를 얻기 위해 Faker.js 라이브러리에서 다음 방법을 사용하고 있습니다.


  • faker.name.firstName()
  • faker.name.lastName()
  • faker.internet.email()

JSON 서버는 가짜 데이터 생성을 담당하는 generateEmploees() 함수를 마지막으로 내 보내야 합니다. 이 작업은 다음 코드 줄을 사용하여 수행됩니다.


module.exports = generateEmployees 


내보내기를 추가 한 후 employee.js 파일을 json-server 명령에 직접 전달할 수 있습니다.


$ json-server employees.js


이제 노출 된 REST API를 통해 Faker.js로 생성 된 50 개의 모든 직원 데이터 세트에 액세스 할 수 있습니다.


Video Tutorial 


이 비디오 자습서에는 위의 텍스트에 설명 된 단계가 포함되어 있습니다.




또한 훌륭한 온라인 과정을 확인하십시오 : 완전한 웹 개발자 부트 캠프


웹 개발을 배우는 데 필요한 유일한 과정-HTML, CSS, JS, Node 등!


이 게시물은 CodingTheSmartWay.com에 처음 게시 되었습니다.


https://medium.com/codingthesmartway-com-blog/create-a-rest-api-with-json-server-36da8680136d



REST APIJSON