1-3. [PROJECT] JSON Server

JSON Server

 

개념학습

 

API를 통해 받아오는 데이터를 기준으로 화면을 구성 해야 합니다. 그런데, API 개발 일정이 늦어지면 어떻게 해야 할까요?

API 개발이 지연될 때, 이러한 상황에서 JSON Server와 같은 도구를 사용하는 것이 매우 유익합니다. JSON Server를 사용하면 최소한의 설정으로 가짜 REST API를 만들 수 있고, 실제 API에서 기대하는 데이터 구조를 나타내는 JSON 파일을 정의할 수 있습니다. 이를 통해 프론트엔드 개발자들은 백엔드 API가 준비될 때까지 UI 구축 및 테스트를 계속할 수 있습니다.

JSON Server 는 리액트 프로젝트 안에서 다음과 같이 설치할 수 있습니다.

1
npm install json-server --save

이후, JSON Server가 위치할 폴더를 생성 합니다.

1
mkdir json_server

JSON Server를 사용할 때 db.json파일에 JSON 형식으로 더미 데이터를 저장할 수 있습니다. 이 데이터를 테스트하는 데 있어 중요한 점은 각 항목에 숫자 형태의 id가 포함되어야 한다는 것입니다. 이 id는 데이터의 수정, 삭제, 생성과 같은 작업을 수행할 때 필수적으로 사용되며, 각 데이터 항목을 고유하게 식별하는 데 중요한 역할을 합니다.

1
2
3
4
5
6
7
8
9
{
  "cartItems": [
    {
      "itemId": 1,
      "quantity": 7,
      "id": 11
    }
  ]
}

json_server 폴더 안에 server.js를 생성합니다. 5001번은 API 서버 포트 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
const jsonServer = require('json-server');

const server = jsonServer.create();
const router = jsonServer.router('json_server/db.json');

const middlewares = jsonServer.defaults();  // 기본 미들웨어 가져오기 (CORS 포함)

server.use(middlewares);  // 기본 미들웨어 사용
server.use(router);  // json-server의 라우터 사용

server.listen(5001, () => {
  console.log('JSON Server is running on http://localhost:5001');
});

프로젝트 폴더 안의 package.json을 열어 서버를 실행하는 코드를 집어 넣습니다.

1
2
3
4
5
"scripts": {
    "start": "react-scripts start",
    ....
    "server": "node ./json_server/server.js"
  },

서버를 실행 합니다.

1
npm run server

이제, API를 호출 해서 동작이 제대로 되는지 살펴 봅시다.

http://localhost:5001/cartItems 를 POST로 호출 하면, db.json에 신규 데이터가 들어 갑니다. 이 때, 데이터를 넣기 위해서 body는 json 형태로 구성되어야 하며 새로운 데이터 값이 들어 있어야 합니다.

DELETE 명령으로 Path 파라미터에 id를 입력하면 항목을 삭제할 수 있습니다.

PATCH를 통해서는 존재하는 데이터의 정보를 변경할 수 있습니다.

GET을 통해서는 데이터를 조회할 수 있습니다.

 

---

종합퀴즈

 

1. 영화 예매 사이트를 개발하고 있습니다. API를 작성하며 잔여 좌석을 확인하는 GET /inquiry라는 엔드포인트를 만들었는데, REST 원칙을 준수하지 않았다는 지적을 받았습니다. 그 이유로 가장 적절한 것을 고르세요.

A. HTTP 메서드 중 GET 보다 PUT을 사용하는 것이 적절하기 때문이다.
B. 엔드포인트에 동사를 사용했기 때문이다.
C.엔드포인트에 좌석에 대한 리소스를 지칭하지 않았기 때문이다.
D. 응답에 Location 헤더 정보를 전달하지 않았기 때문이다.

 

해설)

A. 잔여좌석을 확인하기 위한 요청의 HTTP 메서드는 GET을 사용하는 것이 적절합니다.
B. 엔드포인트에는 리소스를 지칭하는 명사 사용이 권장되며, 해당 엔드포인트 inquiry는 명사이긴 하나 행위에 대한 명사형이기 때문에 권장되지 않습니다.
D. 응답에 Location 헤더 정보를 전달했는지는 알 수 없습니다.

---

