[TIL] 좋아요 API

풀스택 미니 프로젝트를 진행할 때 좋아요 api를 만들었는데, response 구조가 복잡해서 로그인 된 유저가 해당 게시글에 좋아요를 눌렀는지, 안눌렀는지 판단하기 힘들어서 프론트엔드 팀원들이 구현에 애를 먹었다.

//수정 전 response
posts": [
{
  author: "작성자",
  category: 1,
  desc: "터미널은 못참지",
  id: 2,
  image: "https://velog.velcdn.com/images/njh7799/post/5beae190-335a-40fa-be51-23653ac909b9/dd.PNG",
  likes: [
    {
      "author": "선중",
      "category_id": 1,
      "post_id": 2
    },
    {
      "author": "testtest",
      "category_id": 1,
      "post_id": 2
    }
],
  link_url: "https://velog.io/@njh7799/Windows-10-%EC%97%90%EC%84%9C-%ED%84%B0%EB%AF%B8%EB%84%90-%EA%BE%B8%EB%AF%B8%EA%B8%B0",
  reg_dt: "dkei",
  status: 0,
  title: "터미널은 못참지"
},

수정 전엔 요청을 받으면 서버에서는 posts안에 like 객체의 리스트를 리턴해줬는데, 좋아요의 갯수를 게시글 마다 붙이는건 간단한 로직으로 구현 가능했지만 로그인 한 유저가 좋아요를 어떤 게시글에 눌렀는지 표시하는 부분의 로직이 굉장히 복잡해졌다. 그래서 고민끝에 서버의 로직을 수정했다.

//수정 후 response
{
  author: "작성자"
  category: 1
  desc: "터미널은 못참지"
  id: 2
  image: "https://velog.velcdn.com/images/njh7799/post/5beae190-335a-40fa-be51-23653ac909b9/dd.PNG"
  like_yn: true
  likes: 2
  link_url: "https://velog.io/@njh7799/Windows-10-%EC%97%90%EC%84%9C-%ED%84%B0%EB%AF%B8%EB%84%90-%EA%BE%B8%EB%AF%B8%EA%B8%B0"
  reg_dt: "dkei"
  status: 0
  title: "터미널은 못참지"
}

like_yn에 로그인 한 유저가 이 post에 좋아요를 눌렀는지/안눌렀는지 를 true/false로 리턴해 줬다.
프론트 입장에서는 like객체 안의 author와 로그인 한 유저를 비교하는 과정을 생략하고, like_yn이 true라면 좋아요를 눌렀다고 판단할 수 있게 돼서 훨씬 간단하게 구현이 가능했다.

백에서 데이터를 어떻게 주냐에 따라 프론트의 구현 난이도가 크게 달라진다는 점을 배웠다.
앞으로 좋은 api를 만들 수 있을것 같다.