Input 이벤트에서 한글 처리하기. event.isComposing이란? (한글 두 번 입력 방지 😸)

프론트엔드 개발을 하다 보면 input 이벤트나 keydown, keyup 이벤트를 다룰 때, 예상치 못한 버그를 마주할 때가 있다. 특히 IME(Input Method Editor)를 사용하는 환경(예: 한글 입력)에서 이벤트 핸들러가 엉뚱한 동작을 하거나, 입력값이 두 번 처리되는 등의 문제가 발생할 수 있다. 이때 유용하게 활용할 수 있는 속성이 바로 event.isComposing이다. event.isComposing 🎉event.isComposing은 사용자가 IME를 사용하여 입력을 조합(Composing)하는 중인지 여부를 나타내는 불리언 값이다.(한글의 경우에는 자음과 모음, 혹은 또 하나의 자음이 합쳐져 하나의 글자가 되므로, 조합형 글자이다)true 사용자가 아직 글자를 완성하지..

• format_list_bulleted JavaScript
• · 2025. 3. 12.
• textsms

JavaScript로 shell 스크립트 작성하기 😎 Google’s zx 라이브러리

JavaScript는 브라우저뿐만 아니라 Node.js 덕분에 서버에서도 자주 사용된다.그런데 이 언어를 활용해 터미널 명령어를 실행하는 shell 스크립트를 작성할 수 있다면 얼마나 좋을까? 이런 요구사항을 Google의 zx 라이브러리가 만족한다 👍이번엔 zx 라이브러리를 실제로 사용해본 경험을 공유하기로 했다. zx란 ❓zx는 Google이 개발한 Node.js 기반의 라이브러리로, JavaScript나 TypeScript를 사용하여 터미널 명령어를 실행하는 스크립트를 간단하고 직관적으로 작성할 수 있게 해준다.✨ 따라서, shell 스크립트가 생소한 JS 개발자가 손쉽게 스크립트를 작성할 수 있게 해준다기존의 스크립트와 비교했을 때 더 강력한 기능과 유연성을 제공한다.zx의 장점 😎간결한 문법..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms

FE 검색 구현에서 검색어와 타겟의 유사성 체크하기 - 레벤슈타인 거리 (Levenshtein Distance) ♥️ With 타입스크립트

프론트엔드 개발자로서, 우리는 사용자의 오타를 교정하거나 비슷한 단어를 찾는 기능을 종종 구현한다.  예를 들어, 검색 창에서 "javascipt"라고 입력하면 "javascript"를 추천해주는 기능은 흔하게 찾을 수 있다 👍(r이 빠졌는데도 찾아준다)이처럼 두 문자열의 차이를 계산하는 알고리즘 중 하나가 바로 레벤슈타인 거리(Levenshtein Distance)입니다. 이번 글에서는 레벤슈타인 거리란 무엇인지, 그리고 이를 타입스크립트로 구현하는 방법을 단계별로 알아보았다.리벤슈타인 거리란?리벤슈타인 거리는 두 문자열 사이의 최소 편집 거리를 계산하는 알고리즘이다. 여기서 [편집]은 다음 세 가지 작업을 의미한다.삽입 (Insertion): 문자 하나를 추가삭제 (Deletion): 문자 하나를 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 28.
• textsms

[javascript 안전한 이벤트] event.isTrusted를 활용해 이벤트 보안과 무결성 지키기

웹페이지에서 입력이나 이벤트가 일어날 땐, 민감한 사용자의 정보들이 포함될 수도 있다.때문에, 보안을 잘 지키는 것이 중요한데.이번엔 이벤트에서 보안을 잘 유지하기 위한 방법중 하나인 event.isTrusted에 대해서 알게되어 글을 남기고자 한다 👍(이벤트 이름부터 믿음직하다 🐈) event.isTrusted를 사용하면, 이벤트가 사용자에 의해 생성된 것인지 아니면 스크립트에 의해 인위적으로 생성된 것인지 확인할 수 있다.이를 통해 악의적인 스크립트 또는 의도하지 않은 코드가 이벤트를 트리거했는지 검증할 수 있다고 한다 🎨 event.isTrusted === true이벤트가 사용자의 직접적인 동작(예: 마우스 클릭, 키보드 입력)에 의해 발생한 경우event.isTrusted === false이..

• format_list_bulleted 웹 개발
• · 2024. 12. 1.
• textsms

requestIdleCallback 알아보기 (브라우저가 idle할 때, 콜백함수를 대기열에 👍)

✨ 주의) requestIdleCallback는 아직 실험적인 기능인 것 같다.... 브라우저가 idle할 때 (메인 스레드가 사용자의 입력, 애니메이션 실행 등으로 한가 때) 콜백 함수를 실행할 수 있도록 해주는 함수가 requestIdleCallback 라고 한다. 브라우저가 여유가 있을 때, 콜백함수를 실행시켜서 여유 시간에 덜 중요한 작업을 효과적으로 처리할 수 있는 장점이 있다.메인 스레드 과부하를 줄이며, 여러 작업을 동시에 처리하여 사용자의 경험을 향상시킬 수 있다.var handle = window.requestIdleCallback(callback[, options]) mdn에서 소개하는 requestIdleCallback 함수는 이렇게 구성되는데, 아주아주 간단하게 실제로 실행할 수 있..

• format_list_bulleted 웹 개발
• · 2024. 9. 5.
• textsms

자바스크립트 Proxy 객체를 사용해서 State 만들어 보자

React를 사용하면 useState를 통해서 데이터를 바꿔서 DOM을 다시 그리는 기능을 사용할 수 있다. 생각해보면, 순수 자바스크립트로 화면을 바꾸고자 한다면 DOM에서 element를 찾은 뒤에 데이터를 직접 수정해줘야 하는 부분이다. 그래서 어떻게 React는 이런 반응성, Reactivity를 구현했을까 고민해보고 자바스립트의 Proxy 객체를 사용해서 State를 비슷하게 구현해보자 하였다. 🙌 직접 구현한 예제 최대한 React와 비슷하게 구현해보려고 노력했다. 다음은 구현한 코드 내용인데, 일단 HTML이다.  root에 element가 삽입되는 것으로 생각했고, 하나의 js를 통해서 이를 통제할 수 있도록 구현해봤다. Proxy를 사용해서 구현했는데, Proxy..

• format_list_bulleted JavaScript
• · 2024. 8. 25.
• textsms