2. 요리 레시피를 제공하는 웹사이트를 만들기 위해, 냉장고에 있는 재료 목록을 조회해야 합니다. 
엔드포인트로(endpoint)는 어떤 것이 가장 적절한지 고르세요.

A. GET /refrigerator
B. GET /ingredient
C. POST /inquiry
D. POST /recipe

---

3. 여러분은 트위틀러 웹사이트의 기획을 전달받은 개발자입니다. 
데이터베이스에는 트윗이 너무 많으므로, 트윗 목록을 보여주기 위해 무한 스크롤을 이용해 추가적으로 트윗을 불러오려고 합니다. 
이때 추가적인 트윗을 불러오기 작성해야 할 엔드포인트(endpoint)로는 어떤 것이 가장 적절한지 고르세요.

A. GET /infinite-scroll
B. GET /tweets?offset=10&limit=10
C. POST /more-tweets
D.PUT /tweets

 

해설)

HTTP 메서드는 GET이 적합하며, 엔드포인트는 응답을 통해 받게 되는 리소스가 무엇인지를 알려주는 명확한 명사 형태로 작성하는 것이 적절합니다.

무한 스크롤을 이용해 추가적으로 트윗을 불러온다는 조건이 있기 때문에, /more-tweets도 얼핏 맞는 것처럼 보입니다. 
그러나 결과적으로 응답으로 제공되는 리소스가 트윗이므로, 이 경우에는 트윗 목록을 조회하기 위해 처음에 사용했던 엔드포인트 (GET /tweets) 를 재사용하는 편이 보다 적절합니다. 
수십, 수백개의 트윗을 한꺼번에 응답으로 받기에는 상당한 양의 payload가 전달되므로, 페이지네이션(pagination)을 이용해 트윗 목록을 끊어주는 게 좋습니다.

예를 들어, 총 120개의 트윗 중 인덱스가 10~20인 트윗, 즉 열 개의 트윗만 가져온다고 가정해 봅시다. 
보통 이 때 관습적으로 사용되는 Query Parameter는 offset, limit으로 이 경우 offset=10&limit=10 으로 해당 트윗을 가져올 수 있습니다.

---

4. 여러분은 위치 기반 맛집 탐색 앱의 기획을 전달받은 개발자입니다. 
특정 위치 기반의 모든 식당 목록을 조회하고, 그중 한식만 필터링하는 기능이 추가됩니다. 
해당 요청을 수행하기에 알맞은 엔드포인트(endpoint)로 가장 적절한 것을 고르세요.

A. GET /filter/korean
B. GET /restaurants?coordinate=126.9178889,37.5561619&type=korean
C. GET /filter?type=korean
D. GET /get-restaurants?coordinate=126.9178889,37.5561619&type=korean

해설)
리소스 요구사항은 식당 목록이므로, 
엔드포인트만 보고도 식당 목록이 응답으로 전달될 것을 예상할 수 있도록 이름을 짓는 것이 좋습니다. 
따라서, 엔드포인트에는 resturants 와 같이 리소스를 지칭하는 단어가 포함되어 있어야 하며, 
get 과 같은 동사는 사용하지 않습니다.

추가적으로 필터링을 위해서 해당 리소스의 필터링 조건을 Query Parameter로 전달하는 것이 바람직하며, 
여기에는 한식임을 나타낼 만한 type=korean 을 추가하였습니다.

위치 기반의 식당이므로 특정 반경의 중심이 될 만한 좌표(coordinate)를 Query Parameter로 제공했으며, 
이 역시도 필터링의 한 방법으로 볼 수 있습니다.

---

5. 도서 검색 사이트에서 도서 제목을 바탕으로 검색 기능을 구현하려고 합니다. 
요청이 REST 원칙에 적합하도록 하려면 어떻게 해야 할지 가장 적절한 것을 고르세요.

요청
GET /books
[헤더 생략]

{ "query": { "title": "code" } }


정상 응답
HTTP/1.1 200 OK
[헤더 생략]
{
	"books": [
		{ "isbn": "9780132350884", "title": "Clean Code", "author": "Robert C.Martin", "price": "$42.47" },
        { "isbn": "0735619670", "title": "Code Complete", "author": "Steve McConnell", "price": "$24.17" }
	]
}

 

