자바스크립트에서 이벤트 키가 유일하게 한국만 다르답니다.

요즘 froala editor 개발한다고 밤잠을 설치며 진행중에 있습니다. 워낙에 방대한 설정 옵션과 이벤트 트리거 옵션이 있어 요거 나열해놓는것만해도 일입지요.(옵션을 한줄로만 나열했는데 500페이지가 넘었습니다.)

개발하면서 벌써 버그를 3개나 발견해서 froala쪽 깃허브에 https://github.com/froala/wysiwyg-editor/ 이슈 제출했지요. 두개는 클리어 되었고 그 중 하나는 제가 버그 패치 방법도 올려놨죠. 근데 아주 골때리는 버그가 하나 있어서 지금 이틀동안 이거 해결하려고 개고생 했는데요. 원인을 알아보는 과정에서 한국어만의 특수성을 다시금 느끼게 되었습니다.

이미 알고 계실분도 있으실텐데 한국어는 events keypress를 키보드 입력 마다 이뤄지는게 아니라 첫 keydown 후 문장이 완성될때까지는 이벤트가 안일어난다는 사실 알고 계셨나요?

welcome to xetown <- 총 17번의 keypress 이벤트가 일어납니다.

엑스이타운에 오신것을 환영합니다. <- ㅇ 에서 1번 점 에서 한번해서 두번 일어납니다.

이러한 특수성 때문에 저는 해당 에디터가 유독 맥북 파이어폭스에서만 띄어쓰기가 먹질 않는 현상이 나타났습니다.

에디터 개발한 애들은 루마니아 사람들이고 외국계니까 한국어가 어떻든 간에 더군다가 맥북 파이어폭스 이외의 모든 브라우저는 문제가 없으니 해결을 하기는 커녕 관심도 없을거라 생각했죠. 그래서 이건 어떻게든 해결을 봐야한다고 생각해 이번에 버그 개선에 들어갔습니다.

해당 에디터는 다른 에디터와 다르게 모든 keypress를 잘개 쪼개서 트리거로 올려두고 뒤로가기 앞으로 가기를 위한 기본적인 브라우저의 저장 기능마저도 직접 처리를 하고 있습니다. 때문에 keypress가 통하지 않던 스페이스같은 처리를 나중에 . 이나 다른 언어 혹은 스페이스를 두번 눌렀을때 비로소 밀려있던 입력값이 넘어와 한번에 처리하는 식이 됩니다.(영어는 한단어 한단어 키가 넘어오니 잘개잘개 처리하죠)

더군다나 jquery에 있는 $().remove();의 태그 제거 함수를 통해 각 태그안에 임의 생성하는 span태그를 keypress와함께 제거를 하고 있는데 유독 파이어폭스에서 remove() 기능을 수행하면 zero space( /u200b) 라는 애들까지도 함께 지운다는 버그가 있습니다.(이건 확실하지 않습니다.)

그래서 내가 "안 녕 하 세 요." 라고 입력을 하면 "안녕하세요" 라고 붙여서 글이 적히는 현상이 발생한거죠.

원인은 의외로 간단하게 해결되었습니다. <p></p>안에서 문장 이외의 다른 태그가 존재하면 zero space가 지워지지 않는다는게 파악되어서 <br>태그를 제거하는 기능을 제외하도록 했더니 문제의 증상이 없어졌습니다.

이거 해결하느라 저 2틀 동안 3시간 잤습니다.(거짓말 아니고 어제 날밤새고 저녁 9시에서 12시 딱 3시간 꿀잠 잤어요 ㅠㅠ)

에디터 소스보기 보시는 분들은 이렇게 태그 자동으로 입혀지는거 보셨을거에요.

<p>

  <br />

</p>

아니면

<p> nbsp; </p>

결국, 이런게 다 그러한 문제의 보호막인 것이었습니다.ㅠ

지금 오사카 출장 중에 신칸센에서 이글도 적고 있는데 깃허브에 이슈를 올려뒀거든요. 루마니아랑 시차가 좀 있는지 얘내들 활동이 거진 오후 5시부터니까 개선할 의지가 있는지 답변을 들어보고 없으면 그냥 코어 수정을 봐야할 것 같네요.

아무튼 이것 또한 소중한 경험이니 기록해둡니다. ^^