개발새발 로그

📖들어가며..이전에 이미지 슬라이드를 구현했는데이번에는 Carousel을 바로 구현해보려고 한다.이미지 슬라이드와 Carousel은 조금의 차이점이 존재한다.  이미지 슬라이드(Slide)와 캐러셀(Carousel)은 웹 디자인과 UI/UX에서 사용자가 콘텐츠를 탐색할 수 있도록 돕는 시각적 도구입니다. 둘 다 비슷한 기능을 제공하지만 사용성과 목적에 따라 차이가 있습니다.이미지 슬라이드(Image Slide)이미지 슬라이드는 정렬된 콘텐츠를 일방향으로 보여주는 방식입니다.특징:단순한 전환: 이미지를 순차적으로 하나씩 표시하며 보통 자동 재생 또는 수동으로 탐색 가능합니다.일반적인 흐름: 슬라이드가 끝에 도달하면 보통 다시 첫 번째로 돌아가거나 멈춥니다.선형적 구조: 이미지가 한 방향(왼쪽에서 오른쪽 ..

📖들어가며..이번에는 이미지 슬라이드를 구현해보려고한다.이미지 슬라이드는 보통 아래와 같은 기능이 존재한다.- 오른쪽, 왼쪽으로 클릭해서 슬라이드하는 기능- 페이지네이션- scroll(모바일 터치시 슬라이드) 위 기능을 하나씩 구현해보려고 한다.      🛠️1. React의 상태로 제어하는 이미지 슬라이드 방식먼저 기본적으로 React로 이미지 슬라이드를 어떻게 구현하는지 보자 1. 현재 이미지 인덱스를 저장할 상태를 생성한다.2. 왼쪽 혹은 오른쪽 이동시 currentIndex 값을 변경해줄 함수를 구현한다.이때 move 함수는 아래와 같은 계산을 한다.예를 들어 20개의 이미지( 0 ~ 19 )에 19번째에 오고 0번째로 갈 때 19 + 1 + data.length로 40이 되고, 이를 40 %..

📖들어가며..오늘은 팝오버 기능을 다양한 방식으로 구현하고, 정리해보려고 한다.사실 이전에 Modal과 비슷한 부분이 있어서 간단하게 정리했다.방법으로는해당 컨텐츠의 자식 요소로 팝오버를 출력하는 방법(조건부 렌더링)CreatePortal을 이용한 방법HTML 를 이용한 방법popover API를 이용한 방법이 있다.    🛠️1. 자식요소로 팝오버를 출력하는 방법(조건부 렌더링)가장 간단하게 생각할 수 있는 방법이다.popover가 필요한 각 요소에 하위 요소로 popover를 조건부 렌더링으로 나타내는 방식이다.간단하게 보면 이렇게 구성될 것이다.MenuPopover컴포넌트가 실제 popover요소이고, close 함수를 Props로 받는다.그리고 아래와 같이 구성한다.마치 모달과 비슷하게 Ove..