REST API를 사용하는 새 프런트 엔드 프로젝트 개발을 시작할 때 종종 백엔드가 아직 준비되지 않았습니다.
그러나 매우 자주 이것은 처음에는 기본이며 응용 프로그램이 어떻게 작동하는지 확인하기 위해 가짜 데이터를 받기를 원합니다.
이때 도구를 사용하여 postman와 같은 API 또는 json-server, mocker-api 또는 http-fake-backend와 같은 라이브러리를 모의하기로 결정했습니다.
이 도구는 정말 훌륭하지만 여전히 몇 가지 부정적인 점이 있습니다. 예를 들어 Postman은 완전히 무료가 아니며 로그인이 필요하며, mocker-api는 모든 경로를 단일 자바 스크립트 파일로 정의하고 json-server는 어떤 시점에서 에지 케이스에 대해 매우 제한적입니다.
그래서 모든 경우를 처리 할 수 있고 멋진 개발자 경험 흐름 내에서 이를 처리 할 수 있는 새로운 API 모커 도구인 Restapify를 개발하기로 결정했습니다.
Restapify는 NodeJS 기반 CLI로 NextJS 또는 Sapper에서 볼 수 있는 직관적이고 개발자 친화적인 JSON 파일 구조를 사용하여 로컬 REST API를 빠르고 쉽게 배포 할 수 있습니다. 다음을 제공해야 하는 간단한 모의 API를 만들어 작동 방식을 설명하겠습니다.
GET /me
GET /posts
GET /users
GET /users/:userid
POST /users/:userid
DEL /users/:userid
GET /users/:userid/commentsCreate the endpoints
시작점은 경로 json 파일을 포함 할 폴더를 만드는 것입니다. / api라고 합니다. 그런 다음 제공 할 경로를 추가 할 수 있습니다. 경로를 만드는 것은 파일 이름이 끝점, 메서드 및 상태 코드를 설명하는 .json 파일과 응답 본문의 내용을 추가하는 것을 의미합니다. 따라서 상태 코드 200으로 GET / me 엔드 포인트를 생성하려면 다음 파일을 생성하면 됩니다.
? api
┣ ? me.GET.200.jsonGET 및 200이 메서드 및 상태 코드의 기본값이므로 파일 이름을 다음과 같이 단순화 할 수 있습니다.
? api
┣ ? me.json응답에는 이름, 성 및 이메일이 포함되어야 하므로 /api/me.json의 파일 내용은 다음과 같습니다.
{
"firstname": "Janie",
"lastname": "Hermann",
"email": "Jo.Kessler@yahoo.com"
}그런 다음 /users에 대한 엔드 포인트를 추가합니다. 그 중 몇 개가 있으므로 동일한 폴더 사용자로 그룹화 할 수 있습니다.
? api
┣ ? users
┃ ┗ ? _.json
┃ ┣ ? [userid]
┃ ┃ ┗ ? _.json
┃ ┃ ┗ ? _.POST.201.json
┃ ┃ ┗ ? _.DELETE.201.json
┣ ? me.json[userid] 폴더는 이 경로가 동적임을 나타냅니다. 그런 다음 JSON 파일 콘텐츠에서 [userid] 구문을 사용하여 이 변수를 사용할 수 있습니다. /api/users/[userid]/_.json 파일의 예 :
{
"id": "[userid]",
"email": "Jo.Kessler@yahoo.com"
}GET /users/42를 호출하면 응답을 받게 됩니다.
{
"id": "42",
"email": "Jo.Kessler@yahoo.com"
}여기에서 id를 숫자로 얻으려면 "id": "n : [userid]"와 같은 구문 n : [var]을 사용하여 변수를 캐스팅 하십시오. 가변 캐스팅 문서
Restapify는 유명한 fakerjs 라이브러리를 사용하여 응답 본문을 쉽게 채울 수 있는 구문을 제공합니다 (문서 확인).
{
"firstname": "[#faker:name:firstName]",
"lastname": "[#faker:name:lastName]",
"email": "[#faker:internet:email]"
}for 루프 구문을 사용하여 낭비되는 양의 데이터를 쉽게 만들 수도 있습니다. 따라서 GET / users / : userid / comments 요청으로 10 개의 주석을 얻으려면 JSON 파일 /api/users/[userid]/comments.json에 다음을 작성하십시오.
[
"#for i in range(10)",
{
"id": "n:[i]",
"creatorId": "n:[userid]",
"content": "[#faker:lorem:sentences]"
},
"#endfor"
]이제 성공한 응답을 보내는 API의 모든 끝점을 만들었습니다. 그러나 예를 들어 사용자가 GET / users / : userid에 존재하지 않을 때 애플리케이션의 동작을 테스트하려면 어떻게 해야 합니까? 실제 API는 콘텐츠 없이 404를 반환 할 것입니다. 이 동작을 모의 하기 위해 Restapify는 엔드 포인트 상태의 개념을 구현합니다. 이렇게 하려면 파일 끝에 점으로 구분 된 {STATE_NAME} 구문을 파일 끝에 추가하여 각 상태에 대한 새 파일을 만들어야 합니다. 따라서 GET / users / : userid에 대한 새 상태를 만들 수 있습니다.
? api
┣ ? users
┃ ┣ ? [userid]
┃ ┃ ┗ ? _.json
┃ ┃ ┗ ? _.404.{NOT_FOUND}.jsonRestapify에서 콘텐츠 없음을 반환하려면 다음 구문을 파일 콘텐츠로 사용해야 합니다.
[null]빈 파일이 더 편리하지만 ECMA-404 표준에 따라 JSON 파일에는 유효하지 않습니다.
이제 엔드 포인트를 만들었으므로 모의 API를 제공 할 차례입니다. 이를 위해 Restapi CLI를 설치하십시오 ...
yarn global add restapify
# or npm install -g restapify... 그런 다음 api/폴더를 제공합니다.
restapify serve api/그런 다음 브라우저에서 모의 API에 대한 개요를 제공하는 대시 보드가 열립니다.
이 대시 보드에서 엔드 포인트와 해당 콘텐츠를 참조하고 가져 와서 제공 할 엔드 포인트의 상태를 선택할 수 있습니다.
따라서 NOT_FOUND 상태 버튼을 클릭하면 엔드 포인트의 이 상태를 제공하도록 API가 업데이트 되므로 GET / users / 42 요청 직후에 404를 받게 됩니다. 이는 프런트 엔드를 테스트하는 데 매우 유용합니다. 예를 들어 로그인 양식) 필요한 모든 것과 엣지 케이스에 맞도록 여러 상태를 만들 수 있습니다.
그래서 저는 Restapify의 가장 중요한 기능을 제시했지만, 쿼리 문자열, for-loops의 경로 변수 또는 fakerjs 통합과 같은 다른 사용 사례를 더 자세히 보려면 공식 문서를 확인하는 것이 좋습니다.
https://restapify.vercel.app/examples에서 모의 API에 대한 몇 가지 준비된 예제를 찾을 수 있으므로 직접 플레이하고 느낌을 볼 수 있습니다. 질문이나 피드백이 있으면 토론에 자유롭게 게시하고 소스 코드를 확인하고 싶다면 여기 GitHub 저장소가 있습니다.
https://dev.to/johannchopin/quickly-and-easily-mock-a-rest-api-with-restapify-16om
등록된 댓글이 없습니다.
