분류 전체보기102 Intersection Observer API로 무한스크롤 구현하기 / 비동기 네트워크 요청 버그 해결 의도한 코드 - 페이지가 처음 렌더링 되었을 때, page 파라미터가 없는 요청이 1회 발생 -> 스크롤을 아래로 내렸을 때, page=2 를 파라미터로 갖는 요청이 1회 발생 실제 동작 - 페이지가 처음 렌더링 되었을 때, page 파라미터가 없는 요청과 page=1 파라미터를 갖는 요청이 두번 발생 (이건 strict mode 때문에 개발 환경에서만 발생) / 스크롤을 아래로 내리기 전에도 page=2를 파라미터로 갖는 요청이 1회 발생 fetch 요청이 작성된 코드는 아래 두 부분이다. 1. 초기 요청 (파라미터 X) 2. 페이지 수 증가 시 요청 발생 우선, useEffect의 특성을 잘못 파악하고 있었다. 2번 요청은 페이지가 렌더링 되었을 때, 즉 page 상태값이 1일 때에도 한번 발생한다... 2023. 5. 30. Intersection Observer API 이용하여 무한스크롤 구현하기 / undefined 네트워크 요청 발생 에러 해결 page 상태가 업데이트 될 때마다 fetch 요청을 실행하는 useEffect를 아래와 같이 작성했다. 그랬더니, 두가지 문제가 발생했다. 1. page 2일 때의 요청이 발생하지 않음 2. page 3, 4, 5, ... 요청은 응답 200을 뱉지만 아래 undefined 라는 알 수 없는 요청이 발생했다. 포스트맨으로 api_key와 page 파라미터를 입력하여 GET 요청을 테스트 해보았을 때는 페이지 당 20개의 영화 리스트가 잘 불러와졌다. 두번째 문제 먼저 파악해보았다. undefined 라는 저 알 수 없는 요청은 뭘까? 우선, 첫 번째로 뜬 undefined를 네트워크 탭에서 뜯어보았다. 301번 코드가 무엇인지 찾아보니, 'Moved Permanently' 즉, 요청한 리소스가 Loca.. 2023. 5. 30. Intersection Observer API 이용하여 무한스크롤 구현하기 Intersection Observer API를 이용하여 무한스크롤을 구현하고자 한다. 사용하는 영화 리스트 API 의 데이터 구조는 page 한개 당 20개의 영화 리스트를 담은 배열 형태로 되어있다. 따라서, 한번에 20개의 영화 리스트를 받을 수 있고 그 다음 20개의 영화 리스트를 요청하기 위해서는 fetch 요청 URL에서 page=2 라는 파라미터를 추가해주어야 한다. 이러한 데이터 구조를 보았을 때, 무한스크롤을 구현하기 위해서는 1. Intersection Observer가 맨 아래 요소를 관측함 2. 관측이 확인되면 page 라는 상태 값을 1 증가시킴 3. 의존성 배열로 page 값을 갖는 useEffect 훅을 작성함 -> 해당 훅에서 page 값의 업데이트가 감지되었을 때, 해당 p.. 2023. 5. 29. Intersection Observer API 이용하여 무한스크롤 구현하기 / useEffect 의존성 배열 문제 해결하기 새로고침하여 페이지를 렌더링 했을 때, page 상태값이 초기값으로 설정한 1이 나오기를 기대했다. 그러나, 이렇게 2가 나오는 에러가 발생했다. 그런데, fetch 요청 시 URL 파라미터에 page를 넣어서 요청하는 로직으로 구성되어 있어 원하는 데이터를 요청하려면 이 page 상태값을 정확히 관리해주는 것이 필요했다. 문제 원인은 렌더링 되자마자 observer를 설정하고 실행한 useEffect 훅이 작동하는 것으로 확인되었다. 그래서 그 안의 콜백함수에 작성된 setPage 코드가 실행되어 page의 상태값이 2로 업데이트 된 것이다. useEffect의 dependency array를 잘못 작성했었다. 저기서 page, target으로 설정해주니, setPage 코드가 돌아가면서 계속 page.. 2023. 5. 29. 이전 1 ··· 6 7 8 9 10 11 12 ··· 26 다음