A. 검색이므로 POST 메서드를 사용해야 한다.
B. 검색이므로 PUT 메서드를 사용해야 한다.
C. 검색이므로 PATCH 메서드를 사용해야 한다.
D. GET 요청에는 Query Parameter를 사용해야 한다.
E. GET 요청에는 Path Parameter를 사용해야 한다.

해설)
도서 제목을 바탕으로 검색하는 기능을 구현한다는 것은 GET 요청을 사용하여 데이터를 조회하는 것을 의미합니다. 
그러나 GET 요청의 경우 body가 존재하지 않기 때문에 이를 Query Parameter를 이용하여 구현해야 합니다.

---

6. 다음은 유저가 영화를 보기 위해 좌석을 예매하기 위한 요청과 응답입니다. 다음 빈칸에 들어갈 것으로 옳은 것을 고르시오.

요청
__(ㄱ)__ ____(ㄴ)______ HTTP/1.1
[헤더 생략]
{ "user": "kimcoding" }


정상 응답
HTTP/1.1 201 ___(ㄷ)____
[헤더 생략]
{ 
	"message": "예약이 성공적으로 진행되었습니다",
	"seat" : "g10",
	"user" : "_____(ㄹ)_____"
}


오류 응답
HTTP/1.1 ______(ㅁ)______
[헤더 생략]
{ 
  "message": "예약에 실패했습니다",
  "seat" : "g10",
  "status": "다른 사용자에 의해 예약됨"
 }

A. (ㄱ) GET - (ㄴ) /reserve - (ㄷ) created - (ㄹ) kimcoding - (ㅁ) 503 Service Unavailable
B. (ㄱ) POST - (ㄴ) /seats/g10 - (ㄷ) created - (ㄹ) kimcoding - (ㅁ) 409 Conflict
C. (ㄱ) POST - (ㄴ) /reservation - (ㄷ) OK - (ㄹ) kimcoding - (ㅁ) 409 Conflict
D. (ㄱ) PUT - (ㄴ) /seats - (ㄷ) created - (ㄹ) kimcoding - (ㅁ) 503 Service Unavailable

---

7. 다음은 영화 예매를 위한 요청과 응답입니다. 응답이 REST 원칙에 맞게 수정한 것을 모두 고르세요. (정답 두개)

요청
POST /seats/g10 HTTP/1.1
[헤더 생략]
{ "user": "kimcoding" }


정상 응답
HTTP/1.1 200 OK
[헤더 생략]
{ "message": "예약이 성공적으로 진행되었습니다" }


오류 응답
HTTP/1.1 409 Conflict
[헤더 생략]
{ 
  "message": "예약에 실패했습니다",
  "seat" : "g10",
  "status": "다른 사용자에 의해 예약됨"
 }

A. 정상적으로 생성된 리소스에 대한 정보가 응답에 담겨야 한다.
B. 정상 응답 코드는 201 Created 여야 한다.
C. 오류 응답 코드는 503 Service Unavailable 여야 한다.
D. 응답 메시지는 영문으로 쓰여져야 한다.

해설)
예약을 진행한다는 것은 "POST 요청에 의해 새로운 예약 정보가 생성되는 것"을 의미하므로, 
정상 응답 코드는 201 Created가 적합합니다.

또한 MDN의 201 Created에 대한 내용에 따르면, 
정상적으로 생성된 리소스에 대한 내용을 응답 메시지의 본문(body)에 포함할 것을 안내하고 있습니다. 
이는 REST 원칙에도 부합하며, 어떤 리소스에 영향을 끼쳤는지를 보다 명시적으로 설명할 수 있게 됩니다.

오류 응답이 있더라도, 서비스를 사용할 수 없는 것이 아니므로 503 Service Unavailable은 부적절하며, 
응답 메시지의 영문/한글 여부는 전혀 상관이 없습니다.

---

8. 게시판에서 10번 게시물을 삭제하는 엔드포인트를 작성하려고 합니다. 가장 적절한 것을 고르세요.

A. GET /delete
B. GET /delete
body: { "id": "10" }

C. DELETE /delete
D. DELETE /articles/10

해설)
삭제는 DELETE 메서드를 사용하는 것이 적절합니다.
엔드포인트에서 어떤 리소스를 삭제하는지 명시하는 것이 적절하며, 
앞에 DELETE 메서드가 있는데 엔드포인트에 또 delete를 사용할 필요는 없습니다.