🏷️ 관련 기술 태그:#KeyboardEvent#e_code#e_key#ModifierKeys#KeycodeMapping
📖

키코드(Keycode) 테스터 및 키보드 이벤트 검사기 가이드

웹 브라우저에서 키보드를 입력을 받았을 때 생성되는 자바스크립트 `KeyboardEvent` 객체의 모든 속성(`e.key`, `e.code`, `e.keyCode`, `e.which`, 조합키 상태)을 실시간으로 감지하고 분석하는 개발자 전용 검사 도구입니다. 과거 웹 개발에서 사용되던 수치형 키코드(`keyCode`, `which`)는 운영체제나 키보드 레이아웃에 따라 달라지는 문제가 있어 최신 W3C UI Events 표준에서는 `e.key`(입력된 문자 값)와 `e.code`(물리적 키 위치) 사용을 권장하고 있습니다. JuicyDevs 키코드 테스터는 조합키(Ctrl, Shift, Alt, Meta) 상태, 단축키 입력 순서 히스토리 로그, 브라우저 기본 동작 차단(Prevent Default) 기능을 100% 브라우저 메모리 연산으로 제공합니다.

🔒실무 기술 스펙 & 100% 클라이언트 로컬 연산 아키텍처

DOM Level 3 Keyboard Events 명세에 따라 `window` 객체에 글로벌 이벤트 리스너를 바인딩하여 네이티브 키 이벤트를 추출합니다. 모든 이벤트 데이터 처리는 클라이언트 RAM에서만 수행됩니다.

✨ 주요 기술 스펙 & 특장점

  • •브라우저 네이티브 `keydown`, `keyup` 키보드 이벤트 실시간 가로채기
  • •최신 W3C 표준인 `e.key`, `e.code` 및 레거시 호환용 `e.keyCode`, `e.which` 값 동시 표시
  • •Shift, Ctrl, Alt(Option), Meta(Command/Windows) 조합키 플래그 실시간 감지
  • •단축키 조합의 입력 순서를 추적하는 누적 이벤트 히스토리 로그 제공
  • •Ctrl+S, F5 등 브라우저 예약 단축키 테스트를 위한 기본 동작 차단(Prevent Default) 토글
  • •100% 로컬 브라우저 연산으로 사용자의 입력 데이터 유출 위험 0%

🚀 단계별 실무 가이드

  1. 1웹 화면을 클릭한 뒤 키보드의 임의의 키 또는 키 조합(예: Ctrl+Shift+Z)을 누릅니다.
  2. 2화면 중앙에 크게 나타나는 키 이름과 물리적 위치 코드(`KeyZ` 등)를 확인합니다.
  3. 3프로퍼티 상세 표에서 `isComposing`(한글 조합 중 여부), `repeat`(연속 입력 여부) 상태를 점검합니다.
  4. 4하단 히스토리 로그에서 연속해서 누른 키 시퀀스를 디버깅합니다.
  5. 5자바스크립트 `switch(e.code)` 조건문 코드를 복사하여 웹 단축키 구현에 활용합니다.

💡실무 기술 가이드 & 자주 묻는 질문 (FAQ)

3 개 질문 & 답변 가이드

Q1.`e.key`와 `e.code`는 어떤 차이가 있나요?

- **`e.key`**: 사용자가 입력한 **문자 결과값**을 나타냅니다. 예를 들어 키보드의 "A" 키를 누르면 `a`가 되고, Shift를 누른 채 누르면 `A`가 됩니다. - **`e.code`**: 한/영 상태나 Shift 조작과 무관한 키보드의 **물리적 키 위치**를 나타냅니다. (예: "A" 키는 항상 `KeyA`로 고정) 웹 단축키(Hotkeys)를 만들 때는 사용자의 키보드 언어 설정과 상관없이 동작하는 `e.code`를 사용하는 것이 표준입니다.

Q2.Windows의 Ctrl키와 Mac의 Command키를 동시에 지원하려면 어떻게 하나요?

자바스크립트 이벤트에서 `e.ctrlKey`(Windows/Linux)와 `e.metaKey`(macOS Command)를 함께 확인하시면 됩니다: ```javascript if ((e.ctrlKey || e.metaKey) && e.code === "KeyS") { e.preventDefault(); // 브라우저 저장 창 방지 saveData(); } ```

Q3.한글을 입력할 때 이벤트가 두 번 실행되거나 keyCode가 229로 뜨는 이유는 무엇인가요?

한글, 일본어 등 CJK 언어는 여러 자소(자음/모음)를 조합하여 하나의 글자를 만드는 입력기(IME)를 거칩니다. 조합 과정에서는 브라우저가 `e.isComposing = true` 플래그와 가상 키코드 `229`를 생성합니다. 이벤트 핸들러 상단에 `if (e.isComposing) return;` 구문을 추가하면 한글 입력 시 중복 실행을 막을 수 있습니다.