TypeScript6 React에서 사용자 친화적인 시간 입력 컴포넌트 만들기 들어가며웹 애플리케이션에서 시간 입력은 생각보다 까다로운 UX 과제입니다. 사용자는 빠르고 직관적으로 시간을 입력하길 원하지만, 잘못된 입력을 방지하고 일관된 형식을 유지해야 하는 개발자의 요구사항도 충족해야 합니다.이 글에서는 React를 사용하여 사용자 친화적인 시간 입력 컴포넌트를 구현한 경험을 공유하고자 합니다.기존 시간 입력의 문제점일반적인 시간 입력 방식의 문제점들:형식 강제: "HH:MM" 형식을 엄격하게 요구하여 사용자가 실수하기 쉬움범위 검증 부재: 25:00, 14:75 같은 잘못된 시간 입력 가능불편한 수정: 콜론(:) 위치에서 백스페이스 시 예상치 못한 동작타입 에러: 숫자가 아닌 문자 입력 가능개선된 시간 입력 컴포넌트 기능1. 실시간 범위 검증 - 리팩토링된 접근 방식먼저 매직 .. 2025. 7. 19. React 메모이제이션 가이드 - useCallback 중심의 2025년 성능 최적화 🚀 React 19 시대의 성능 최적화, 무엇이 달라졌을까?2025년, React 생태계는 큰 변화를 맞이했습니다. React 19의 등장과 함께 도입된 React Compiler는 자동 메모이제이션을 제공하며, useOptimistic, useActionState 같은 새로운 훅들은 사용자 경험을 한 단계 끌어올렸습니다.그렇다면 이제 useCallback은 더 이상 필요 없는 걸까요? 답은 "아니오"입니다. 오히려 언제, 어떻게 사용해야 하는지에 대한 판단이 더욱 중요해졌습니다.🎯 이 글을 읽고 나면React 19 환경에서 useCallback의 역할과 위치를 정확히 이해할 수 있습니다React Compiler와 수동 최적화의 적절한 균형점을 찾을 수 있습니다새로운 훅들(useOptimistic, .. 2025. 7. 14. Next.js 프로젝트에 TypeScript 타입 체크 설정하기: 놓치기 쉬운 필수 설정 Next.js 프로젝트에 TypeScript 타입 체크 설정하기: 놓치기 쉬운 필수 설정Next.js로 새 프로젝트를 시작할 때 npx create-next-app@latest를 사용하면 TypeScript가 기본으로 설정되지만, 의외로 타입 체크 명령어는 포함되어 있지 않습니다. 이 글에서는 Next.js 15와 TypeScript 5.x 환경에서 타입 체크를 설정하는 간단하면서도 유용한 방법을 소개합니다.알고 계셨나요? Next.js의 next build 명령어는 기본적으로 타입 체크를 수행하지만, 개발 중에는 별도의 타입 체크 명령어가 필요합니다.왜 타입 체크가 필요한가요?Next.js의 개발 서버(next dev)는 실시간으로 타입 에러를 보여주지만, 다음과 같은 상황에서는 별도의 타입 체크가 필.. 2025. 7. 14. [ERROR] Prisma 마이그레이션 후 타입스크립트 에러(feat.MongoDB)-해결 카카오톡 결제 api를 추가하면서 MonogoDB 스키마에 새로운 변수와 값을 추가해줘야 하는 일이 생겼다. 그래서 Prisma의 공식 문서를 참고하여 추가한 것까진 좋았으나, create에 새로 추가한 변수를 넣자마자 타입에러를 뿜어냈다. 당황해서 에러에 관련된 건 캡처를 못했지만, 해결한 방법을 올린다. 접근한 생각은 한번 데이터를 인식을 시켜줘야 할거 같단 생각이 들었다. 그렇게 찾은 방법이 prisma studio다. npx prisma studio 위 명령어를 치면, localhost 주소를 준다. 해당 주소로 들어가면, 이런 화면이 나온다. 사진의 맨 상단 위에 보이는 + 버튼을 누른다. 그러면 위와 같이 등록한 모델들이 나온다. 필자 같은 경우엔 Reservation이 문제였으므로 Reser.. 2023. 5. 17. 이전 1 2 다음
