[JS] keydown, keyup, keypress

◆ keydown

• 사용자가 키보드의 키를 누를 때 발생하며 누르고 있는 동안 계속해서 발생한다.
• ex) 'A'키를 누르면 keydown 이벤트가 발생한다

◆ keyup

• 사용자가 키보드의 키를 눌렀다가 놓는 순간에 발생하는데 한 번만 발생한다.
• 키 입력 동작의 완료를 의미하며, 추가적인 동작을 수행하거나 입력된 내용을 처리하는 데 사용된다. 
• ex) 'A' 키를 눌렀다가 놓을 때 keyup 이벤트가 발생한다.

◆ keypress

• 키가 실제로 입력되었을 때 발생하며 음절이 결정된 시점에서 작업을 수행한다.
• 사용자가 키를 누르고 놓을 때 발생하며, 입력된 키에 대한 문자 코드를 반환한다.
• 조합 키, 특수 키에는 반응하지 않는다.
• 주로 사용자가 텍스트를 입력하는 용도로 사용한다
• 음절이 조합되는 언어에서 사용한다. 

◈ 한국어와 영어 입력 차이

• 한국어와 영어는 다른 문자 체계를 사용하기 때문에 입력 동작에 차이가 있다.
• 영어는 각 키에 대해 하나의 문자를 할당하는데 반해 한국어는 자음과 모음의 조합(초정, 중성, 종성)으로 음절을 만들기 때문에 입력 동작이 복잡해진다.
• 예를 들어, 투두리스트를 만들고 할 일을 생성할 때 한국어로 입력한 경우 두 개의 할 일이 생성되는 버그가 발생하는데 입력 동작의 차이 때문이다.
• keypress 이벤트는 한글 음절이 입력되기 전까지 keypress 이벤트는 발생하지 않지만 keydown 이벤트는 키를 누르는 순간 발생하고 키 입력 동작을 완료하면 keyup 이벤트가 발생하기 때문에 두 개의 입력값이 생기는 것이다. 
• 일반적으로 한국어와 같은 언어를 처리할 때는 keypress 이벤트를 사용하여 한글 음절이 결정된 시점에서 작업을 수행하도록 해야 한다.

영어로 flower을 입력한 경우 f,l,o,w,e,r 이런식으로 입력이 되는데 하나의 음절을 인식하는데 문제가 없기 때문에 keydown 이벤트를 사용해도 문제가 없다.

반면에 한국어로 꽃을 입력한 경우 ㄲ,ㅗ,ㅊ 이런식으로 입력이 되는데 하나의 음절을 인식하는게 아니라 음절을 조합해서 인식을 해야하기 때문에 keypress 이벤트를 사용하는게 더 적절하다.