본문으로 바로가기

[JavaScript] 문자 비교하기, 베트남어 비교하기, 문자가 같은데 틀려요

정규화, normalize 함수 사용하기

환자 이름을 검색하는 기능에서 정상적으로 동작이 되지 않는 문제가 있었다. 아니 보이는 문자가 동일한데 다르다? 말이 되나 ...? 해당 문자는 , ũ 이다. 이것을 누가 다르다고 하겠는가 ... 그러나 실제로 2 문자는 다르다. 간단하게 비교하는 방법을 알아보자.

당연히 첫번째 생각되는 문제가 있었다. 인코딩 분명히 DB에는 2개 다른 형태의 데이터로 저장되어 있을 것이다. unicode 값을 찍어보고 싶었는데 왜 안되지 ...? unicode 값을 직접 확인하지 못 하여 다른 방법으로 2개의 문자가 다름을 확인하였다. 각 문자에 encodeURI 함수를 사용하여 값을 찍어보니 아래와 같이 나왔다.

 

console.log(encodeURI("ũ"), encodeURI("ũ"));

 

보면 인코딩된 값이 다른 것을 확인할 수 있다. 그럼 어떻게 2개의 값이 동일하도록 만들 수 있을까? normalize 함수를 사용하면 된다. normalize 함수를 사용한 후 값을 확인해보자.

 

console.log(encodeURI("ũ".normalize("NFC")), encodeURI("ũ".normalize("NFC")));

 

normalize를 거친 문자는 값이 동일한 것을 확인할 수 있다. 즉 문자열을 비교할 때는 정규화를 하여 비교하는 것이 정확하다는 것을 확인할 수 있었다. 정규화 방식은 4가지 NFC, NFD, NFKC, NFKD가 있다. 어떠한 방법을 사용하던 비교할 때 동일한 정규화 방식을 사용하면 된다. 자세한 내용은 해당 링크에 들어가서 확인해보자.

 

해당 게시글에서는 해결 방법만 적었는데, 원인을 알고 싶으면 ASCII, Unicode에 대해서 어느 정도 이해를 해야한다. 그리고 Unicode에서는 합자에 대해서 이해를 해야한다. 한번 스스로 찾아보고 공부해보자.

코드로 한번 더 정리하자면 아래와 같다.

const arrs = ["ũ", "ũ"];

console.log("db -   1", encodeURI(arrs[0]));
console.log(“input - 1", encodeURI(arrs[1]));

console.log("----");

console.log("db -   1", encodeURI(arrs[0].normalize("NFC")));
console.log("input - 1", encodeURI(arrs[1].normalize("NFC")));

console.log("----");

console.log("db -   1", encodeURI("ũ".normalize("NFC")));
console.log("input - 1", encodeURI(arrs[1].normalize("NFC")));

참고

링크 : 이동하기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.

반응형