본문 바로가기

react2

[React] 무한 스크롤 기능 구현 무한스크롤은 특정 페이지의 하단에 닿았을때 API가 호출되며 콘텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식이다. 🤔 페이지네이션도 있는데 왜 무한스크롤인가? 2가지의 이유가 있는데 첫번째는 허들을 줄이기 위해서이다. 사용자가 클릭을 하는 하나의 액션도 허들이라고 보는데 동작하는것을 줄임으로써 액션을 하나 줄일수 있다는 생각을 했다. 두번째 이유는 사용자가 상품을 더 많이 접하게 하기 위해서이다. 사용자가 제일 처음 접하는 메인페이지에서 더 많은 양의 정보를 사용자에게 보여주어야 구매를 할 수 있는 확률이 올라간다고 생각했다. 클릭후 다시 상단으로 올라가 렌더링 하는 시간 보다는 계속적으로 데이터를 불러오는 것이 사용자에게 더 많은 양의 정보를 줄수 있을거라 생각했다. ✅ 나중에 볼지도 모르니 정리.. 2023. 6. 4.
[React] Carousel 기능 구현 위 쇼핑몰 메인페이지 기능구현 중 상단 이벤트 배너를 Carousel 기능으로 구현하려고 한다!🧐 📍Carousel 의 사전적인 의미는 회전목마로, 회전목마가 빙빙 도는 것처럼 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트이다. 실은 Carousel 을 편하게 만들 수 있는 라이브러리는 많지만 여러가지 기능이 들어가 있어 React공부에 많이 도움이 될거 같아 라이브러리를 쓰지 않고 직접 하나하나 코드를 짜보려고 한다 (그래서 탈도 많고 에러도 많고 나도 울 예정) ✅ 나중에 볼지도 모르니 정리해 놓는 Carousel 라이브러리 https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touc.. 2023. 5. 31.