전체 글42 [JavaScript] lodash의 debounce: cancel / flush 프론트엔드 개발자로서 실무를 하다 보면 수많은 상태를 관리하고, 사용자 입력에 실시간으로 반응해야 하는 상황을 마주합니다.특히 검색어 입력, 무한 스크롤, 윈도우 리사이즈와 같은 이벤트들은 순간에도 수십, 수백 번의 함수 호출을 발생시키곤 합니다.이런 성능 저하를 해결하기 위해 보통 디바운스(Debounce)를 도입합니다.하지만 무분별한 디바운스 사용이나 제어되지 않은 설정은 오히려 의도치 않은 버그나 UX 저하를 불러오기도 합니다. "분명 디바운스를 걸었는데 왜 데이터가 꼬이지?" "API가 호출 타이밍이 왜 이상하지" 이런 상황에 마주한다면, 디바운스를 제대로 '제어'해야 할 때라고 생각합니다.오늘은 lodash의 debounce를 더욱 정교하게 만들어주는 cancel과 flush 메서드를 통해,성능.. 2026. 3. 31. [React] React Hook Form과 Zod로 폼 유효성 검증 구현 단순한 데이터 검증을 넘어, 사용자 입력을 관리할 때. React Hook Form과 Zod를 함께 사용하면 코드의 양은 크게 줄어들고, 타입 안정성은 극대화될 수 있습니다.. 1. 시작, 필수 패키지 설치 React Hook Form과 Zod를 연결해주는 어댑터인 @hookform/resolvers 추가로 설치.npm install react-hook-form zod @hookform/resolvers 2. 왜 이 조합?기본적인 React Hook Form의 register 방식은 검증 로직이 JSX 안에 파편화되어 유지보수가 어려움.하지만 Zod를 연동하면 하기의 장점이 있습니다.비즈니스 로직의 분리: 검증 로직(Schema)을 컴포넌트 외부에서 관리할 수 있다.강력한 타입 추론: 폼에 입력된 데.. 2026. 3. 12. [TypeScript] Zod 시작하기, 타입스크립트 Validation 라이브러리 TypeScript를 사용하면서 가장 흔히 겪는 문제 중 하나는 외부에서 들어오는 데이터(API 응답, 사용자 입력 등)의 타입을 보장할 수 없다는 점인데. TypeScript의 타입 시스템은 컴파일 타임에만 작동하기 때문입니다.이러한 문제를 해결하고 런타임에서도 데이터의 무결성을 완벽하게 보장해주는 라이브러리가 바로 Zod 입니다. 1. Zod란?Zod는 TypeScript-first 스키마 선언 및 검증 라이브러리로.단순히 데이터를 검사하는 것을 넘어, 정의한 스키마로부터 TypeScript 타입을 자동으로 추론할 수 있다는 점이 가장 큰 특징입니다.https://zod.dev/ Intro | ZodIntroduction to Zod - TypeScript-first schema validation .. 2026. 3. 12. AI Agent가 커밋까지? Claude Code 사용법(기초, 워크플로우 자동화) https://code.claude.com/docs 최근 회사에서 Claude Code를 업무에 도입하며 경험한 여러가지 편리하고 강력한 경험들에 대해서 기록합니다.Claude Code를 사용하며 가장 놀라웠던 점은 프로젝트 내의 기존 코드의 스타일 가이드, 디자인 시스템, 심지어 다국어 처리(i18n) 패턴까지 스스로 학습하여 완벽하게 적용한다는 점이었습니다. 어느정도 스크립트를 세밀하게 전달하거나 디자인 시안을 png로 업로드 하면, 기존의 코드와 거의 동일한 형식으로 화면UI와 컴포넌트를 생성해주기에, 정말 편리한 경험이었고 최근에 배포한 기능의 개발시간을 효과적으로 단축 시킬 수 있었습니다.(물론, AI를 무조건적으로 신뢰할 수 없기에 코드 commit 전 변경사항을 꼼꼼히 검수하는 시간은 필.. 2026. 2. 9. 이전 1 2 3 4 ··· 11 다음
