개발새발 로그

📖들어가며..DropDownBox기능을 구현해보려고 한다.해당 기능을 구현하면서의 과정은 아래와 같다. 1. 합성컴포넌트 패턴과 Context API를 이용한 구현2. 합성컴포넌트 패턴에 맞는 HeadLess 컴포넌트로 구현3. HeadLess 컴포넌트와 Custom Hook을 이용한 구현4. HTML select를 이용한 구현5. 보통 DropDown 사용하는 방식 1번부터 기능을 구현하면서 해당 방식의 단점을 개선해가며 기능을 구현해보았다.이렇게 기능을 구현하면서 어떤 기능이 더 적합한지 알아보고, 기록해보려고 한다    ⭐1. 합성컴포넌트 패턴과 Context API를 이용한 구현 1-1. 합성 컴포넌트 패턴으로 설계하기각 DropDownBox를 구현할 때 합성 컴포넌트 패턴을 이용해서 설계하고,..

📖들어가며..이전에 이미지 슬라이드를 구현했는데이번에는 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..

📖들어가며..이전에 Modal을 구현하는 것을 기록한 적이 있다.useModal이라는 커스텀 훅을 만들면서 문제점을 개선해나갔었다.이번에는 좀 더 다양한 방법을 만들어보면서 장단점을 알아보고,기존에 만들었던 useModal도 개선해보려고 한다.   🛠️1. Context API를 이용한 방법먼저 Modal 데이터들을 Context API에서 관리하고 뿌려줄 것이다.Context API 설계는 이전에 스낵바 방식과 비슷하다.여기서 특이한 점은 Map으로 관리한다는 것이다.Map으로 관리하면 모달을 추가하거나 업데이트할 때 아래와 같이 간단하게 가능하다.Map을 사용하면 기존 데이터를 간단하게 업데이트할 수 있다.또한 간단히 데이터를 순서가 유지되면서 추가할 수 있다. 만약 배열을 사용한다면 아래와 같이..

📖들어가며..오늘은 스낵바를 구현해보려고 합니다스낵바는 Toast와는 조금 다른 개념입니다.Toast:화면의 상단 또는 하단에 잠깐 표시됩니다. 일반적으로 화면의 중앙에 뜨지 않습니다.사용자가 상호작용할 수 없으며, 자동으로 사라집니다. 사용자가 메시지를 클릭하거나 무언가를 선택할 수 없습니다. Snackbar:사용자가 버튼을 클릭하여 추가 작업을 수행할 수 있는 옵션을 제공합니다. 예를 들어, "실행 취소" 버튼을 포함할 수 있습니다.화면의 하단에 표시되며, 사용자와의 상호작용을 위한 버튼을 포함할 수 있습니다.쉽게말하면 스낵바는 별도의 액션이 가능한 Toast입니다.Toast에서 확장이 된 것이라고 생각합니다. 아무튼 스낵바를 구현해보려고하는데 Context API와 CreatePortal을 이용해..

📖들어가며..ScrollSpy를 구현해봐라! 했을 때 감이 전혀 안잡혔었다.구현해본 경험이 없는 UI기도 했고, 각 요소의 위치 값이나 ref를 활용하는 방법을 생각해내지 못했다.그래서 오늘은 ScrollSpy기능을 구현하면서 기록해보려고 한다.  스크롤 이벤트로 ScrollSpy 구현하기먼저 스크롤 이벤트로 ScrollSpy를 구현해보려고 한다.ScrollSpy의 구현 조건을 나열하면서 기록하려고 한다. 1. 어느 지점에서 ScrollSpy가 변하게 할 것인가?나는 1번 요소의 1/2 지점에 도달했을 때 2번 요소가 강조되게 하려고 한다.스크롤 값으로 설명하자면 하나의 Section이 100의 height를 가진다고 할 때 0 ~ 50 까지가 Section 1이 강조되는 구간이고,50 ~ 150 까지..

📖들어가며..24년 2월 23일에 처음으로 useModal을 만들기로 계획했다.Modal을 사용하려면 Modal이 열릴 컴포넌트와 열리고 닫히는 상태를 반복적으로 선언하고 사용하는 부분에서 불편함을 느꼈었다.그래서 useModal이라는 커스텀 훅을 개발하려고 마음먹고 시작했다.이때는 "Modal을 구현할 때는 createPortal을 활용하면 좋다."는 부분과 "재사용성 높은 Modal"에 꽂혀 혼자서 이것저것 구현하고 있었다.하지만 해당 코드에는 많은 문제점들이 있었다.24년 3월 7일에 문제점을 인지하고 리팩토링을 계획했다.문제점은1. css의 display : none을 사용해서 Modal이 보이거나 사라지는 부분은 좋지 않다.2. useModal 훅 내에서 ModalComponent를 초기화 중..