#무한스크롤

useInfiniteQuery 사용해 무한스크롤 구현 중 궁금한 점이 있습니다.

응답값에 page로 구분할 수 있는 데이터들로 구현할땐 어렵지 않았는데, 이렇게 배열 묶음으로 응답받는 경우에는 어떻게 무한스크롤 구현을 할 수 있을까요?.. 도저히 머리를 굴려보아도 해답을 못찾겠습니다.... api 응답값을 수정하는게 불가능한 상황인데 그럼 이 엔드포인트로는 구현하기가 어려울까요?..

프론트엔드 취업에 대해 질문있어요

현재 프론트엔드로 취업을 준비중인 프론트엔드 개발자 취준생입니다. 국비학원 포함해서 공부한지는 1년 조금 넘었는데 그 동안 이력서를 낼려고 해도 제 실력이 아직 많이 부족하다는 생각에 선뜻 이력서를 내지 못하고 계속 공부만 했는데 우선 지금도 실력이 아직 부족하지만 리액트로 axios사용, api 불러와서 화면에 출력, 라우터사용, 지도api 정도는 할 줄 아는 정도이고 무한스크롤, 그 외 기능은 챗GPT와 구글링을 통해 코드를 찾는 정도입니다. 지금은(아래이미지) 한국관광공사API를 가지고 연습겸 정말 간단하게 현재 제가 살고있는 지역의 관광명소를 이미지로 보여주고 이걸 클릭하면 모달창으로 상세정보와 카카오지도 연동으로 위치를 보여지게 만들었는데 혹시 이 정도도 신입으로 이력서를 내면 안되는 실력일까요?

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

프로젝트 면접 질문

면접관님 께서 진행했던 프로젝트에서 자랑하거나 어필할 수 있는 부분을 말씀하라고 하면 무조건 완성된 프로젝트 한에서 이야기를 해야하나요? 아니면 현재 진행중인 프로젝트도 말해도 되나요..? 저는 프로젝트를 여러 개를 진행을 해봤는데 그때 마다 다른것들을 사용을 해서 이걸 어떻게 이야기 해야할지 모르겠습니다 ㅠ 1. DB연결 - 좋아요 기능, 댓글 기능, 차트라이브러리 사용 2. 외부 API 사용, 페이지네이션 사용 3. 가상 데이터 사용, 페이지네이션사용, 리덕스사용 4. 현재 진행 - 외부 API 사용, 무한스크롤사용, API이미지 예외처리, 파이어베이스 로그인 회원가입, 댓글기능, 좋아요기능 이런식으로 진행을 했습니다. 이걸 어떻게 설명해야지 좋을까요 ㅠ

React 무한 스크롤 구현 방식(useState,useInfiniteQuery) 차이점?

프로젝트를 진행하면서 useInfiniteQuery를 사용해 무한스크롤 기능을 구현했습니다. 방식은 대충 아래와 같이 흘러갑니다. 1. intersection-observer를 사용해 특정 영역이 보이면 useInfinteQuery를 사용해 pageParam를 +1 하고 axios 함수를 호출합니다. 2. 카테고리 별로 상품을 나눴으며 카테고리 재 클릭 시(A->B->A) 캐시가 삭제되어 다시 처음부터 무한 스크롤이 작동 됩니다. 다 만들고 생각해보니깐 뭔가 observer가 활성화되면 axios 함수를 호출 할 때마다 useState를 사용해서 setState(page +1) 이런식으로 적용해서 /shop/getAll/${category}?page=${page} 여기에 넣어주면 구현은 될 거 같습니다. 하지만 이게 성능에 큰 차이점이 있는지도 잘 모르겠고 server 상태를 관리하기 위해 이렇게 사용하는 건가 싶기도 하고.. 두 가지 구현 방식에 대해 차이점을 잘 모르겠습니다. 다른 분들은 왜 사용하고 있는지 궁금합니다. (정확히는 useState를 사용해서 무한 스크롤을 구현하는 방식이랑 useInfiniteQuery를 사용해 구현하는 방식의 차이를 모르겠습니다.)

프론트엔드 개발자가 답변할 줄 알아야하는 질문들?

