Skip to content

[keydown과 keyup 이벤트] 번역 #1901

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Violet-Bora-Lee wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[keydown과 keyup 이벤트] 번역 #1901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a834539
Part 2. 3.7 Keyboard: keydown and keyup 번역
Violet-Bora-Lee Jul 18, 2026
e010575
[keydown과 keyup 이벤트] 데모·과제 파일 번역과 본문 퇴고 반영
Violet-Bora-Lee Jul 18, 2026
230b3eb
[keydown과 keyup 이벤트] 표현 다듬기와 맞춤법 교정
Violet-Bora-Lee Jul 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions 2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

We should use two handlers: `document.onkeydown` and `document.onkeyup`.
`document.onkeydown`과 `document.onkeyup` 두 핸들러를 사용해야 합니다.

Let's create a set `pressed = new Set()` to keep currently pressed keys.
현재 눌려 있는 키를 담아 둘 셋 `pressed = new Set()`을 만듭니다.

The first handler adds to it, while the second one removes from it. Every time on `keydown` we check if we have enough keys pressed, and run the function if it is so.
첫 번째 핸들러는 셋에 키를 추가하고 두 번째 핸들러는 셋에서 키를 제거합니다. `keydown`이 발생할 때마다 필요한 키가 전부 눌렸는지 확인하고 전부 눌렸다면 함수를 실행합니다.
18 changes: 9 additions & 9 deletions 2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<body>

<p>Press "Q" and "W" together (can be in any language).</p>
<p>"Q"와 "W"를 동시에 눌러 보세요(언어 설정과 관계없이 동작합니다).</p>

<script>
function runOnKeys(func, ...codes) {
Expand All @@ -11,19 +11,19 @@
document.addEventListener('keydown', function(event) {
pressed.add(event.code);

for (let code of codes) { // are all keys in the set?
for (let code of codes) { // 모든 키가 셋에 들어 있는지 검사합니다.
if (!pressed.has(code)) {
return;
}
}

// yes, they are
// 모든 키가 눌린 상태입니다.

// during the alert, if the visitor releases the keys,
// JavaScript does not get the "keyup" event
// and pressed set will keep assuming that the key is pressed
// so, to evade "sticky" keys, we reset the status
// if the user wants to run the hotkey again - let them press all keys again
// 얼럿 창이 떠 있는 동안 사용자가 키에서 손을 떼면
// 자바스크립트는 keyup 이벤트를 받지 못합니다.
// 이때 pressed 셋은 키가 계속 눌려 있다고 착각하게 됩니다.
// 키가 눌린 상태로 '고정'되는 문제를 피하려면 상태를 초기화해야 합니다.
// 단축키를 다시 실행하고 싶다면 모든 키를 다시 누르면 됩니다.
pressed.clear();

func();
Expand All @@ -36,7 +36,7 @@
}

runOnKeys(
() => alert("Hello!"),
() => alert("안녕하세요!"),
"KeyQ",
"KeyW"
);
Expand Down
8 changes: 4 additions & 4 deletions 2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 5

---

# Extended hotkeys
# 단축키 확장하기

Create a function `runOnKeys(func, code1, code2, ... code_n)` that runs `func` on simultaneous pressing of keys with codes `code1`, `code2`, ..., `code_n`.
`code1`, `code2`, ..., `code_n` 코드에 해당하는 키를 동시에 누르면 `func`를 실행하는 함수 `runOnKeys(func, code1, code2, ... code_n)`를 만들어 보세요.

For instance, the code below shows `alert` when `"Q"` and `"W"` are pressed together (in any language, with or without CapsLock)
예를 들어 아래 코드는 `"Q"`와 `"W"`를 동시에 누르면 `alert` 창을 띄웁니다(언어 설정과 CapsLock 여부와 관계없이 동작합니다)

```js no-beautify
runOnKeys(
() => alert("Hello!"),
() => alert("안녕하세요!"),
"KeyQ",
"KeyW"
);
Expand Down
Loading