개발일지

진행 중인 사이드 프로젝트 Oeasy의 MVP기능 구현이 완료되어 유저 피드백을 받아보았습니다..!좋은 피드백도 많았지만 처음부터 완벽할 수는 없었습니다 ㅠㅠ내가 맡은 부분의 피드백레시피 더보기 버튼의 불편함원하는 레시피만 모아 볼 수 있는 기능이 있었으면 좋겠다.랜덤으로 추천 받는 레시피 버튼이 이벤트배너 같아서 눌러보지 않는다.1.  IntersectionObserver 적용하기 변경 전: 더보기 버튼 방식기존 방식은 사용자가 '더보기' 버튼을 클릭해야만 다음 페이지 데이터를 불러왔습니다. 하지만 이 방식은 간단하지만 사용자 인터랙션이 필요하여 사용자가 불편함을 느꼈습니다.변경 후: IntersectionObserver를 활용한 무한 스크롤적용 방법 :요소 참조 생성: 페이지 하단에 useRef를 사..

🥹 문제 발생기존 코드를 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..