본문 바로가기

Language20

한글 입력 시 Enter 이벤트 중복 호출 문제 해결 문제 상황 태그를 입력하는 Input 컴포넌트를 만들던 중, 영어를 입력할 때는 정상적으로 작동하지만 한글을 입력하면 태그가 2개로 나뉘어 생성되는 문제가 발생했다. 태그를 생성하는 방식은 아래처럼 구현했다. 사용자가 태그 이름을 입력한다. 사용자가 태그 이름 입력을 마치면 엔터 키를 누른다. 엔터키를 누르는 이벤트가 발생하면, 입력 값을 태그로 생성한다. 디버깅 태그를 생성하는 함수 내에서 콘솔을 출력해보니, 한글의 경우에는 한 번만 엔터 키를 클릭해도 이벤트가 중복 호출되었다. 문제 원인 한글은 자음과 모음이 합쳐져 만들어지는 조합 문자이기 때문에, 글자가 조합 중인지 조합이 완료된 상태인지 파악하기 어려워 이벤트가 중복 호출된다. 현재 코드에서 사용중인 onKeyDown 메서드의 경우, 문자의 입력.. 2024. 4. 21.
setTimeout(), setInterval() setTimeout() 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정함 var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); function : 타이머가 만료된 뒤 실행할 함수 delay : 주어진 함수를 실행하기 전에 기다릴 밀리초 단위 시간 arg1, ..., argN : 함수에 전달할 추가 매개변수 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않는다. setTimeout(() => { console.log("첫 번째 메시지"); }, 5000); setTimeout(() => { console.log("두 번째 메시지"); }, 3000); setTimeout(() => { console.log("세 번째 메시지").. 2023. 11. 11.
Promise 다루기 Promise란 비동기 작업이 맞이할 미래의 완료 도는 실패와 그 결과 값을 나타내는 객체 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 최종 결과 반환 (X) 미래의 어떤 시점에 제공하겠다는 '약속(Promise)' 반환 (O) Promise의 3가지 상태 1. pending : 초기 상태 2. fulfilled : 연산이 성공적으로 완료됨 3. rejected : 연산이 실패함 fulfilled/rejected 시, 프로미스의 then 메서드에 의해 대기열에 추가된 처리기들이 호출됨 생성자 Promi.. 2023. 11. 11.
SyntaxError: Cannot use import statement outside a module ※ SyntaxError: Cannot use import statement outside a module redux를 사용하면서 여러 가지 모듈을 많이 쓰다 보니, 이 에러를 다소 많이 만났다. 이것은 default로 export 하지 않은 함수를 {}를 쓰지 않고 바로 내보낼 때 나오는 에러이다. 정리하자면, export 함수 로 모듈을 만들었으면 사용할 때 import { 함수 } from './경로' 이렇게 가져와야 하고, export default 함수 로 모듈을 만들었으면 사용할 때 import 함수 from '/경로' 이렇게 가져오면 된다 2023. 5. 10.

티스토리툴바