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

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

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

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

🚀 반응형 웹의 패러다임 전환: @container 완벽 가이드 최근 대시보드 UI를 개발하면서 “특정 컴포넌트의 넓이에 따라 레이아웃이 유연하게 변해야 한다”는 요구사항을 맞닥뜨렸습니다. 기존의 미디어 쿼리(@media)만으로는 해결하기 어려운 복잡한 구조였죠. 이때 구원투수가 되어준 Tailwind CSS의 @container 도입 과정과 실전 ...

🚦 페이지 이탈 방지, 왜 이렇게 힘들까? Next.js App Router를 사용하면서 가장 당혹스러웠던 순간은 ‘작성 중인 폼이 있는데 사용자가 실수로 뒤로가기를 누를 때’였습니다. 이전 Pages Router에서는 router.events.on('routeChangeStart', ...)라는 이벤트 리스너를 통해 비교적 쉽게 제어할 수 있었지만...

🧐 뒤로가기, 왜 그냥 router.back()만 쓰면 안 될까? 개발을 하다 보면 상세 페이지나 결제 페이지에서 “이전으로” 버튼을 만들어야 할 때가 많습니다. 처음에는 단순하게 router.back() 혹은 history.back()을 사용했죠. 하지만 실전에서는 예상치 못한 상황들이 터져 나왔습니다. 외부 유입 시 미동작: 광고나 검색을...

📝 도입: 왜 resize 이벤트가 불편했을까? 사이드바가 특정 화면 너비(예: 1024px) 이하로 내려갈 때 자동으로 접히는 기능을 구현하면서 처음에는 당연하게 window.addEventListener('resize', ...)를 떠올렸습니다. 하지만 구현 후 몇 가지 찝찝한 점이 남더군요. 불필요한 호출: 1px만 변해도 함수가 미...

🧐 왜 스크롤 이동이 내 마음대로 안 될까? 채팅 서비스를 구현하다 보면 가장 신경 쓰이는 부분이 바로 ‘새로운 메시지가 왔을 때 스크롤을 최하단으로 내리는 로직’이다. 처음에는 단순히 새로운 데이터가 배열에 추가된 직후 element.scrollTop = element.scrollHeight 코드를 실행했다. 하지만 문제가 발생했다. 데이터는 분...

🚀 도입: 인라인 스타일 탈출, 그리고 자동 높이 조절 프로젝트를 진행하다 보면 유독 textarea가 말썽을 부릴 때가 많다. 기본적으로 제공되는 고정 높이는 사용자 경험(UX)을 해치기 일쑤다. 처음에는 자바스크립트로 높이를 조절하면서 style= 같은 인라인 스타일을 남발하곤 했다. 하지만 Tailwind CSS를 도입하면서 “어떻게 하면...