들어가며: 백엔드 없이 회원가입을 만들 수 있을까? 프론트엔드 프로젝트를 만들다 보면 로그인과 회원가입은 거의 항상 필요해요. 처음에는 화면만 만들면 될 것 같지만, 실제로는 생각보다 많은 백엔드 기능이 필요합니다. 사용자 정보를 저장할 데이터베이스 이메일과 비밀번호를 검증하는 인증 시스템 로그인 세션 관리 이메일 인증 사용자...
[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 애니메이션을 보여주고 싶을 때 ...
[React] DOM 위치를 측정해 UI 동작 만들기
🧐 들어가며: 화면 위에서 요소가 어디에 있는지 알아야 할 때 프론트엔드 UI를 만들다 보면 단순히 데이터를 렌더링하는 것만으로는 부족할 때가 있습니다. 예를 들어 이런 상황입니다. 버튼 바로 아래에 팝오버를 띄우고 싶을 때 특정 요소가 화면에 들어왔는지 확인하고 싶을 때 스크롤 위치에 따라 헤더 스타일을 바꾸고 싶을 때 툴팁을 ...
[JavaScript] requestAnimationFrame 이해하기: 왜 setTimeout 대신 사용할까?
🧐 들어가며: 단순히 setTimeout을 쓰면 안 될까요? 태그 Overflow UI를 구현하던 중이었습니다. 부모 영역의 크기에 따라 태그가 줄바꿈되는지 계산하기 위해 각 태그의 offsetTop을 측정해야 했습니다. 그런데 이상하게도 어떤 순간에는 측정값이 예상과 다르게 나왔어요. 처음에는 이렇게 바로 측정했습니다. useLayoutEff...