자바스크립트 한글 Input Validation - 은/는/이/가 구분

 
Vue.js 3.x 버전으로 프로젝트를 진행하면서 레퍼런스 API를 Options API가 아니라 Composition API로 개발하고 있는 중인데, 여기에 더불어 TypeScript까지 접목시켜 개발 중이다 보니 개발 속도가 상당히 더뎠다. (물론, 내가 이 둘을 처음 사용해 보는 것도 큰 이유이긴 하지만) 그래도 UI 라이브러리를 최대한 걷어내고 생개발로 진행하다 보니 배우는 점도 많고, 특히 React에는 굉장히 UI 플러그인이 잘 되어 있는데 Vue.js는 Element UI라는 것 밖에 없어 정말 힘들었다. (Element UI는 디자인도 구림.) 그래도 HTML CSS를 하나하나 재개발해가면서 컴포넌트화 시키는 과정이 나에게 굉장히 큰 도움이 되고 있다. 
 
아무튼, 각설하고 등록 다이얼로그를 만들면서 Validation Check를 고려하는데 상당히 머리가 아팠는데, 그 부분을 중 특히 Validation Check 할 때, 한글인 부분을 어떻게 분기처리하여 필수값 체크를 할 수 있는지 알아보도록 하겠다.
 

1️⃣ charCodeAt 메서드를 활용하여 Validation Check

1. checkName 이라는 함수를 만들어 인자로 inputValue 값을 받았다. data가 inputValue에 해당.
2. 인자로 받은 inputValue 값의 마지막 음절의 유니코드를 charCodeAt 메서드로 체크한다.
3. 유니코드의 한글 범위 내에서 해당 코드의 받침 확인을 한다.
4. 받침이 없으면  '~는 필수 값입니다.'
5. 받침이 있으면 '~은 필수 값입니다.' 라고 템플릿 스트링 즉, 백틱이라 불리는 템플릿 리터럴 입력 방식을 활용하여 inputValue와 관련된 필수 값 문장을 리턴시켜주면 끝.