Day 12 - Key Sequence Detection

윈도우에 키보드 이벤트를 걸고 특정 비밀 문자열을 만들어서 그 문자열을 입력하면 cornify 효과가 나타나는 과제이다.

귀여워서 계속 쳐봤다. 이게 대체 무슨 라이브러리일까 싶어서 cornify 사이트를 가보니 어떤 컨셉인지는 대충 알 것 같다..

Full script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const pressed = [];
const secretCode = "zinirun";
window.addEventListener("keyup", (e) => {
console.log(e.key);
pressed.push(e.key);
if (pressed.length > secretCode.length) {
pressed.splice(0, 1);
}
if (pressed.join("") === secretCode) {
console.log("DING DING!");
cornify_add();
}
console.log(pressed);
});

이번 Day 12 과제는 지금까지의 과제를 잘 이해했다면 쉽게 구현할 수 있었다. pressed라는 키를 저장해둘 배열을 만들어 입력된 키 값을 넣어주면 되는데, secretCode의 길이에 맞게 잘라준다. (자르는 과정없이 모든 키를 배열에 푸시한다면 비밀 문자열의 입력 여부를 파악할 수 없으니까)

pressed 배열을 자르는 코드는 splice 메소드를 이용하는데, 제작자와는 다르게 코드를 짰다. 원래는 다음과 같다.

1
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);

다소 코드가 이해가 어려워서 내 방식대로 짰는데, 결과는 똑같다. splice 메소드는 첫번째 인자의 인덱스부터 두번째 인자의 개수까지 배열 요소를 삭제한다. 그러니까 내가 작성한 pressed.splice는 특정 조건일 때 인덱스 0을 삭제하고 앞으로 밀어주는 것이다.

이제 pressed 배열을 secretCode와 비교만 해주면 된다. 배열 요소를 한 문자열로 만들기 위해 join('')을 사용한다. 파이썬의 ''.join()과 같은 메소드인 것 같다. 그리고 secretCode와 대조하는데, 정답지의 코드는

1
2
3
4
if (pressed.join("").includes(secretCode)) {
console.log("DING DING!");
cornify_add();
}

이렇게 includes를 이용하여 비교하는데, 결국 ===를 사용해서 일치 여부를 판단하는 것이 더 낫다고 생각해서(어차피 pressed 배열은 secretCode의 길이만큼만 저장되고 포함되는지 여부가 궁금한게 아니고 일치하는지 여부가 궁금한거니까) 나는 ===를 사용했다. 어떻게 하든 결과는 같다.