개발새발 로그

📖들어가며..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를 초기화 중..

📖들어가며..이번에는 리액트로 Tooltip을 구현해보려고 한다. 간혹 프로젝트에서 tooltip을 사용하곤 하는데hover일 때와 click일 때를 구분해서 사용하기도 한다. click일 때는 조건으로 내부 요소에서 클릭이 가능하게 해야한다.즉 내부 클릭시 tooltip이 닫히면 안된다.또한 외부 클릭시 닫혀야할 것이다. 그리고 tooltip이 만약 viewport에 넘어가 보이지 않을 경우에 자동으로 위치를 변경해주는 기능도 추가해보려고 한다.만약 기본 값이 "left" 일 때 viewport의 가로가 좁혀질 경우 "right"로 바뀌는 것이다. 나는 styled-component를 사용하고 있어서 tooltip이 보이는 상태가 간단히 구현될 것이다. 🛠️Tooltip 컴포넌트 구현하기먼저 구현하..

📖들어가며...개인 프로젝트로 Tooltip 기능을 구현하던 중 만난 상황에 대해서 정리해보려고 한다.정말 간단한 문제인데 자칫하면 실수할 법한 상황이라 공유하면 좋을 것 같다는 생각이 들었다. 먼저 나는 Tootip이 click, focus, hover 기능이 한 컴포넌트에서 모두 기능할 수 있도록 구현하려고 했다.그래서 아래와 같은 코드가 작성되었다.이렇게 등록해서 click, focus, hover 모두 가능하게 하려고 했다. click은 따로 window.addEventListener로 click된 tooltip이 닫히도록 했다.이때 click에서 예외 상황이 발생할 수 있다.만약 click으로 tooltip이 나오는 경우 tooltip 내부 요소를 클릭했을 때는 tooltip이 닫혀서는 안된다..

📖들어가며..24년 1월 18일 블로그 포스팅을 시작으로 회원가입 기능에 대해서 계속 리팩토링을 고민해왔었다.처음에는 각각의 Form 데이터들을 하나의 컴포넌트로 만들어서 재사용성이 낮은 기능으로 개발했었다.이후 팀원들의 코드리뷰와 피드백으로 useForm이라는 커스텀 훅을 만들었고, 중복되는 로직들을 개선했다.  24년 3월 29일 블로그 포스팅에서는 useForm 훅 리팩토링을 시도했었다.useForm이라는 커스텀 훅 개발에 자신감을 느끼고, 개발과정을 기록했었다.기록하면서 "좋지않은 부분이 있는 것 같은데..?"라는 생각이 들었었다.그래서 추가로 리팩토링을 시도하게 됐다.그래서 해당 문제를 의존성을 알리는 객체 dependencies를 받을 수 있게끔해서 해결했다.간단하게 말하면"비밀번호확인은 비..

📖들어가며..제어 컴포넌트와 비제어 컴포넌트는 리액트를 사용하면서 많이 들어봤을 것이다.나는 제어컴포넌트란 리액트의 상태로 관리되는 컴포넌트를 의미하는 것이고,비제어 컴포넌트는 그 반대의 의미라고 이해하고 있다. 제어, 비제어 컴포넌트 패턴을 보면서 그 내용을 더 깊게 이해해보려고 한다.  🤔제어 컴포넌트(Controlled Component)란?제어 컴포넌트는 React에 의해 값이 제어되는 폼 엘리먼트입니다.컴포넌트의 값은 항상 프로퍼티를 통해 명시적으로 설정되고 콜백을 통해 업데이트됩니다. 즉, 컴포넌트의 상태는 항상 입력 데이터와 동기화되므로 React가 컴포넌트의 동작을 제어할 수 있고 개발자가 사용자 입력을 쉽게 처리할 수 있습니다.🤔제어컴포넌트를 사용할 경우는?폼 입력값을 실시간으로 검..

📖들어가며..오늘은 오랜만에 리액트에서 자주 사용하는 패턴에 대해서 공부해보려고 한다.짧은 내용들을 끊어서 포스팅하고 있는 만큼 빨리 학습해야겠다고 생각이 든다. 👨‍💻 Disabled prop PatternDisabled prop Pattern이란 무엇일까?disabled prop 패턴은 버튼, 링크, 양식 필드와 같은 대화형 요소를 사용할 수 없거나 적용할 수 없을 때 비활성화하는 방법을 제공하여 접근 가능한 사용자 인터페이스를 만들 수 있도록 하는 React에서 사용되는 디자인 패턴입니다.이 패턴은 컴포넌트의 대화형 요소에 disabled 프로퍼티를 추가하는 것으로, true로 설정하면 요소를 비활성화하고 사용자 입력을 받지 못하도록 합니다. 이는 불완전한 양식이나 불충분한 사용자 권한 등 특..

📖들어가며...아코디언 기능을 만들어보고나서 이제는 TabMenu 기능을 만들어보려고 한다.사실 TabMenu기능은 아코디언 기능과 매우 유사하다.열고 닫을 때 처리를 해야하고, 현재 보여줘야할 요소를 상태로 관리하면 된다. 그럼 저번 아코디언 기능을 만들 때와 같이 다양한 방식으로 TabMenu를 구현해보자.  🤔TabMenu를 만든다고 한다면..처음에 TabMenu 기능을 만든다고 한다면 아래와 같이 만들 수 있다.const TabMenu1 = () => { //현재 선택한 탭 요소 const [currentId, setCurrentId] = useState(data[0].id) //탭 요소 클릭 이벤트 const toggleItem = (id: string) => () => { se..