프론트엔드 개발자 엄성준 블로그

  • 홈
  • 태그

enter 키 입력 시 두번 실행 1

<textarea />를 활용한 채팅 입력창에서 한글 Enter 키 입력 시 메시지가 두 번 전송되는 이유

🧪 코드 및 현상 재현처음에는 아래와 같은 로직으로 채팅 입력창을 구현했습니다.사용자가 에 메시지를 입력한 뒤 Enter 키를 누르면, 메시지를 전송하고 입력창을 초기화하는 구조입니다.const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); // 줄바꿈 방지 sendMessage(inputValue); setInputValue(''); }}; 한글로 "안녕하세요"를 입력하고 Enter를 누르면,메시지가 두 번 전송되거나마지막 글자인 "요"만 따로 전송되는 등 이상한 동작이 나타났습니다.처음에는 handleSend() 함수가 두 번 호출되는 문제라고 생..

지식 정리 📝 2025.06.19
이전
1
다음
더보기
프로필사진

꾸준함을 강점으로 삼고 있는 프론트엔드 개발자 엄성준 블로그입니다.

  • 카테고리 📂 (379)
    • 코딩 테스트 풀이 🛠 (232)
    • 지식 정리 📝 (75)
    • zero-base 프론트엔드 스쿨 ⛪️ (20)
    • 3월 협업 프로젝트(1석 4조) 👨‍👩‍👧‍👦 (19)

Tag

react, 프로그래머스, exceljs, String(), Number(), 프론트엔드, sort(), indexOf(), join(), 제로베이스, 오토위니, autowini, next.js, 제로베이스 프론트엔드 스쿨, 프론트엔드 개발자 엄성준, 프론트엔드 스쿨, 프론트엔드 개발자, 엄성준, forEach(), split(),

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

방문자수Total

  • Today :
  • Yesterday :

꾸준함이 강점이자 자랑인 프론트엔드 개발자 엄성준 입니다.

  • Github
  • 📷 Instar
  • 🎨Portfolio

티스토리툴바