json-server의 다중 엔드포인트를 단일 엔드포인트로 사용하기

Image by StockSnap from Pixabay

 

json-server는 백엔드 API를 모킹하는 데에 가장 빠르고 편리한 툴이다. CLI 커맨드 하나면 내가 지정한 JSON 파일을 가지고 RESTful API 엔드포인트를 구축해준다. 이 과정에서 난 JSON 파일 하나만 준비하면 된다.

 

json-server 자체적으로 다양한 키워드를 제공해서 데이터를 정렬하거나 필터링해서 받을 수 있는데, 결정적으로 내 json-server 경험은 _embed 키워드를 알기 전후로 나뉜다.

 

_embed로 엔드포인트 합치기

데이터를 저장할 땐 프로젝트와 관련된 모든 데이터를 다 하나의 데이터베이스에 담는 게 아니라 목적에 맞춰 나눠서 저장한다. 보통은 프로젝트가 몇가지 페이지로 구성되어 있을텐데, 한 페이지에서 필요한 데이터가 다른 페이지에서는 필요없을 수 있다. 그런 상황에서 매 fetch마다 불필요한 데이터까지 전달하면 리소스를 낭비하게 된다.

 

따라서 데이터베이스를 세분화하게 되는데, 또 어떤 경우에는 같이 받아와야 하는 데이터가 흩어져있어서 API 요청을 여러번 날리게 되기도 한다.

 

블로그 사이트를 예시로 들면, 모든 블로그 글을 한번에 볼 수 있는 목록 페이지가 있고 유저들이 댓글을 달 수 있는 각각의 블로그 글의 페이지가 있을 것이다. 블로그 글은 글대로, 댓글은 댓글대로 따로 모아둔다고 치면 아래와 같이 데이터베이스를 구축할 수 있다.

{
  "posts": [
    { "id": 1, "title": "Post 1" },
    { "id": 2, "title": "Post 2" },
    { "id": 3, "title": "Post 3" },
    { "id": 4, "title": "Post 4" }
  ],
  "comments": [
    { "id": 551, "postId": 1, "username": "user1", "content": "Hello" },
    { "id": 541, "postId": 1, "username": "user2", "content": "World" },
    { "id": 20, "postId": 1, "username": "user3", "content": "bananas" },
    { "id": 21, "postId": 3, "username": "user1", "content": "monkeys" }
  ]
}

 

json-server는 위 JSON 파일로 localhost/posts와 localhost/comments 2개의 엔드포인트를 생성해준다. 만약 블로그 글의 제목과 상위 n개의 댓글을 보여주는 페이지를 만든다고 가정한다면 /posts에 fetch 요청을 보내고, 또 /comments에 한번 더 요청을 보낸 다음 프론트엔드에서 데이터를 알맞게 가공하게 된다.

 

이런 경우 요청 주소에 _embed 키워드와 타겟 엔드포인트 이름을 추가하기만 하면 json-server가 알아서 데이터를 합쳐주기 때문에 fetch 요청을 줄일 수 있다. 상위 데이터 테이블을 엔드포인트로 잡고 ?_embed=${하위_테이블}을 덧붙여 사용한다.

const res = await fetch("http://localhost:8000/posts?_embed=comments");

 

위 요청 주소로 fetch한 데이터를 파싱하면 이렇게 들어온다:

[
  {
    "id": 1,
    "title": "Post 1",
    "comments": [
      { "id": 551, "postId": 1, "username": "user1", "content": "Hello" },
      { "id": 541, "postId": 1, "username": "user2", "content": "World" },
      { "id": 20, "postId": 1, "username": "user3", "content": "bananas" }
    ]
  },
  {
    "id": 2,
    "title": "Post 2",
    "comments": []
  },
  {
    "id": 3,
    "title": "Post 3",
    "comments": [
      { "id": 21, "postId": 3, "username": "user1", "content": "monkeys" }
    ]
  },
  {
    "id": 4,
    "title": "Post 4",
    "comments": []
  }
]

 

id가 1과 3인 post 데이터에는 comments 배열에 댓글 데이터가 포함돼있는 것을 확인할 수 있다. 참고로 반드시 comments 엔드포인트의 데이터에 postId가 존재해야 한다. posts 엔드포인트 이름을 단수로 변환하고 "Id"를 붙인 키를 기준으로 데이터를 병합해주기 때문이다. 만약 데이터가 제대로 들어오지 않는다면 병합되는 데이터의 id 키를 먼저 의심해볼 수 있겠다.

 

보통 데이터를 모킹할 때 CRUD 기능도 같이 테스트하게 되는데, _embed 키워드 하나로 내가 직접 JSON 파일을 테스트하려는 기능에 맞게 수정하는 수고를 크게 줄일 수 있었다.