개발새발 로그

📖들어가며..이전에 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 까지..