normalize — 유니코드 정규화

문제점

json 데이터의 "힙합보이" 문자열과 외부 API에서 받는 "힙합보이" 문자열이 서로 다르다고 나온다.

 const filtered = data.filter((entry) => entry.item_name === filteredName);

 

 

해결 - normalize 유니코드 정규화

한글같이 복잡한 문자는 내부적으로 여러개의 코드 포인트로 저장될 수 있다고 한다.

예를 들어 “힙합” 은

• NFC(결합형) 모드에서는 단일 코드 포인트 "힙" "합"
• NFD(분해형) 모드에서는 초성·중성·종성 조각 세 개의 코드 포인트 "ㅎ" "ㅣ" "ㅂ" "ㅎ" "ㅏ"  "ㅂ"

으로 표현된다.

name.normalize("NFC")으로 모두 완전히 동일한 문자열로 바꿔주었다.

 const filtered = data.filter((entry) => entry.item_name.normalize("NFC") === filteredName..normalize("NFC"));

 

 

 

 

전체 코드

function normalizeKey(s: string) {
  return s.trim().normalize("NFC");
}

function useManifest(filteredName: string) {
  return useQuery<ManifestEntry[]>({
    queryKey: ["image-manifest", filteredName],
    queryFn: () => axios.get<ManifestEntry[]>("/data/image-manifest.json").then((res) => res.data),
    staleTime: Infinity,
    select: (data) => {
      const filtered = data.filter((entry) => normalizeKey(entry.item_name) === normalizeKey(filteredName));
      return filtered;
    },
  });
}

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

String.prototype.normalize() - JavaScript | MDN