키보드 한글 자음, 모음을 영문으로 변환하기 (feat. react)

간혹 영문자를 입력해야 하는 상황에서 한글로 되어 있어서 한글로 써진 매우 안타까운 상황이 발생하곤 한다.

누가 옆에 있다면, "한글한글"을 외쳐본 적이 있다거나 외침을 받아본 적이 있을 것이다.

그래서 준비해봤다.

바로 치환할 수도 있겠지만, 한글을 입력해야 하는 상황도 있을 수 있으니 유틸로 한번 만들어봤다.

모든 케이스를 적용하진 못했지만, 이렇게도 할 수 있다는 걸 보여주기 위해 작성해봤다.


해당 예제는 react로 작성했지만, ref로 dom을 받아서 처리한 부분을 제외하곤 거부감이 없으리라 생각된다.

    1 	import { useRef } from 'react';
    2 	
    3 	const ConvertUtils = () => {
    4 	  const inputRef = useRef();
    5 	  const outputRef = useRef();
    6 	  const KEYs = {
    7 	    ㅃ: "Q", ㅉ: "W", ㄸ: "E", ㄲ: "R", ㅆ: "T",                           ㅒ: "O", ㅖ: "P",
    8 	    ㅂ: "q", ㅈ: "w", ㄷ: "e", ㄱ: "r", ㅅ: "t", ㅛ: "y", ㅕ: "u", ㅑ: "i", ㅐ: "o", ㅔ: "p",
    9 	    ㅁ: "a", ㄴ: "s", ㅇ: "d", ㄹ: "f", ㅎ: "g", ㅗ: "h", ㅓ: "j", ㅏ: "k", ㅣ: "l",
   10 	    ㅋ: "z", ㅌ: "x", ㅊ: "c", ㅍ: "v", ㅠ: "b", ㅜ: "n", ㅡ: "m",
   11 	    ㄳ: "rt", ㅄ: "qt", ㄼ: "fq", ㄺ: "fr", ㄻ: "fa", ㅀ: "fg", ㄾ: "fx", ㄿ: "fv"
   12 	  };
   13 	  const convertKorToEng = (key) => {
   14 	    const korean = /[ㄱ-ㅎ|ㅏ-ㅣ]/;
   15 	    if (korean.test(key)) {
   16 	      return KEYs[key];
   17 	    }
   18 	    return key;
   19 	  };
   20 	  const convertTextKorToEng = () => {
   21 	    const text = inputRef.current.value;
   22 	    outputRef.current.innerText = Array.prototype.map
   23 	      .call(text, (c) => convertKorToEng(c))
   24 	      .join("");
   25 	  };
   26 	  return (
   27 	    <>
   28 	      <input ref={inputRef} ></input>
   29 	      <button onClick={convertTextKorToEng}>변환하기</button>
   30 	      <div ref={outputRef}></div>   
   31 	    </>
   32 	  );
   33 	}
   34 	export default ConvertUtils;

domscript로 작성할까 하다가 ref 써서 다시 바꿨는데, 두 케이스 모두 할껄... 후회는 되는데, 나중에 다시 올리도록 하겠다.

위 방법 말고, string.charCodeAt으로 코드 받아서 하는 방법도 추가할 예정이다.