자바스크립트 - 키보드 이벤트

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 키보드 이벤트의 흥미로운 세계로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 모험을 단계별로 안내해드리겠습니다. 그러니 마음에 드는 음료를 한 잔 마시고, 편안하게 앉아 함께 이 키보드 여행을 떠나보세요!

일반적인 키보드 이벤트

코딩을 시작하기 전에, 자바스크립트에서 가장 일반적인 키보드 이벤트에 대해 익숙해져보겠습니다. 이러한 이벤트는 컴퓨터가 키보드를 듣는 다양한 방법으로 생각해보세요:

이벤트 이름	설명
keydown	키가 눌러졌을 때 발생
keypress	키가 눌러졌을 때 발생 (문자 키만 해당)
keyup	키가 뗐을 때 발생

이러한 이벤트는 컴퓨터의 귀처럼, 여러분의 키 입력을 항상 듣고 있습니다. 멋지죠?

키보드 이벤트 속성

이제 이러한 이벤트가 가지고 있는 속성에 대해 이야기해보겠습니다. 키보드 이벤트가 발생할 때, 그것은 유용한 정보를 함께 데려옵니다:

속성	설명
key	눌린 키의 값
keyCode	눌린 키의 유니코드 값 (비추천)
which	눌린 키의 유니코드 값 (비추천)
code	키보드의 물리적인 키

이러한 속성은 눌린 키에 대한 중요한 정보를 전달하는 작은 전 messengers입니다.

예제: keydown 이벤트

첫 번째 예제를 시작해보겠습니다. 우리는 'keydown' 이벤트를 듣고 눌린 키를 표시하는 간단한 프로그램을 만들어보겠습니다.

<h1>어떤 키를 눌러보세요</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = 'You pressed: ' + event.key;
});
</script>

이 예제에서 우리는 컴퓨터에게 "어떤 키가 눌렸는지 듣고, 그 일이 발생했을 때 그 키를 보여줘,"라고 말하고 있습니다. addEventListener 메서드는 키 입력을 감시하는 스파이를 설정하는 것과 같습니다.

예제: keypress 이벤트

이제 'keypress' 이벤트를 시도해보겠습니다. 이 이벤트는 문자 키만 해당합니다!

<h1>무언가를 입력해보세요</h1>
<p id="output"></p>

<script>
document.addEventListener('keypress', function(event) {
var current = document.getElementById('output').innerHTML;
document.getElementById('output').innerHTML = current + event.key;
});
</script>

이 스크립트는 타이프라이터와 비슷합니다. 문자 키를 누를 때마다 해당 문자를 현재 텍스트에 추가합니다. 입력하면서 텍스트를 쌓아가는 것입니다!

예제: keyup 이벤트

이제 'keyup' 이벤트로 넘어가겠습니다. 이번에는 's' 키를 눌러 이기는 간단한 게임을 만들어보겠습니다.

<h1>'s' 키를 눌러 이기세요!</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'You win! ?';
} else {
document.getElementById('output').innerHTML = 'Try again!';
}
});
</script>

이 게임에서 우리는 플레이어가 's' 키를 뗐을 때를 기다립니다. 간단한 "Simon Says" 게임처럼, 하지만 키보드 키를 사용합니다!

예제: addEventListener 메서드를 사용하지 않음

이제 이벤트를 처리하는 오래된 방법을 살펴보겠습니다. addEventListener이 현대적인 접근 방식이지만, 이 방법을 오래된 코드에서 만날 수 있습니다:

<h1>어떤 키를 눌러보세요</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Key pressed: ' + event.key;
};
</script>

이 방법은 문서의 onkeydown 속성에 직접 함수를 할당하는 것입니다. 문이 열릴 때 "누군가가敲门했을 때 이렇게 하세요,"라고 적은 표지와 같습니다.

모두 함께 묶어서

이제 각각의 이벤트를 개별적으로 탐험한 후, 이 세 가지 이벤트를 모두 사용하는 더 복잡한 예제를 만들어보겠습니다:

<h1>키보드 이벤트 테스터</h1>
<p>어떤 키를 눌러 이벤트를 발생시켜보세요!</p>
<table id="eventTable">
<tr>
<th>이벤트 유형</th>
<th>키</th>
<th>코드</th>
</tr>
</table>

<script>
function addEventToTable(eventType, event) {
var table = document.getElementById('eventTable');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = eventType;
cell2.innerHTML = event.key;
cell3.innerHTML = event.code;
}

document.addEventListener('keydown', function(event) {
addEventToTable('keydown', event);
});

document.addEventListener('keypress', function(event) {
addEventToTable('keypress', event);
});

document.addEventListener('keyup', function(event) {
addEventToTable('keyup', event);
});
</script>

이 예제는 키를 눌 때마다 테이블에 이벤트를 기록합니다. 키보드 이벤트 일지와 같습니다!

그리고 여러분! 우리는 자바스크립트 키보드 이벤트의 세계를 여행했습니다. 연습이 완벽을 만드는 것을 기억하세요, 그러니 이 예제들을 변경하고, 깨뜨리고, 고치세요 - 이렇게 해서 진정으로 배울 수 있습니다.

마무리하기 전에 재미있는 사실 하나를 알려드리겠습니다: 컴퓨터 키보드의 레이아웃, QWERTY 배열은 원래 타이프라이터에서 타이피스트를 느리게 하기 위해 설계되었습니다. 금속 臂이 맞닿아서 막히지 않도록 하기 위해서였습니다. 그러나 이제 우리는 이 레이아웃을 사용하여 웹 애플리케이션에서 번개같은 상호작용을 만들고 있습니다!

코딩을 계속하고, 배우고, 가장 중요한 것은 즐겁게 지내세요! 다음 번까지, 여러분의 친절한 이웃 컴퓨터 선생님이자 저가 인사드립니다. 행복한 코딩 되세요!

Credits: Image by storyset