[Javascript] 12. Key Sequence Detection

1. 배경

브라우저에서 키를 인식하고 방향키에 따라서 스크롤이 움직이는 등의 특별한 기능을 실행할 수 있도록 한다. 

 

 

2. Javascript

  const pressed = [];
  const secretCode = 'wesbos';
  window.addEventListener('keyup', (e) => {
    pressed.push(e.key);
    pressed.splice(-secretCode.length -1, pressed.length - secretCode.length);
    if (pressed.join('').includes(secretCode)) {
      console.log('Ding Ding');
      cornify_add();
    };
  });

먼저 눌러진 키들을 모으기 위해 빈 배열인 pressed를 만든다. 또, secretCode라는 변수를 만들어 'wesbos'라는 문자열을 주었는데, 이 문자열에는 아무 의미가 없다. window에 이벤트 리스너를 추가하여 keyup 이벤트에 대해 콜백함수를 설정하였다. 먼저 설정한 빈 배열에 전달된 이벤트의 key값을 추가하고, splice API를 통해 최대 6글자까지만 저장되도록 하였다. 계속 눌린 키 값들이 저장되면 데이터가 너무 무거워질 것이기 때문이다. splice(m, n)는 m부터 시작하여 n개의 요소를 잘라내어 반환한다. 원본 배열은 잘리고 남은 요소들의 배열로 변환된다. m이 음수일 때는 배열의 끝에서부터 세어 나간다. 위 코드에서 m은 -secretCode.length -1이므로 -7, n은 pressed.length - secretCode.length로 pressed.length - 6이 될 것이다. 즉, 뒤에서 7번째부터 시작하여 (눌러진 키의 수 - 6)만큼을 전부 삭제하는 것인데, 이는 즉 마지막 6개의 키 값만을 남기는 것과 같다. 여기에 if문을 작성하여 pressed를 문자열로 반환하였을 때, secretCode, 즉 'wesbos'가 포함되어 있다면 콘솔창에 Ding Ding를 띄움과 함께 cornify_add() 함수를 실행시킬 것이다. cornify_add() 함수는 귀여운 유니콘을 출력한다.