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는 이런 전역 상태를 가볍고 단순하게 관리할 수 있게 도와주는 라이브러리입니다. ...

들어가며 검색 기능을 만들다 보면 사용자가 이전에 검색했던 단어를 다시 보여주고 싶을 때가 있습니다. 서버에 저장할 만큼 중요한 정보가 아니라면, 브라우저의 localStorage만으로도 간단한 최근 검색어 기능을 만들 수 있습니다. 이번 글에서는 최근 검색어를 최대 6개까지 저장하고, 중복 검색어는 맨 앞으로 올리는 방식으로 구현해볼게요. ...

들어가며 사용자 목록이나 학생 목록을 만들다 보면 이름을 초성별로 필터링해야 할 때가 있습니다. 예를 들어 ㄱ을 선택하면 김서영, 강도윤처럼 초성이 ㄱ인 이름만 보여주는 방식입니다. 한글은 유니코드 규칙을 이용하면 첫 글자의 초성을 계산할 수 있습니다. 한글 초성 배열 한글 초성은 아래 순서로 구성됩니다. const CHO_SEONG =...

들어가며 관리자 페이지나 목록 UI를 만들다 보면 이름을 가나다순으로 정렬해야 할 때가 있습니다. JavaScript에서는 배열의 sort() 메서드로 문자열을 정렬할 수 있습니다. 하지만 한글 정렬에서는 단순 sort()보다 localeCompare()를 함께 사용하는 편이 더 명확합니다. 기본 sort 사용하기 const names =...

들어가며 JavaScript의 기본 Date 객체만으로 날짜를 다루다 보면 포맷 변경이나 날짜 계산이 번거롭게 느껴질 때가 있습니다. 이럴 때 날짜 라이브러리를 사용하면 원하는 형식으로 날짜를 보여주거나, 특정 날짜를 더하고 빼는 작업을 쉽게 처리할 수 있습니다. 이번 글에서는 moment의 기본 사용법을 정리해볼게요. 설치하기 npm i...

Scroll Snap이란? Scroll Snap은 사용자가 스크롤했을 때 특정 요소 위치에 스크롤이 자연스럽게 맞춰지도록 하는 CSS 기능입니다. 예를 들어 상품 카드나 섹션이 하나씩 딱 맞춰 보이게 만들 때 사용할 수 있습니다. JavaScript 없이 CSS만으로 구현할 수 있어서 간단한 스냅 UI에는 매우 유용합니다. 기본 구조 Sc...