Intl.Collator API - JavaScript i18n

소개

JavaScript에서 문자열 정렬은 국제 텍스트를 다룰 때까지는 간단해 보입니다. 기본 문자열 비교는 유니코드 코드 포인트 값을 사용하여 많은 언어에서 잘못된 결과를 생성합니다. Intl.Collator API는 문화적 정렬 규칙을 존중하고 특수 문자를 올바르게 처리하는 로케일 인식 문자열 비교를 제공합니다.

기본 정렬이 실패하는 이유

독일어 이름 목록을 정렬하는 경우를 고려해보세요:

const names = ["Zoe", "Ava", "Ärzte", "Änder"];
console.log(names.sort());
// ["Ava", "Zoe", "Änder", "Ärzte"]

이 출력은 독일어 사용자에게 잘못된 것입니다. 독일어에서는 ä와 같은 움라우트가 있는 문자는 끝이 아닌 기본 문자 a 근처에 정렬되어야 합니다. 이 문제는 JavaScript가 유니코드 코드 포인트 값을 비교하기 때문에 발생하며, 여기서 Ä (U+00C4)는 Z (U+005A) 이후에 옵니다.

다른 언어에는 다른 정렬 규칙이 있습니다. 스웨덴어는 ä를 알파벳 끝에 정렬하고, 독일어는 a 근처에 정렬하며, 프랑스어는 악센트 문자를 다르게 처리합니다. 이진 비교는 이러한 문화적 관습을 무시합니다.

문자열 조합(collation)이 작동하는 방식

조합(collation)은 언어별 규칙에 따라 문자열을 비교하고 정렬하는 과정입니다. 유니코드 조합 알고리즘은 문자, 발음 구별 기호, 대소문자, 구두점을 별도로 분석하여 문자열을 비교하는 방법을 정의합니다.

두 문자열을 비교할 때, 조합 함수는 숫자를 반환합니다:

음수 값: 첫 번째 문자열이 두 번째 문자열보다 앞에 옴
0: 현재 민감도 수준에서 문자열이 동등함
양수 값: 첫 번째 문자열이 두 번째 문자열 뒤에 옴

이 세 가지 비교 패턴은 Array.sort와 함께 작동하며 어떤 차이가 중요한지에 대한 정밀한 제어를 가능하게 합니다.

기본 로케일 인식 정렬을 위한 localeCompare 사용

localeCompare 메서드는 로케일 인식 문자열 비교를 제공합니다:

const names = ["Zoe", "Ava", "Ärzte", "Änder"];
console.log(names.sort((a, b) => a.localeCompare(b, "de")));
// ["Ava", "Änder", "Ärzte", "Zoe"]

이것은 올바른 독일어 정렬을 생성합니다. 첫 번째 매개변수는 로케일을 지정하고, localeCompare는 문화적 규칙을 자동으로 처리합니다.

세 번째 매개변수로 옵션을 전달할 수 있습니다:

const items = ["File10", "File2", "File1"];
console.log(items.sort((a, b) =>
  a.localeCompare(b, "en", { numeric: true })
));
// ["File1", "File2", "File10"]

numeric 옵션은 "2"가 "10" 앞에 오는 자연스러운 정렬을 가능하게 합니다. 이 옵션이 없으면 "1"이 "2" 앞에 오기 때문에 "10"이 "2" 앞에 정렬됩니다.

반복적인 localeCompare 사용 시 성능 문제

각 localeCompare 호출은 로케일 설정을 처음부터 처리합니다. 대규모 배열을 정렬할 때 이는 상당한 오버헤드를 발생시킵니다:

// 비효율적: 모든 비교마다 로케일을 처리함
const sorted = items.sort((a, b) => a.localeCompare(b, "de"));

1000개 항목을 정렬하려면 약 10000번의 비교가 필요합니다. 각 비교마다 로케일 구성을 다시 생성하므로 성능 비용이 배가됩니다. 이러한 오버헤드는 대용량 데이터셋이 있는 사용자 인터페이스에서 눈에 띄게 됩니다.

효율적인 문자열 비교를 위한 Intl.Collator 사용

Intl.Collator는 로케일 설정을 한 번만 처리하는 재사용 가능한 비교 객체를 생성합니다:

const collator = new Intl.Collator("de");
const sorted = items.sort((a, b) => collator.compare(a, b));

콜레이터 인스턴스는 로케일 구성과 비교 규칙을 저장합니다. compare 메서드는 모든 비교에 이러한 미리 계산된 규칙을 사용하여 반복적인 초기화 오버헤드를 제거합니다.

반복적인 localeCompare 호출과 비교하여 대규모 배열을 정렬할 때 성능 향상은 60%에서 80%까지 다양합니다.

