문제

게시글 태그기능을 구현하면서 테스트상에서 문제가 없어 배포된 서버로 업데이트가 됐다.
사용자 피드백을 진행하는 도중 태그의 끝자리가 하나씩 더 추가가 되는 문제가 발견됐다.

searchInput.addEventListener('keydown', function (event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        // 태그가 등록되는 코드
        }
    });

---

시도

내가 테스트하는 환경에서는 이상이 없는것을 확인했다.
혹시나 머지 과정에서 코드의 변화가 있었나 싶어 커밋기록을 확인해 봤지만 이상이 없었다.
특정 상황이 발생했던 태그들을 똑같이 입력도 해 봤지만 너무나도 정상적으로 작동이된다...

피드백 진행 중 문제없이 작동하는 사람도 있었고 같은 문제가 발견되는 사람도 있었다.

코드상의 문제는 없는 것으로 판단했고 환경적인 원인이 있을 것 같다고 생각이 들었다.

문제 없이 잘 동작했던 사람들은 window를 사용했고 문제가 발생했던 사람들은 macOS를 사용했다는 것을 알게 됐다.

---

해결

같은 증상을 겪었던 분의 해결방법을 참고하여 수정을 진행했다.

원인은 자바스크립트에서 키보드 입력방식이었다.
위 사진에서 보이듯이 영어로 입력했을때에는 문제가 없고 한글 사용시에 문제가 발생했다.

문자 특성상 영어는 단어를 구성하는 알파벳이 각각 독립적이지만 한글은 단어를 구성하는 하나의 글자가 자음+모음으로 이루어지다보니 한글입력을 처리하는 방식에서 차이가 있는 것으로 보여진다.

searchInput.addEventListener('keypress', function (event) {
    if (event.key === 'Enter') {
        event.preventDefault();
        // 태그가 등록되는 코드
        }
    });

키 입력방식을 keydown → keypress 로 바꿔 해결