들어가며: 바깥을 클릭하면 닫히는 UI 드롭다운, 모달, 툴팁, 팝오버 같은 UI를 만들다 보면 이런 동작이 자주 필요해요. 메뉴 버튼 클릭 ↓ 드롭다운 열림 ↓ 드롭다운 바깥 영역 클릭 ↓ 드롭다운 닫힘 사용자 입장에서는 너무 자연스러운 동작이지만, 막상 구현하려고 하면 한 가지 질문이 생깁니다. "지금 클릭한 곳이 이 요소 안쪽인지 바깥쪽...
[Next.js] Zustand로 undo, redo 기능 구현하기
들어가며: undo와 redo는 상태 기록 문제다 문서 편집기, 이미지 편집기, 폼 빌더, 캔버스 도구 같은 UI를 만들다 보면 사용자가 방금 한 작업을 되돌리고 싶어 하는 순간이 생겨요. 예를 들면 이런 기능입니다. 텍스트를 수정했다가 이전 내용으로 되돌리기 삭제한 블록 다시 복구하기 카드 순서를 바꿨다가 원래대로 돌리기 설정값...
[Supabase] 프론트엔드 개발자를 위한 Supabase 회원가입 구현하기
들어가며: 백엔드 없이 회원가입을 만들 수 있을까? 프론트엔드 프로젝트를 만들다 보면 로그인과 회원가입은 거의 항상 필요해요. 처음에는 화면만 만들면 될 것 같지만, 실제로는 생각보다 많은 백엔드 기능이 필요합니다. 사용자 정보를 저장할 데이터베이스 이메일과 비밀번호를 검증하는 인증 시스템 로그인 세션 관리 이메일 인증 사용자...
[React] hello-pangea/dnd로 드래그 앤 드롭 리스트 만들기
드래그 앤 드롭, 생각보다 금방 복잡해진다 리스트 순서를 바꾸는 기능은 처음엔 단순해 보여요. 그런데 막상 구현하려고 하면 생각보다 챙길 게 많습니다. 마우스로 끌기 터치로 끌기 키보드로도 조작하기 드롭했을 때 배열 순서 바꾸기 드래그 중 UI 상태 보여주기 스크롤 컨테이너 안에서도 자연스럽게 동작하기 이럴 때 @hel...
[JavaScript] 해시맵과 Set으로 알고리즘 문제를 푸는 법
🧐 들어가며: 왜 해시맵과 Set이 자꾸 나올까요? 알고리즘 문제를 풀다 보면 이런 말을 자주 보게 됩니다. 해시맵으로 풀기 Set으로 중복 제거 O(1) 조회 처음에는 그냥 외워서 쓰게 되지만, 정확히 왜 좋은지 모르면 비슷한 문제에서 다시 막히기 쉽습니다. 이 글에서는 해시맵과 Set을 단순히 자료구조 이름으로 외우는 대신, 언제 쓰면 좋...
[React] react-easy-crop으로 대표 이미지 크롭 기능 구현하기
🧐 들어가며: 단순 업로드만으로는 조금 아쉬웠어요 캐릭터 생성 페이지의 대표 이미지 업로드 기능을 만들다 보면 단순히 파일을 올리는 것만으로는 부족할 때가 있습니다. 사용자가 원하는 부분을 직접 잘라서 대표 이미지로 저장할 수 있어야 하기 때문입니다. 예를 들어 이런 경험이 필요합니다. 이미지를 업로드하고 원하는 비율을 고르고 마우...
[React] createPortal로 DOM 밖으로 UI 보내기
🧐 들어가며: 왜 굳이 DOM 밖으로 보내야 할까요? React로 UI를 만들다 보면 요소가 화면의 다른 위치에 있어야 할 때가 있습니다. 예를 들어 이런 경우입니다. 모달이 부모 요소의 overflow: hidden에 잘리지 않아야 할 때 툴팁이나 드롭다운이 다른 레이아웃 위에 떠야 할 때 사이드바 안에 있는 버튼이지만 팝오버는 화...
[Next.js] next-intl로 다국어 처리 제대로 이해하고 적용하기
🧐 들어가며: 다국어 처리는 번역 파일만 만든다고 끝나지 않아요 Next.js에서 다국어 처리를 하려고 하면 처음에는 이렇게 생각하기 쉽습니다. 언어별 JSON 파일만 만들면 되는 거 아닐까? 물론 번역 파일은 중요합니다. 하지만 실제 프로젝트에서는 그보다 더 많은 결정이 필요합니다. URL을 /ko/about, /en/about처럼 언...
[TypeScript] Partial, Path, T 제대로 이해하고 활용하기
🧐 들어가며: 타입 문법이 갑자기 어려워지는 순간 TypeScript를 쓰다 보면 처음에는 string, number, boolean 정도만 알아도 꽤 많은 코드를 작성할 수 있습니다. const name: string = "taewok"; const age: number = 20; const isAdmin: boolean = false; 그런...
[React] Framer Motion 제대로 이해하고 다루기
🧐 들어가며: 애니메이션은 왜 어렵게 느껴질까요? React에서 애니메이션을 만들다 보면 처음에는 간단해 보입니다. 버튼에 hover 효과를 주거나, 모달이 열릴 때 살짝 나타나는 정도는 CSS transition으로도 충분합니다. 하지만 조금만 복잡해지면 고민이 생깁니다. 컴포넌트가 사라지기 전에 exit 애니메이션을 보여주고 싶을 때 ...