API get 해오면서 발생한 협업 문제와 해결 과정

Problem

< Problem >

하루 글을 조회할 때 url에 postId를 요청하여 응답을 받는다.

근데 이 postId를 어떻게 저장해서 서버에 요청을 보내야하나?

기존 게시판과 같은 경우, 먼저 content들을 다 뿌려주고 이미 뿌려진 값들의 postId를 받아서 세부 페이지 요청을 보낸다.

하지만 우리 서비스는 유저 자신이 작성한 글만 봐야한다.

그렇다고 api에서 해당 유저가 쓴 글 리스트를 보내주는 것도 아니다.

postId를 작성하기에는 localDB에 저장하는 방법도 있는데 돌아가는 방법인 것 같았다.

 

당시, 조회할 수 있는 api는 이랬다.

 

 

 

백엔드와 프론트엔드 간 소통이 필요하다고 생각하여, 회의를 잡았다.

 

 

 

---

 

< Solution >

방법1

하루 작성할 때 서버에서 postId를 응답바디로 같이 보내준다.

그것을 localStorage에 저장

⇒ 클라 단에서 무겁게 가지고 다녀야 하고 서버에서 어차피 요청으로 보내주면 되는데 굳이 postId를 local에 저장할 이유가 없다. 이때까지만 서버에서 postId를 보내야만 하는 것을 몰랐다.

하지만 postId를 보내주지 않는다면 프론트는 postId를 가질 수 있는 방법이 딱히 없다. 유저가 게시글을 post할 때 서버에서 응답으로 body에 postId를 보내면 그것을 localDB에 저장할 수 있지만 그 유저가 100개, 1000개의 게시글을 작성하면 localDB에 무겁게 들고 다녀야 하며, 또 해당 postId와 같은 날짜를 찾아야 하는 번거로움이 발생한다.

 

 

방법2

따라서 서버에서 postId를 보내주는 것으로 생각하고 다시 방법을 생각해 보았다.

2-1

api/userId/month

유저 아이디와 달을 구별하여 서버에 요청을 보내고 postId와 작성한 날짜를 바디 데이터로 받는다.

그리고 그 postId를 하위 컴포넌트에게 전달하여 세부 글에 대한 내용을 api/userId/postId 다시 요청한다.

⇒ 즉, 총 2번의 요청을 서버에 보낸다.

 

 

2-2

api/userId/month

똑같이 요청을 보낼 때 postId와 작성한 날짜만 받는 것이 아닌, 세부 내용들도 다 받아둔다.

그 데이터를 하위 컴포넌트에 전달

⇒ 즉, 총 1번의 요청을 서버에 보낸다.

 

 

우리는 최종적으로 방법2-2를 선택했다.

2-1은 서버에 요청을 두번 보내게 된다. 첫번째 요청에서 blocking 당하면 프론트에서는 유저에게 데이터를 렌더링 해줄 수 없다.

api에서 응답 바디는 하루상세조회임. 여러 정보들이 다 있으니까. 하지만 쓰이는 곳은 달력에 쓰임.

api의 네이밍과 실제 쓰이는 곳에 괴리가 있기 때문에 백엔드에서는 고민을 했다.

(성능 vs 유지보수)

하지만 2-2는 한번에 데이터를 받고 서버에 요청도 1번 하기 때문에 시간도 단축되고 프론트가 데이터를 가지고 있어 더 빠르게 유저들에게 데이터를 보여줄 수 있는 장점이 있다.

 

++ 지금처럼 데이터가 적은 경우는 상관이 없지만 데이터가 100개, 10000개인 경우에는 오히려 2-2 방법이 요청을 2번 부르더라도 비효율적일 수 있다. 오히려 2-1이 일반적일 수 있다. 또한 2-1로 하면 하위 컴포넌트를 독립적으로 사용할 수 있다라는 장점이 있다. 서비스의 상황에 따라서 더 적합한 방법이 무엇인지 고민하는 것이 필요한 것 같다.

 

 

---

 

< 회고 >

api명세서를 볼 때 백엔드와 소통이 얼마나 중요한지 깨닫게 되었다. 어떠한 의도를 가지고 작성하였는지를 먼저 물어보는 것이 현명한 것 같다. 데이터를 주는 쪽과 받는 쪽이 서로를 알지 못하면 시간이 더 지체되는 것을 느꼈다.

하지만 이게 맞는 방법인지 조차 몰라서 발을 동동 구르고 있을 때, 같이 고민하고, 예제를 찾아보고 ,주변 지인에게 물어보며 답을 찾아가니 힘들지만 매우 기뻤다. 협업이 잘 되었을 때, 되지 않았을 때를 극명하게 느꼈던 소중한 경험이 되었다.

++ 성능과 유지보수에서 선택해야 하는 사항들이 생기는 경험을 했다.