중복을 불허카지노 게임 기록
글을쓰기 시작했다.우선 나에게 필요한 것은 무의식적으로 튀어나온 문장을 쓰는 습관이었다. 어떤 문장이라도 상관없었다.적합한 툴이 필요했다.문장을 쓰고다시 읽는 과정에서글이 시작될 수 있기 때문이다.
생각 외로 기존에 나온 다른 노트나 메모 애플리케이션은나의 필요에 과하거나 충족하지 못했다.그래서 내가 직접 만들어보기로했다.나의 필요를 사이드 프로젝트로 풀어보는 것은 의미 있을 것 같았다. 포트폴리오 용으로도 꽤 괜찮을 것 같았다. 그래서 시작했다.이 애플리케이션에 가장 중요했던 기능은 예전에 썼던 문장을 다시 쓰지 않는 것이었다. 이 작은 기능이 문장을 쓸 때 조금 더 생각하기를 원했다.
처음에는 간단하게 구현할 줄 알았다. 사실 입력할 때마다 쿼리를 날리면 중복 체크가 쉽게 될 줄 알았다. input을 사용하는 대신 div에 contenteditable을 써도 괜찮을 줄 알았다. 그런데 한국어는 영어와 다르게 조합해야 하는 특징이 있다. 한글 조합이 문제였다. '나는'을 입력할 때 브라우저 콘솔에 '나' → '난' → '나느' → '나는'으로 찍히기도 하고 롤백이 되기도 했다. contenteditable 환경에서는 이 중간 단계도그대로 DOM에 반영되는 것이었다.조합 중간 상태에 반응하게 되면 이벤트가 발생될 때마다 쿼리를 요청하게 됨으로 내가 원하는 UX흐름을 방해하게 된다. 그래서 나는 어떻게 하면 좋을지 고민하게 되었다.
나는 이 문제를 해결하는 과정에서 새로운 것을 알게 되었다. Vue에서는 compositionstart, compositionend 이벤트로입력 조합 중인지 아닌지를 감지할 수 있다는 것이다. 나는 이것을 염두하고 서버로 쿼리를 보내기까지의 로직을 생각했다. 한글 조합 중에는 아무 이벤트도 발생시키지 않는다. 첫 단어가 두 글자 이상일 때 단어가 완성되면그 단어를 상위 컴포넌트로 보낸 후 서버에 쿼리를 보낸다. 서버에서 값을 받은 이후에는 컴퓨티드로 문장 중복을 체크한다.
전체 기획을 정리하면 이렇다.나는 한 문장을 기록하는 도구가 필요했다.최대한 많은 표현을 쓰기 위해중복된 문장은 허용하지 않고 싶었다. 세 글자 이상일 때 서버에 쿼리를 날려 값을 가져온다. 서버 요청이 끝난 후에는 클라이언트에서 필터 한다. 한글의 특성을 고려해서 한글 조합 중일 때는 이벤트를 발생하지 않는다.
나는 이런 방법을 통해 중복 검사를 구현할 수 있었다.단어가 완전한 조합이 아닐 때 발생하는 문제를 해결하게 되었다.한 번만 요청하면 되니 서버에 불필요한 요청을 막을 수 있었고 내가 원하는 사용자 환경도 구현할 수 있었다. 내가 모국어로 사용하는한국어에 대한 까다로움을 경험하는 것은 좋은 경험이었다. 단순할 줄 알았던 기능을 만들면서 흘러가는 흐름과 설계를 깊이 생각할 수 있었다.
시간이 조금 걸렸지만 나는 내가 원하는 것을 구현했다. 지금은 나를 위한 툴이고 포트폴리오 단계일 뿐이지만좀더 많은 수정과 주변의 반응을 통해 서비스로 오픈해 볼 생각이다. 나의 필요에 반응한 프로젝트에 만족한다. 지금 나에게 필요한 것은 이 애플리케이션에 셀 수 없이 많은 이미지를 남기는 것이다.
