전체 글159 찜하기 기능 수정 🔽 이전 글 https://lotusstudy.tistory.com/156 이 전에 찜하기 기능 관련하여 백엔드 분과 날짜 조율을 하고 API 관련하여 얘기를 나누었습니다. 백엔드분도 수긍하여 바로 수정해 주셨고 수정한 api 동작 흐름은 상품의 하트를 클릭하면 찜한 상품의 상품 id가 담긴 배열을 받습니다. 그 배열에 현재 클릭한 상품 id가 있다면 찜하기 해제(delete)를 하고 없다면 찜하기(post)를 하는 로직입니다. 1. 찜한 상품 id 배열을 받아오는 코드 ⚙️ 처음 접한 개념 enabled : useQuery 훅을 사용할 때 해당 옵션을 설정함으로써 쿼리를 자동으로 실행하거나 중단할 수 있습니다. true일 때 : 쿼리가 자동으로 실행됩니다. 이는 컴포넌트가 처음 렌더링될 때 또는 re.. 2023. 7. 31. react-dom.development.js:16507 Uncaught Error: Rendered more hooks than during the previous render. if (isLoading) { return ; } if (error) { return ; } if (items.length === 0) { return ; } console.log(products); useEffect(() => { function handleScroll() { if ( containerRef.current && containerRef.current.getBoundingClientRect().bottom prevPage + 1); } } } window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, [isFetching]); 위의 .. 2023. 7. 20. infinite scroll 이번 프로젝트를 진행하면서 저는 상품 CRUD 관련 페이지를 만들고 있습니다. 원하는 카테고리를 선택하고 관련 상품들이 나오면 해당 상품들을 무한 스크롤로 구현될 수 있게 해보려고 합니다. 저는 useRef와 React Query의 옵션 중 하나인 isFetching을 사용하여 무한 스크롤을 구현해 보았습니다. 아직 많은 상품들이 등록되어 있지 않아 size는 5로 지정하였습니다. 위의 코드는 isFetching을 의존성 배열로 둔 useEffect의 콜백함수 안에는 handleScroll이라는 함수를 정의하였습니다. ⚙️ 처음 접한 개념 Element.getBoundingClientRect() :엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. 반환 값은 pad.. 2023. 7. 19. React 위도 경도 얻어와 사용자 위치 등록 오늘은 react에서 위도와 경도를 얻어와서 사용자의 위치를 구하는 것을 기록하려고 합니다. 사용자 위치를 구하는 기능은 이전에 Vanilla JS로 구현을 해본 경험이 있어 팀원들에게 제가 할 수 있다고 말해서 제가 맡게된 역할입니다. 하지만 이번엔 React를 통해 구현할 예정이기 때문에 이 과정을 기록하면 좋을 것 같습니다. 🤔 Geolocation API Geolocation API는 사용자의 위도, 경도를 제공해 줍니다. HTML에서 자체적으로 제공해주는 API입니다. npm에 설치해서 사용할 수도 있지만 복잡하지 않아 직접 구현해 보았습니다. https://www.npmjs.com/package/react-hook-geolocation react-hook-geolocation React hoo.. 2023. 7. 18. 합성컴포넌트를 이용한 모달 이번 프로젝트 진행 중 공통 컴포넌트를 구현해야 하는 역할을 맡았는데 그중 모달이 은근히 헷갈렸습니다. 부트캠프 진행 중 모달을 만들어보긴 하였지만 완벽히 이해하지는 않았는지 이번에 다시 하려고 하니 감이 잘 오지 않았습니다.! 이번 기회에 블로깅 하면서 차근차근 익혀나가 보려구요!! 처음에 제가 진행한 방식은 *Portal을 사용하여 z-index 처리 없이 모달을 편하게 처리해 주는 방식으로 구현하였습니다. *Portal : 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법. setOnModal(false)} /> {children} setOnModal(false)}>{leftButtonText} {rightButtonText} 모달은 위의 코드처럼 icon(MdE.. 2023. 7. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 32 다음 728x90
