구버전/구름톤
-
[2차 스터디] 3주차 회고록 - 검색창구버전/구름톤 2024. 3. 12. 08:44
[결과물 이미지] 더보기 [새롭게 알게 된 내용] onMouseDown event를 활용한 event 순서 제어 query를 통한 검색어 유지 방법과 useEffect와 state와의 관계 ul tag와 li tag 활용 [느낀 점] 검색창을 구현하면서 네이버를 참고하였는데 어떻게 하면 이렇게 될까를 생각하면서 여러 속성들을 찾아보고 알고있는 지식을 토대로 구현할 수 있는 다른 방법에 대해서 공부를 해보는 시간이였다. 단순하게 ref와 같은 방식을 통해서 구현하려고 마음먹었던 부분이 동욱님의 도움으로 더욱 간단하고 깔끔하게 구현할 수 있는 방법을 알게 되서 매우 좋았던 것 같다 공유해주신 글을 토대로 나중에 어떠한 원리로 이벤트가 순서가 결정되어있고 기본 이벤트를 막고 사용하면 어떻게 되는지 등등 여러 ..
-
[2차 스터디] 2주차 회고록 - Infinite scroll구버전/구름톤 2024. 3. 4. 05:42
[결과물 이미지] 더보기 [새롭게 알게 된 내용] Masonry - React useSuspenseInfiniteQuery - React-query OpenAPI 활용 방법 [느낀 점] useInfiniteQuery에 대한 이해도가 좀 부족하고 docs를 통해서 이해한 내용이 조금 잘못되어서 개념과 구현을 하면서 어려움이 많았다. 구상한대로 구현이 가능하다고 생각을 했는데 최종 발표에서 다른 조원들과 얘기를 하면서 조금 잘못된 부분이 있다는 것을 느꼈다. 실제 infiniteQuery에서 prefetch를 구현할 수 있는 예제가 있었는데(queryClient.prefetchInfiniteQuery) 이 부분에서 나는 trigger로 인해 데이터를 불러올 때 미리 백그라운드에서 다음 데이터를 불러오는 것이..
-
[2차 스터디] 1주차 회고록 - Pagination구버전/구름톤 2024. 2. 24. 14:26
[결과물 이미지] 더보기 [새롭게 알게 된 내용] Suspense - React useSuspenseQuery - React-query prefetchQuery - React-query HOC pattern - design pattern OpenAPI 활용 방법 고려할 수 있는 최적화 요소에 대한 고민 - 이미지 최적화 (lazy-loading, prefetch, resizing) [느낀 점] 기술적으로 아쉬운 내용으 prefetch를 첫 페이지를 불러왔을 때 다음 페이지에 대해서 prefecth를 하게끔 설정을 했는데 이렇게 하니깐 캐싱된 페이지에 접근을 했을 때 다음 페이지를 prefecth하지 않는 상황이 벌어졌으며, 원인에 대해서 제대로 파악을 하지 못하고 끝이 나버린 문제와 data-fetch를..