compare 메서드 직접 접근하기

compare 메서드를 sort에 직접 전달할 수 있습니다:

const collator = new Intl.Collator("de");
const sorted = items.sort(collator.compare);

이것이 작동하는 이유는 compare가 콜레이터 인스턴스에 바인딩되어 있기 때문입니다. 이 메서드는 두 문자열을 받아 비교 결과를 반환하며, Array.sort가 기대하는 서명과 일치합니다.

민감도 수준 이해하기

sensitivity 옵션은 비교 중에 어떤 문자 차이가 중요한지 제어합니다. 네 가지 수준이 있습니다:

기본 민감도

기본 민감도는 악센트와 대소문자를 무시합니다:

const collator = new Intl.Collator("en", { sensitivity: "base" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // 0
console.log(collator.compare("a", "A")); // 0
console.log(collator.compare("a", "b")); // -1

기본 글자만 다릅니다. 이 수준은 사용자가 악센트를 올바르게 입력하지 않을 수 있는 퍼지 검색에 적합합니다.

악센트 민감도

악센트 민감도는 악센트를 고려하지만 대소문자는 무시합니다:

const collator = new Intl.Collator("en", { sensitivity: "accent" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // -1
console.log(collator.compare("a", "A")); // 0
console.log(collator.compare("á", "A")); // 1

악센트가 있는 문자와 없는 문자는 서로 다르게 취급됩니다. 같은 문자의 대문자와 소문자 버전은 일치합니다.

대소문자 민감도

대소문자 민감도는 대소문자를 고려하지만 악센트는 무시합니다:

const collator = new Intl.Collator("en", { sensitivity: "case" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // 0
console.log(collator.compare("a", "A")); // -1
console.log(collator.compare("á", "Á")); // -1

대소문자 차이는 중요하지만 악센트는 무시됩니다. 이 수준은 실제로 덜 일반적으로 사용됩니다.

변형 민감도

변형 민감도는 모든 차이를 고려합니다:

const collator = new Intl.Collator("en", { sensitivity: "variant" });

console.log(collator.compare("a", "a")); // 0
console.log(collator.compare("a", "á")); // -1
console.log(collator.compare("a", "A")); // -1
console.log(collator.compare("á", "Á")); // -1

이것은 정렬의 기본값입니다. 모든 문자 차이는 고유한 비교 결과를 생성합니다.

사용 사례에 따른 민감도 선택

다양한 시나리오에는 다양한 민감도 수준이 필요합니다:

목록 정렬: 엄격한 순서를 유지하기 위해 변형 민감도 사용
콘텐츠 검색: 악센트나 대소문자에 관계없이 일치시키기 위해 기본 민감도 사용
옵션 필터링: 대소문자가 중요하지 않을 때 악센트 민감도 사용
대소문자 구분 검색: 악센트가 중요하지 않을 때 대소문자 민감도 사용

사용 옵션은 일반적인 시나리오에 대한 기본 민감도 설정을 제공합니다.

정렬 및 검색 모드에 usage 사용하기

usage 옵션은 정렬 또는 검색을 위한 collator 동작을 최적화합니다:

// 정렬에 최적화
const sortCollator = new Intl.Collator("en", { usage: "sort" });

// 검색에 최적화
const searchCollator = new Intl.Collator("en", { usage: "search" });

정렬 사용은 기본적으로 변형 민감도로 설정되어 모든 차이가 일관된 순서를 생성하도록 합니다. 검색 사용은 일치 항목을 찾는 데 최적화되어 일반적으로 더 완화된 민감도를 사용합니다.

대소문자 및 악센트를 구분하지 않는 검색의 경우:

const collator = new Intl.Collator("en", {
  usage: "search",
  sensitivity: "base"
});

const items = ["Apple", "Äpfel", "Banana"];
const matches = items.filter(item =>
  collator.compare(item, "apple") === 0
);
console.log(matches); // ["Apple"]

이 패턴을 사용하면 사용자가 정확한 문자를 입력할 필요가 없는 퍼지 매칭이 가능합니다.

자연스러운 정렬을 위한 숫자 정렬 활성화

numeric 옵션은 포함된 숫자를 숫자 값으로 처리합니다:

const collator = new Intl.Collator("en", { numeric: true });

const files = ["File1", "File10", "File2"];
console.log(files.sort(collator.compare));
// ["File1", "File2", "File10"]

숫자 정렬 없이는 "File10"이 "File2"보다 먼저 정렬됩니다. 문자열 "10"이 "1"로 시작하기 때문입니다. 숫자 정렬은 숫자 시퀀스를 구문 분석하고 수학적으로 비교합니다.

이는 파일 이름, 버전 번호 및 번호가 매겨진 목록에 대한 인간의 기대와 일치하는 자연스러운 정렬을 생성합니다.

숫자 정렬로 소수점 숫자 처리하기

숫자 정렬은 소수점 숫자에 제한이 있습니다:

const collator = new Intl.Collator("en", { numeric: true });

const values = ["1.5", "1.10", "1.2"];
console.log(values.sort(collator.compare));
// ["1.2", "1.5", "1.10"]

소수점은 숫자의 일부가 아닌 구두점으로 취급됩니다. 구두점 사이의 각 세그먼트는 별도로 정렬됩니다. 소수점 숫자 정렬을 위해서는 값을 숫자로 파싱하고 숫자 비교를 사용하세요.

caseFirst로 대소문자 정렬 제어하기

caseFirst 옵션은 대문자 또는 소문자가 먼저 정렬되는지 결정합니다:

// 대문자 먼저
const upperFirst = new Intl.Collator("en", { caseFirst: "upper" });
console.log(["a", "A", "b", "B"].sort(upperFirst.compare));
// ["A", "a", "B", "b"]

// 소문자 먼저
const lowerFirst = new Intl.Collator("en", { caseFirst: "lower" });
console.log(["a", "A", "b", "B"].sort(lowerFirst.compare));
// ["a", "A", "b", "B"]

기본값은 false이며, 이는 로케일 기본 정렬 순서를 사용합니다. sensitivity가 base 또는 accent일 때는 대소문자를 무시하므로 이 옵션은 효과가 없습니다.

비교 중 구두점 무시하기

ignorePunctuation 옵션은 비교 중 구두점을 건너뜁니다:

const collator = new Intl.Collator("en", { ignorePunctuation: true });

console.log(collator.compare("hello", "he-llo")); // 0
console.log(collator.compare("hello", "hello!")); // 0

이 옵션은 태국어의 경우 기본값이 true이고 다른 언어의 경우 false입니다. 구두점이 문자열 정렬이나 매칭에 영향을 주지 않아야 할 때 사용하세요.

언어별 규칙을 위한 콜레이션 유형 지정하기

일부 로케일은 특수 정렬을 위한 여러 콜레이션 유형을 지원합니다:

// 중국어 병음 순서
const pinyin = new Intl.Collator("zh-CN-u-co-pinyin");

// 독일어 전화번호부 순서
const phonebook = new Intl.Collator("de-DE-u-co-phonebk");

// 이모지 그룹화
const emoji = new Intl.Collator("en-u-co-emoji");

콜레이션 유형은 유니코드 확장 구문을 사용하여 로케일 문자열에 지정됩니다. 일반적인 유형은 다음과 같습니다:

pinyin: 로마자 발음에 따른 중국어 정렬
stroke: 획수에 따른 중국어 정렬
phonebk: 독일어 전화번호부 순서
trad: 특정 언어의 전통적인 정렬 규칙
emoji: 카테고리별 이모지 그룹화

사용 환경에서 사용 가능한 콜레이션 유형은 Intl.supportedValuesOf를 확인하세요.

애플리케이션 전체에서 콜레이터 인스턴스 재사용하기

콜레이터 인스턴스를 한 번 생성하고 애플리케이션 전체에서 재사용하세요:

// utils/collation.js
export const germanCollator = new Intl.Collator("de");
export const searchCollator = new Intl.Collator("en", {
  sensitivity: "base"
});
export const numericCollator = new Intl.Collator("en", {
  numeric: true
});

// 컴포넌트에서
import { germanCollator } from "./utils/collation";

const sorted = names.sort(germanCollator.compare);

이 패턴은 성능을 최대화하고 코드베이스 전체에서 일관된 비교 동작을 유지합니다.

속성별 객체 배열 정렬하기

객체 속성에 접근하는 비교 함수에서 콜레이터를 사용하세요:

const collator = new Intl.Collator("de");

const users = [
  { name: "Zoe" },
  { name: "Änder" },
  { name: "Ava" }
];

const sorted = users.sort((a, b) =>
  collator.compare(a.name, b.name)
);

이 접근 방식은 모든 객체 구조에 적용됩니다. 비교할 문자열을 추출하여 콜레이터에 전달하세요.

Intl.Collator와 localeCompare 성능 비교

Intl.Collator는 대규모 데이터셋을 정렬할 때 더 나은 성능을 제공합니다:

// 느림: 각 비교마다 로케일 설정을 다시 생성
const slow = items.sort((a, b) => a.localeCompare(b, "de"));

// 빠름: 미리 계산된 로케일 설정 재사용
const collator = new Intl.Collator("de");
const fast = items.sort(collator.compare);

작은 배열(100개 미만의 항목)의 경우 차이가 미미합니다. 큰 배열(수천 개의 항목)의 경우 Intl.Collator는 60-80% 더 빠를 수 있습니다.

Chrome과 같은 V8 기반 브라우저에서는 예외가 있습니다. localeCompare는 조회 테이블을 사용하여 ASCII 전용 문자열에 대한 최적화가 있습니다. 순수 ASCII 문자열을 정렬할 때 localeCompare는 Intl.Collator와 비슷한 성능을 보일 수 있습니다.

Intl.Collator와 localeCompare를 언제 사용해야 하는지 알기

Intl.Collator를 사용하는 경우:

대규모 배열 정렬 시(수백 또는 수천 개의 항목)
반복적으로 정렬할 때(사용자가 정렬 순서 전환, 가상 목록)
재사용 가능한 비교 유틸리티 구축 시
성능이 사용 사례에 중요할 때

localeCompare를 사용하는 경우:

일회성 비교 시
소규모 배열 정렬 시(100개 미만의 항목)
단순성이 성능 문제보다 중요할 때
설정 없이 인라인 비교가 필요할 때

두 API 모두 동일한 옵션을 지원하고 동일한 결과를 생성합니다. 차이점은 순전히 성능과 코드 구성에 관한 것입니다.

해결된 옵션 확인하기

resolvedOptions 메서드는 콜레이터가 실제로 사용하는 옵션을 반환합니다:

const collator = new Intl.Collator("de", { sensitivity: "base" });
console.log(collator.resolvedOptions());
// {
//   locale: "de",
//   usage: "sort",
//   sensitivity: "base",
//   ignorePunctuation: false,
//   collation: "default",
//   numeric: false,
//   caseFirst: "false"
// }

이는 콜레이션 동작을 디버깅하고 기본값을 이해하는 데 도움이 됩니다. 시스템이 정확한 로케일을 지원하지 않는 경우 해결된 로케일이 요청된 로케일과 다를 수 있습니다.

로케일 지원 확인하기

현재 환경에서 지원되는 로케일을 확인합니다:

const supported = Intl.Collator.supportedLocalesOf(["de", "fr", "xx"]);
console.log(supported); // ["de", "fr"]

지원되지 않는 로케일은 시스템 기본값으로 대체됩니다. 이 메서드는 요청한 로케일을 사용할 수 없을 때 감지하는 데 도움이 됩니다.

브라우저 및 환경 지원

Intl.Collator는 2017년 9월 이후로 널리 지원되고 있습니다. 모든 최신 브라우저와 Node.js 버전에서 지원됩니다. API는 환경 전반에 걸쳐 일관되게 작동합니다.

일부 콜레이션 유형과 옵션은 구형 브라우저에서 제한된 지원을 가질 수 있습니다. 구형 환경을 지원하는 경우 중요한 기능을 테스트하거나 MDN 호환성 표를 확인하세요.

피해야 할 일반적인 실수

모든 비교에 새로운 collator를 생성하지 마세요:

// 잘못된 방법: collator를 반복적으로 생성함
items.sort((a, b) => new Intl.Collator("de").compare(a, b));

// 올바른 방법: 한 번 생성하고 재사용
const collator = new Intl.Collator("de");
items.sort(collator.compare);

기본 정렬이 국제 텍스트에 적합하다고 가정하지 마세요:

// 잘못된 방법: ASCII가 아닌 문자에서 문제 발생
names.sort();

// 올바른 방법: 로케일을 고려한 정렬 사용
names.sort(new Intl.Collator("de").compare);

검색 시 민감도 지정을 잊지 마세요:

// 잘못된 방법: variant 민감도는 정확한 일치를 요구함
const collator = new Intl.Collator("en");
items.filter(item => collator.compare(item, "apple") === 0);

// 올바른 방법: 유연한 매칭을 위한 base 민감도
const collator = new Intl.Collator("en", { sensitivity: "base" });
items.filter(item => collator.compare(item, "apple") === 0);

실용적인 사용 사례

Intl.Collator의 사용 사례:

사용자 생성 콘텐츠 정렬(이름, 제목, 주소)
검색 및 자동 완성 기능 구현
정렬 가능한 열이 있는 데이터 테이블 구축
필터링된 목록 및 드롭다운 옵션 생성
파일 이름 및 버전 번호 정렬
연락처 목록의 알파벳 탐색
다국어 애플리케이션 인터페이스

사용자에게 정렬된 텍스트를 표시하는 모든 인터페이스는 로케일을 고려한 정렬의 이점을 얻습니다. 이를 통해 사용자의 언어에 관계없이 애플리케이션이 자연스럽고 정확하게 느껴지도록 보장합니다.