🧐 들어가며: resize 이벤트로 사이드바를 제어하면 아쉬운 점 반응형 사이드바를 만들 때 흔히 이런 요구사항을 만납니다. 화면이 1024px보다 좁아지면 사이드바를 접고, 다시 넓어지면 펼치는 기능입니다. 처음에는 자연스럽게 resize 이벤트를 떠올릴 수 있습니다. window.addEventListener("resize", handleR...

🧐 들어가며: 새 메시지가 왔는데 스크롤이 애매하게 멈췄어요 채팅 UI를 만들 때 자주 필요한 기능이 있습니다. 새 메시지가 추가되면 채팅창 스크롤을 가장 아래로 내려서 사용자가 최신 메시지를 바로 볼 수 있게 하는 기능입니다. 처음에는 메시지를 추가한 직후 바로 스크롤을 내렸습니다. element.scrollTop = element.scrol...

🧐 들어가며: textarea 높이를 자연스럽게 맞추고 싶었어요 댓글창이나 채팅 입력창을 만들다 보면 textarea 높이를 내용에 맞게 늘리고 싶을 때가 많습니다. 기본 textarea는 정해진 높이 안에서 스크롤이 생깁니다. 기능적으로는 문제가 없지만, 사용자가 긴 문장을 입력할 때 내부 스크롤이 생기면 입력 흐름이 조금 답답하게 느껴질 수 있...

들어가며 채팅 입력창이나 에디터를 만들다 보면 버튼을 눌렀을 때 현재 커서 위치에 특정 문구를 삽입해야 할 때가 있습니다. 예를 들어 이모지, 멘션, 템플릿 문구를 입력 중인 위치에 넣는 기능입니다. 단순히 value + "문구"처럼 처리하면 항상 문자열 끝에만 추가됩니다. 사용자가 문장 중간을 수정하던 중이라면 커서 흐름이 깨져서 불편한 UX...

normalize.css란? 브라우저마다 HTML 요소의 기본 스타일은 조금씩 다릅니다. normalize.css는 이런 브라우저 간 스타일 차이를 줄여주는 CSS 라이브러리입니다. 모든 기본 스타일을 제거하는 것이 아니라, 유용한 기본 스타일은 유지하면서 브라우저별 차이를 보정하는 데 목적이 있습니다. reset.css와의 차이 rese...

reset.css란? 브라우저는 각 HTML 요소에 기본 스타일을 가지고 있습니다. 예를 들어 body에는 기본 margin이 있고, ul에는 list-style과 padding이 있으며, 버튼과 input에도 브라우저 기본 스타일이 적용됩니다. reset.css는 이런 기본 스타일을 최대한 제거해 모든 요소를 같은 출발점에서 스타일링할 수 있게...

들어가며 검색창에 글자를 입력할 때마다 API 요청을 보내면 서버 요청이 너무 많이 발생할 수 있습니다. 사용자가 react를 입력하는 동안 r, re, rea, reac, react마다 요청이 나가면 비효율적입니다. 이럴 때 사용할 수 있는 기법이 debounce입니다. debounce란? debounce는 이벤트가 연속해서 발생할 때,...

들어가며 프론트엔드 개발을 하다 보면 scroll, resize, mousemove처럼 짧은 시간 안에 아주 많이 발생하는 이벤트를 다룰 때가 있습니다. 이때 이벤트가 발생할 때마다 무거운 로직을 실행하면 성능 문제가 생길 수 있습니다. 이런 상황에서 사용할 수 있는 도구가 throttle입니다. throttle이란? throttle은 일...

들어가며 Zustand로 전역 상태를 관리하다 보면 브라우저를 새로고침했을 때 상태가 초기화되는 문제를 만날 수 있습니다. 예를 들어 로그인 토큰, 다크 모드 설정, 언어 설정처럼 새로고침 후에도 유지되어야 하는 값이 있습니다. 이럴 때는 Zustand의 persist middleware를 사용할 수 있습니다. persist란? persi...

들어가며 React 프로젝트가 커지면 여러 컴포넌트에서 같은 상태를 공유해야 하는 상황이 생깁니다. props로 계속 내려보내면 props drilling이 생기고, Context API만으로 관리하면 상태가 많아질수록 구조가 복잡해질 수 있습니다. Zustand는 이런 전역 상태를 가볍고 단순하게 관리할 수 있게 도와주는 라이브러리입니다. ...