무엇이 있을까요? 채용공고를 봐도 너무 광범위하고.. 실력이란게 뭔지 모르겠네요 전 그냥 리액트 기초 강의하나들었고 혼자서 몇개 만들어보는데 이런 생각이 들어서요 "이 정도면 중딩도 하겠다 취업에 성공하는 사람은 무슨 지식을 가지고 있지?" 요즘 트렌디하다는 지식들 몇개 구현해봐도 이런 생각이 듭니다 무한스크롤같이... (물론 이런건 같은 레퍼런스를봐도 사람마다 얻어가는게 천지차이일거라 제 탓이긴 하죠) 그래서 기초강의를 넘어서 조금이라도 할 줄 아는 프론트엔드 개발자가 답할 수 있는 질문들은 무엇이 있나요? 사람마다 의견이 갈릴거라 예시드는 느낌으로 가볍게 부탁드립니다

IOS 무한 스크롤 버벅거림

IOS에서 무한 스크롤이 있는 영역에서 버벅거림이 좀 심한데 혹시 이유와 해결 방법을 알 수 있을까요? 기술은 vue를 사용하고 있습니다 무한스크롤은 라이브러리 사용하지 않고 자체적으로 만들었습니다

무한스크롤 No offset 방식 index지정에 대해 질문이 있습니다

안녕하세요 현재 스프링부트 querydsl로 무한스크롤을 구현하면서 no offset을 적용하고 있습니다.정렬 방식에는 최신순과 마감순이 있는데 최신순은 pk를 오토인크리먼트로해서 사용하면되서 괜찮은데 문제는 마감순입니다. - 마감순정렬조건은 기존에 pk가 오토인크리먼트방식이고 정렬 조건과도 무관해 pk말고 정렬조건이되는 컬럼을 index로 설정을 하려고 합니다! 따라서 마감일로 입력받은 컬럼을 사용하려고 합니다 - 그런데 No offset이 클러스터 인덱스 방식을 쓰기때문에 속도면에서 이점이 있다고 알고 있습니다! - 따라서 클러스터 인덱스를 생성하려면 unique index로 해야하는것 같습니다. 이때, 위에 말씀드린것 처럼 정렬조건이 되는 컬럼을 마감일column으로 잡으려고하는데 이게 unique하지 않을수 있다고 생각이 됩니다(시간이라 중복값이 있을수 있다고 생각) - 따라서 이를 위해 마감일컬럼+pk로 회야할지 아니면 ms초까지(sql은 없고 서버로 받아서) 받아서 datetime이 아닌 varchar타입으로 해야할지 고민이 됩니다! 여기서 제가 착각하고 잘못된 제안을 하고 있는부분이 있는지 아니면 다른 좋은 방법이 있는지 선배님들의 고견을 듣고 싶습니다!

무한스크롤 성능 분석 결과가 예상과 다르게 나와요

무한스크롤 성능 분석하려고 기본 scroll Event로 document.width꺼내서 계산해봐서 api call 진행해주는 로직에 throttle 300ms 넣어서 동작하는거랑 비교하는데 왜 throttle 없는게 성능 지표에서 script 소모 시간이 더 작을까요? scroll event가 진행하는 동작이 적어서 throttle 사용하는게 오히려 안좋은 걸까요?

엘라스틱서치 무한스크롤 관련 질문

Express 연동해서 search 메서드로 search_after 사용해서 무한 스크롤 구현중입니다. 궁금한 점은 인덱스 안에 로그가 99개가 있다고 하면 size 10으로 했을 때 search_after로 9번까지는 데이터를 잘 가져오는데 마지막에 로그 호출할 때는 에러가 뜹니다.. 마지막 호출에서 이게 마지막이라고 감지하도록 만들고 싶은데 혹시 방법이 있을까요??

RN FlatList의 loader가 늦게 표시되는데 개선할 방법이 있을까요?

React Native의 FlatList를 이용해서 무한스크롤 목록을 만들었습니다. 데이터는 react-query의 useInfiniteQuery를 이용해서 가져오고 있고요. FlatList의 ListFooterComponent와 react-query의 isFetchingNextPage 값을 이용해서 다음 목록을 가져올 때 목록 하단에 loader를 표시해주고 있는데 loader가 늦게 나타납니다. (코드 사진 첨부합니다.) loader가 나타나는 속도를 개선할 수 있는 방법이 있을까요?