[Seoulvival] DetailPage - 좋아요

[고민한 내용]

1. 정적인 데이터와 동적인 데이터를 어떻게 받아오고 구성을 해야할까?
2. 인풋을 이용해서 다양한 작업(댓글에 관련된 CU 작업)
3. 어떻게 하면 재사용을 많이하면서 구성을 할 수 있을까?

 

정적인 데이터와 동적인 데이터의 구분

next.js를 통해서 구현을 하기때문에 컴포넌트 별 SSR과 CSR을 얼마나 잘 사용하는지에 따라서 랜더링 시간이나 유저의 UX가 많이 달라질 것이라고 생각이 되었다. 대부분의 유저의 인터렉션에 동적으로 반응해야 할 부분을 구분을 하고 그 중에서 좋아요, 스크랩, 그리고 댓글 부분에 대해서 동적으로 구현을 해야겠다고 생각을 하였다.

 

1. 처음 fetch를 통해서 가져온 값에 대해서 revalidation을 적용해서 실행을 해보았는데 cache된 데이터가 제대로 최신화가 되지 않아서 cache: 'no-store'를 사용을 해보았지만 원하는만큼 되지않아 useSWR을 통해서 컴포넌트 내에서 새롭게 데이터를 받아와서 mutate를 이용해서 update를 하는 방식을 사용했다

그 중 좋아요와 스크랩부분은 낙관적 업데이트를 사용해서 구현을 하였음

 

2. textarea를 사용해서 메시지를 기입하는 컴포넌트를 구성하였고, useRef로 생성된 ref 객체의 ref.current를 recoil에 담아서 focus()를 하는 방식으로 구현을 하였는데 id나 class를 부여하고 document.queryselector()를 통해서 구현하는 방법을 보았기에 추후 refactoring을 해보는 것도 괜찮을 것 같다.

 

3. 재사용에 대한 고민은 꾸준히 해오는 것 같다. 그중에서도 commetItem과 recommetItem내부에서 쓰이는 모달창에 대해서 통일을 해서 사용을 할 수 있을 것이라고 생각을 하였고 switch문을 통해서 구현을 할까 고민을 하다가 Array에 변경되는 사항을 props로 내려주면서 조건문을 통해서 최대한 재사용을 할 수 있게끔 고민을 하였다.