[2차 스터디] 1주차 회고록 - Pagination

[결과물 이미지]

 

 

[새롭게 알게 된 내용]

• Suspense - React
• useSuspenseQuery - React-query
• prefetchQuery - React-query
• HOC pattern - design pattern
• OpenAPI 활용 방법
• 고려할 수 있는 최적화 요소에 대한 고민 - 이미지 최적화 (lazy-loading, prefetch, resizing)

 

 

[느낀 점]

기술적으로 아쉬운 내용으 prefetch를 첫 페이지를 불러왔을 때 다음 페이지에 대해서 prefecth를 하게끔 설정을 했는데 이렇게 하니깐 캐싱된 페이지에 접근을 했을 때 다음 페이지를 prefecth하지 않는 상황이 벌어졌으며, 원인에 대해서 제대로 파악을 하지 못하고 끝이 나버린 문제와 data-fetch를 하면서 겪었던 사소한 문제들로 인해 시간이 지연된 부분이 있어서 UI에 많은 신경을 쓰지 못한 점이 아쉬웠다. 또한 OpenAPI를 사용하다보니 가장 크게 영향을 미치는 이미지에 대해서 리사이징을 해보지 못한 것이 조금 아쉬웠다.

하지만 suspense를 통해서 사용자 경험을 개선해보았고, prefecth 및 react-query를 한 번 공부해볼 기회가 되어서 너무 좋았다. 또한 HOC pattern을 공부만 했었는데 실제로 suspenst로 사용해보아서 좋았으며 나중에 OpenAPI를 사용할 때 Query라던닥 사용 방법이던가 좀 더 쉽게 프로젝트를 할 수 있을 것 같다는 자신감이 들었다.

추후 시간이 된다면 좀 더 부족했던 요소들을 개선할 수 있었으면 좋겠고, 라이트하우스 요소도 하나씩 해결해나가면서 퍼포먼스 점수도 개선할 수 있었으면 좋겠다. (개선이 된다면 이미지로 전, 후 올릴 것임)