들어가며 채팅 입력창이나 에디터를 만들다 보면 버튼을 눌렀을 때 현재 커서 위치에 특정 문구를 삽입해야 할 때가 있습니다. 예를 들어 이모지, 멘션, 템플릿 문구를 입력 중인 위치에 넣는 기능입니다. 단순히 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는 이런 전역 상태를 가볍고 단순하게 관리할 수 있게 도와주는 라이브러리입니다. ...

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

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

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