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

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

🧐 들어가며: 폼은 생각보다 많은 책임을 가져요 프론트엔드에서 폼은 단순한 input 모음처럼 보이지만, 실제 서비스에서는 꽤 많은 책임을 가집니다. 입력값 저장, 유효성 상태, 에러 메시지, 파일 업로드, 동적 리스트, 미리보기, 페이지 이탈 방지까지 모두 폼과 연결됩니다. 필드가 몇 개 없을 때는 useState만으로도 충분하지만, 폼이 커지는...

🧐 들어가며: 서버에서 가져온 데이터를 클라이언트에서도 다시 요청해야 할까요? Next.js App Router를 사용하면 서버 컴포넌트에서 데이터를 미리 가져온 뒤 화면을 렌더링할 수 있습니다. 첫 화면에 필요한 데이터를 서버에서 준비할 수 있기 때문에 초기 로딩 경험을 개선하는 데 유리합니다. 하지만 클라이언트 컴포넌트에서 같은 데이터를 use...

🧐 들어가며: 화면 크기보다 컴포넌트 크기가 더 중요할 때 반응형 UI를 만들 때 가장 익숙한 도구는 미디어 쿼리입니다. @media (min-width: 768px) { /* tablet 이상 스타일 */ } 미디어 쿼리는 브라우저의 뷰포트 너비를 기준으로 스타일을 바꿉니다. 대부분의 레이아웃에서는 충분히 유용합니다. 하지만 컴포넌트 기...

🧐 들어가며: 작성 중인 폼을 그냥 떠나면 안 될 때 게시글 작성, 캐릭터 생성, 결제 정보 입력처럼 시간이 오래 걸리는 화면에서는 사용자가 실수로 페이지를 떠나는 상황을 막아야 합니다. 특히 작성 중인 내용이 저장되지 않았는데 뒤로가기를 누르거나 다른 링크를 클릭하면, 사용자는 입력한 내용을 잃어버릴 수 있습니다. 예전 Next.js Pages...

🧐 들어가며: 뒤로가기는 생각보다 까다로워요 상세 페이지나 결제 페이지를 만들다 보면 이전으로 버튼이 필요할 때가 많습니다. 처음에는 단순하게 router.back()을 사용하면 충분해 보입니다. router.back(); 하지만 실제 서비스에서는 몇 가지 애매한 상황이 생깁니다. 검색이나 광고를 통해 상세 페이지로 바로 들어온 사용자...

🧐 들어가며: resize 이벤트로 사이드바를 제어하면 아쉬운 점 반응형 사이드바를 만들 때 흔히 이런 요구사항을 만납니다. 화면이 1024px보다 좁아지면 사이드바를 접고, 다시 넓어지면 펼치는 기능입니다. 처음에는 자연스럽게 resize 이벤트를 떠올릴 수 있습니다. window.addEventListener("resize", handleR...

🧐 들어가며: 새 메시지가 왔는데 스크롤이 애매하게 멈췄어요 채팅 UI를 만들 때 자주 필요한 기능이 있습니다. 새 메시지가 추가되면 채팅창 스크롤을 가장 아래로 내려서 사용자가 최신 메시지를 바로 볼 수 있게 하는 기능입니다. 처음에는 메시지를 추가한 직후 바로 스크롤을 내렸습니다. element.scrollTop = element.scrol...

🧐 들어가며: textarea 높이를 자연스럽게 맞추고 싶었어요 댓글창이나 채팅 입력창을 만들다 보면 textarea 높이를 내용에 맞게 늘리고 싶을 때가 많습니다. 기본 textarea는 정해진 높이 안에서 스크롤이 생깁니다. 기능적으로는 문제가 없지만, 사용자가 긴 문장을 입력할 때 내부 스크롤이 생기면 입력 흐름이 조금 답답하게 느껴질 수 있...