Key Sequence Detection
4 min readOct 20, 2018
이번에는 특정 문자열이 입력되면 반응하는(유니콘이 보이는!) 아주 간단한 기능을 구현해 볼 것이다.
강좌에서 HTML파일에는 아무 것도 없었지만 백지는 그래도 너무 심한 것 같아서 h1태그를 하나 넣어주었다.
//src/index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Key Detection</title>
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script></head>
<body>
<h1>Press Secret Code</h1>
</body>
</html>
다음은 javascript 로직으로, 크게 복잡하지 않으나 splice() function을 사용할 때는 조금 생각을 해야 한다.
import style from './main.css';
const pressed = [];
const secretCode = 'secrete';
window.addEventListener('keyup', (e) => {
console.log(e.key);
pressed.push(e.key);
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
if (pressed.join('').includes(secretCode)) {
console.log('DING DING!');
cornify_add();
}
console.log(pressed);
});키보드 키가 하나씩 누르고 나면 이를 인지해서 눌렸던 키를 배열에서 관리한다. 처음에 잘못 눌렀더라도 최종적으로 누른 문자열이 secretCode와 일치할 경우 반응해야 하기 때문에 pressed 배열에 새 요소가 추가되고 나면 secreteCode의 길이만큼 뒤에서부터 잘라내야 한다.
splice()의 첫 번째 파라미터가 음수일 경우, 잘라낼 요소를 뒤에서부터 카운팅한다. -secreteCode.length -1은 배열의 뒤에서부터 secreteCode의 길이만큼을 세고 난 바로 다음 요소부터 잘라낼 것이라는 의미이고, 두 번째 파라미터로 들어가는 pressed.length -secreteCode.length는 pressed와 secrete 두 배열의 차이이기 때문에 첫 번째 파라미터 위치부터 카운팅 했을 경우 pressed 배열의 0번 index까지 가게 된다.
join을 통해서 배열을 문자열로 만들어주고 완성된 문자열과 secreteCode가 일치(정확히는 includes를 사용했기 때문에 포함) 하는지를 확인한다.
if내부가 true라면 cornify_add()를 통해 유니콘을 불러낸다!
