본문 바로가기

에러 디버깅 & 리팩토링10

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.
Intersection Observer API 이용하여 무한스크롤 구현하기 / 교차 전에 콜백함수가 실행되는 오류 해결 1. target 이 undefined 로 뜨는 문제 -> useRef / target.current / if 조건문으로 해결 2. 콜백함수가 계속 호출되는 문제 (Chat GPT에게 질문해서 해결!) -> target element가 처음 렌더링 되었을 때, 콜백이 바로 실행되기 떄문. 스크롤이 실제 요소 위치에 도달하기 전에 이미 콜백이 실행되고 있음. 해결책) 1. 콜백 함수 내부에서 추가적인 검사를 수행하여 실제로 스크롤이 페이지 하단에 도달했는지 확인하기. let observer = new IntersectionObserver( entries => { entries.forEach(entry => { if (entry.isIntersecting) { setPage(page + 1); console.. 2023. 5. 29.
Git 에러: Updates were rejected because the remote contains work that you do not have locally 해결해봐야함 2023. 4. 8.
자바스크립트 배열 메서드 .pop(4), .shift(6)은 왜 정상작동하나 1. 현재의 무드: 해당 내용 또한 스터디 디코에서 다른 스터디원분이 질문해주신 내용! 흥미롭고 배운 점이 많아 정리해둡니다. 2. 오늘 학습한 내용 중 키워드: 배열 메서드 .pop(), .shift(), 매개변수와 인자 3. 오늘 학습한 내용 요약 let arr = [1, 2, 3, 4] arr.pop() // 4 console.log (arr) // [1, 2, 3] arr.shift() // 1 console.log (arr) // [2, 3] 이처럼, .pop() 과 .shift() 는 각각 배열의 맨 마지막 요소 값과 맨 첫 요소 값을 제거해주는 역할을 합니다. 그런데, 문제는 let arr = [1, 2, 3, 4] arr.pop(6) // 4 console.log (arr) // [1, 2.. 2022. 11. 3.