들어가며 검색 기능을 만들다 보면 사용자가 이전에 검색했던 단어를 다시 보여주고 싶을 때가 있습니다. 서버에 저장할 만큼 중요한 정보가 아니라면, 브라우저의 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...

들어가며 서비스를 만들다 보면 로그인한 사용자만 접근할 수 있는 페이지가 필요합니다. 예를 들어 마이페이지, 결제 페이지, 관리자 페이지 같은 화면입니다. 로그인하지 않은 사용자가 이런 페이지에 접근하면 로그인 페이지로 이동시키는 처리가 필요합니다. PrivateRoute 만들기 React Router에서는 조건에 따라 Navigate를 ...

들어가며 무한 스크롤이나 등장 애니메이션을 만들 때는 특정 요소가 화면에 들어왔는지 감지해야 합니다. 브라우저에는 Intersection Observer API가 있지만, React에서 더 편하게 쓰고 싶다면 react-intersection-observer 라이브러리를 사용할 수 있습니다. 이번 글에서는 useInView를 사용해 요소 감지와 ...

발생한 문제 styled-components로 컴포넌트를 만들고 props를 전달하다 보면 React 콘솔에 경고가 나타날 수 있습니다. 예를 들어 스타일 계산에만 쓰려고 backgroundColor 같은 prop을 넘겼는데, 이 값이 실제 DOM 요소까지 전달되는 경우입니다. React는 알 수 없는 DOM 속성을 발견하면 경고를 보여줍니다. ...

들어가며 버튼 컴포넌트를 만들다 보면 색상, 폰트, 배경색이 조금씩 다른 버튼이 필요해집니다. 이때 매번 새 컴포넌트를 만들기보다 props로 값만 바꿀 수 있으면 재사용성이 좋아집니다. styled-components에서는 props와 theme을 함께 사용해 스타일 값을 동적으로 선택할 수 있습니다. theme 예시 먼저 theme 객...

들어가며 JavaScript 객체는 key와 value로 데이터를 저장합니다. 객체 안의 값을 사용하려면 속성에 접근해야 합니다. 가장 자주 사용하는 방법은 점 표기법과 대괄호 표기법입니다. 점 표기법 점 표기법은 가장 기본적인 객체 속성 접근 방법입니다. const person = { name: "taewok", age: 23,...