🧐 들어가며: 왜 해시맵과 Set이 자꾸 나올까요? 알고리즘 문제를 풀다 보면 이런 말을 자주 보게 됩니다. 해시맵으로 풀기 Set으로 중복 제거 O(1) 조회 처음에는 그냥 외워서 쓰게 되지만, 정확히 왜 좋은지 모르면 비슷한 문제에서 다시 막히기 쉽습니다. 이 글에서는 해시맵과 Set을 단순히 자료구조 이름으로 외우는 대신, 언제 쓰면 좋...

🧐 들어가며: 단순 업로드만으로는 조금 아쉬웠어요 캐릭터 생성 페이지의 대표 이미지 업로드 기능을 만들다 보면 단순히 파일을 올리는 것만으로는 부족할 때가 있습니다. 사용자가 원하는 부분을 직접 잘라서 대표 이미지로 저장할 수 있어야 하기 때문입니다. 예를 들어 이런 경험이 필요합니다. 이미지를 업로드하고 원하는 비율을 고르고 마우...

🧐 들어가며: 왜 굳이 DOM 밖으로 보내야 할까요? React로 UI를 만들다 보면 요소가 화면의 다른 위치에 있어야 할 때가 있습니다. 예를 들어 이런 경우입니다. 모달이 부모 요소의 overflow: hidden에 잘리지 않아야 할 때 툴팁이나 드롭다운이 다른 레이아웃 위에 떠야 할 때 사이드바 안에 있는 버튼이지만 팝오버는 화...

🧐 들어가며: 다국어 처리는 번역 파일만 만든다고 끝나지 않아요 Next.js에서 다국어 처리를 하려고 하면 처음에는 이렇게 생각하기 쉽습니다. 언어별 JSON 파일만 만들면 되는 거 아닐까? 물론 번역 파일은 중요합니다. 하지만 실제 프로젝트에서는 그보다 더 많은 결정이 필요합니다. URL을 /ko/about, /en/about처럼 언...

🧐 들어가며: 타입 문법이 갑자기 어려워지는 순간 TypeScript를 쓰다 보면 처음에는 string, number, boolean 정도만 알아도 꽤 많은 코드를 작성할 수 있습니다. const name: string = "taewok"; const age: number = 20; const isAdmin: boolean = false; 그런...

🧐 들어가며: 애니메이션은 왜 어렵게 느껴질까요? React에서 애니메이션을 만들다 보면 처음에는 간단해 보입니다. 버튼에 hover 효과를 주거나, 모달이 열릴 때 살짝 나타나는 정도는 CSS transition으로도 충분합니다. 하지만 조금만 복잡해지면 고민이 생깁니다. 컴포넌트가 사라지기 전에 exit 애니메이션을 보여주고 싶을 때 ...

🧐 들어가며: 단순히 setTimeout을 쓰면 안 될까요? 태그 Overflow UI를 구현하던 중이었습니다. 부모 영역의 크기에 따라 태그가 줄바꿈되는지 계산하기 위해 각 태그의 offsetTop을 측정해야 했습니다. 그런데 이상하게도 어떤 순간에는 측정값이 예상과 다르게 나왔어요. 처음에는 이렇게 바로 측정했습니다. useLayoutEff...

🧐 들어가며: 모달이 하나일 때와 여러 개일 때는 달라요 이번 프로젝트에서는 여러 모달을 전역에서 관리하기 위해 Zustand 기반의 모달 시스템을 사용하고 있습니다. 처음에는 단일 모달을 여닫는 정도의 구조였습니다. 예를 들어 로그인 모달을 열고, 닫기 버튼을 누르면 닫히는 단순한 방식이었어요. 하지만 서비스가 커지면서 모달을 하나만 관리하는 ...

🧐 들어가며: 태그가 많아지면 카드 높이가 흔들려요 카드 UI를 만들다 보면 태그 목록을 자주 다루게 됩니다. 예를 들어 이런 형태예요. #소꿉친구 #장난스러움 #츤데레 #학교 #청춘 #짝사랑 #일상 문제는 태그 개수가 많아질수록 카드 높이가 들쭉날쭉해진다는 점이었어요. 카드 목록에서는 높이가 어느 정도 일정해야 화면이 정돈되어 보이기 때문에...

🧐 들어가며: 폼 상태 관리 다음에는 검증 구조가 복잡해져요 이전 글에서는 React Hook Form을 사용해 회원가입 폼과 캐릭터 생성 폼의 상태를 관리한 경험을 정리했습니다. React Hook Form은 입력값, 에러, 동적 배열, isDirty 같은 폼 상태를 하나의 흐름으로 다룰 수 있게 해줍니다. 하지만 폼이 커질수록 또 다른 문제가 ...