개발일지

🥹 문제 발생기존 코드를 tanstack query로 변경하여 로딩상태를 추가해 주었더니 해당 컴포넌트를 import 하는 부분에서 JSX 구성 요소로 사용할 수 없습니다.라는 오류가 발생하였다 .. 🤔 문제 원인조건에 맞는 경우에만 하나의 UI를 반환하려는 의도였지만, 컴포넌트 전체에서 두 번 이상의 return을 실행하려고 해서 "JSX 구성 요소로 사용할 수 없습니다" 오류가 발생했다.React는 단일 JSX 반환을 기대하기 때문에, 여러 번 return을 사용하는 것이 문제의 원인이었다. if (isLoading) return ; if (error) return console.error("Error fetching data:", error); 👍🏻 해결 방법조건문을 수정해 주었다. if..

🥹 문제 발생이전에 만들어 두었던 top버튼이 wheel 이벤트를 적용하니 작동하지 않는 문제가 발생하였다. 🤔 문제 원인프로젝트에 적용되어 있는 wheel 이벤트가 outerDivRef라는 특정 div 요소에 scrollTo 메서드를 사용하여 강제로 스크롤을 이동시키고 있기 때문에 브라우저의 window.scrollY 값은 페이지 전체의 스크롤 위치를 반영하지 않고, 대신 outerDivRef 요소 내에서만 스크롤이 발생하게 된다. 그래서 window.scrollY는 여전히 0으로 유지되어 발생하는 문제였다. 🤔 해결 시도일단 스크롤이 나타나지 않는 문제부터 해결하기 위해 scrollY의 위치를 상태로 관리하여 스크롤 값을 업데이트해 주었으나 비동기적인 업데이트로 값이 즉시 반영되지 않아 스크롤을..

🥹 문제 발생wheel 이벤트를 적용하는 과정에서 스크롤을 하면 튕기면서 두 페이지씩 내려가는 문제가 발생하였다 .. 🤔 문제 원인스크롤 이벤트가 과도하게 발생하면서 한 번의 스크롤 동작에도 여러 번 트리거 되어 튕기며 두 페이지씩 넘어가는 현상이 생기는 것이었다. 👍🏻 해결 방법디바운싱을 적용해 주어 지정된 시간 동안 이벤트가 한 번만 실행되도록 제한을 해주었다. 1. 먼저 useRef를 이용해 스크롤의 상태를 추척해준다.const isScrolling = useRef(false); 2. 스크롤 이벤트 함수에 true로 변경하여 스크롤 중 상태로 설정해 준다.isScrolling.current = true; 3. setTimeout을 이용해 일정 시간 후 스크롤 가능 상태로 변경해 준다. se..

🥹 문제 발생랜딩 페이지 wheel 이벤트를 적용하는 과정에서 헤더의 높이를 고려하지 않고 모든 섹션의 높이를 100vh로 설정하여 스크롤 이벤트를 구현하였더니 헤더가 차지하는 공간이 무시되면서 레이아웃이 깨져버리는 문제가 발생하였다.. 🤔 해결 시도: Zustand로 상태 관리하기 Zustand를 사용하여 전역 상태로 headerHeight를 관리.각 컴포넌트가 필요할 때마다 Zustand로부터 headerHeight를 가져와 사용하도록 구현.하지만 이 방법은 아래와 같은 단점이 있었습니다. 불필요한 로직 증가: 각 컴포넌트에서 헤더 높이를 계산하고 Zustand를 통해 다른 컴포넌트에 공유하는 과정이 복잡해졌습니다.효율성 부족: 단순히 헤더의 높이 정보를 공유하려고 전역 상태 관리 라이브러리를 사..