[Javascript] keydown, keypress 너네 도대체 무슨 차이니?

최근 프로그래머스의 고양이 사진첩에 대한 과제를 해결하던 도중 오류를 접했다.

참고로 나는 Javascript란 언어에 대해 기본적인 것은 알고 있다는 오만한 생각을 했었으나 해당 과제를 풀어보고 나의 오만함을 깨달을 수 있었다. 프론트엔드를 공부하는 취업준비생들에게 매우 많은 도움이 될 것으로 예상하기에 해당 문제 해설의 링크를 남겨둔다. 문제를 직접 풀어보고 싶으면 해당 링크의 상단에 문제 링크도 포함되어 있으니 참고.

https://prgms.tistory.com/53

'2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제 해설

그렇다면 어떤 오류인지 공유해보도록 하겠다!

오류발생, 오류발생!! keydown은 되고 keypress는 외않되..?

해당 문제의 모달창, 일단 고양이는 굉장히 귀엽다

문제에서 요구한 사항중에 이미지 모달창이 띄워졌을 때 바깥 부분이나 'ESC'버튼을 눌렀을 때 창이 닫혀야 한다. 라는 것이 있었다.

 

그다지 어려운건 아니었기에 바로 코드를 짜보았다.

window.addEventListener('keypress', (event) => {
	console.log('event listening');
    if(event.key === 'Escape'){
      // 모달이 닫히는 함수
      console.log('모달 닫기');
      this.modalClose();
    }
})

addEventListener로 이벤트를 받고 event.key가 'Escape'일 경우 창이 닫히는 아주 간단한 함수이다.

하지만 여기서 밑천이 들어났다. 아무 반응이 없었던 것.

뭐지 해서 console.log를 찍어 보았으나 콘솔자체도 찍히지 않는 상황.

홧김에 아무키나 막 눌러보았더니 조건문 바깥의 콘솔은 찍혔다. 그런데 esc는 안먹히는 상태...

 

평소 keypress, keydown 이벤트를 몇번 사용해 본 경험이 있었으나 그때마다 되는가보다 하고 넘어갔던 부분이 이런 결과를 낳아버렸다.

 

그래서 이번 기회에 확실히 알고 넘어가기로 했다.

 

keydown, keypress 정확히 어떤 차이가 있을까?

문제 해결을 위해 구글링을 해보았다. 여러 블로그를 다녀보았는데 한번에 알기 쉽게 설명해놓은 곳이 없더라... 대충은 알겠으나 뭔가 직관적으로 알고 싶었다.

그러던 중 보인 코드펜 링크를 눌러 보았고 해당 코드펜 제작자에게 좋아요와 함께 마음속으로 감사의 인사를 전했다.

정말 알기 쉽게 직관적으로 만들어 놓았다.

https://codepen.io/yamoo9/pen/vRmeQZ

DOM API - keydown, keypress, keyup, input 이벤트 간 차이

 

설명하자면

keydown -> keypress -> keyup 순으로 이벤트가 일어난다. (대부분의 블로그에 적혀있던 부분)

하지만 여기서 끝이아니고

keypress는 먹히는 key가 제한적이다. 

keypress가 활성화 되는 것은

- 영문

- 숫자

- Enter

- Space

이렇게 네가지이다. 그래서 나의 이벤트 리스터의 Escape(esc) 키는 먹히지 않았던 것!

 

추가적으로 keydown과 keyup은 실행 되었을 때 한번만 이벤트가 발생하는데 반해

keypress는 누르고 있으면 지속적으로 실행된다.

space를 쭉 누르고 있으면                                                    이렇게 주르륵 공간이 생긴다.

이런 경우 keydown 1번 실행 -> keypress 주르륵~ 실행 -> keyup 1번 실행 순으로 된다.

 

마치며..

기본적인것은 쉬운 것이 아닌 중요한 것이라는 말이 있다.

내가 간과하고 넘어갔던 이런 기본적인 부분이 이런 상황을 발생시킬줄이야...

이번 기회로 기본적인 것을 그러려니 하고 넘어가는 일은 없어야 겠다는 생각을 다시 한번 해보았다.

부끄럽지만 뜻깊은 경험이었다.

앞으로 key 이벤트는 헤멜 일 없을듯? ㅎㅎ