[EXT-021][실무] 이름과 파일명을 언어에 맞게 정렬하기 > IT 기술 공유

• 목록

[이번 수업]

문자열을 단순한 문자 코드 순서가 아니라 사용자의 언어 규칙에 맞게 정렬하고 비교합니다. JavaScript의 Intl.Collator를 이용해 파일1, 파일2, 파일10을 자연스러운 순서로 놓고, 검색할 때 악센트 차이를 무시하는 방법도 배웁니다.

[선수지식]

배열, 문자열, 비교 함수, Array.prototype.sort()를 알고 Node.js 파일을 실행할 수 있으면 됩니다. 콜레이션은 글자를 언어 관습에 맞춰 비교하고 순서를 정하는 규칙입니다.

[학습목표]

1. Intl.Collator의 compare를 배열 정렬에 사용할 수 있습니다.
2. numeric, sensitivity, usage 옵션의 역할을 설명할 수 있습니다.
3. 화면 정렬과 보안 식별자 비교를 분리할 수 있습니다.

[핵심개념]

코드 단위만 비교하면 사람이 기대하는 사전 순서와 다를 수 있습니다. Intl.Collator는 로케일과 옵션을 받아 언어에 맞는 비교 함수를 만듭니다. compare(a, b)는 a가 앞이면 음수, 뒤면 양수, 같은 수준이면 0을 반환합니다. 정확히 -1이나 1이라고 가정하지 말고 부호만 사용해야 합니다.

numeric: true는 문자열 안의 연속된 숫자를 수치처럼 비교해 파일2를 파일10보다 앞에 둡니다. sensitivity는 base, accent, case, variant 중 하나입니다. base는 기본 글자만 보고 대소문자와 악센트 차이를 같은 것으로 볼 수 있고, variant는 더 많은 차이를 구별합니다. usage: 'sort'는 순서를 정할 때, usage: 'search'는 검색 일치 여부를 확인할 때 씁니다. 표준은 search용 비교 결과에 특정 정렬 순서를 보장하지 않으므로 검색 Collator로 목록을 정렬하지 않습니다.

[따라하기]

아래를 collator-demo.js로 저장합니다.

```javascript
const files = ['파일10', '파일2', '파일1'];
const sorter = new Intl.Collator('ko-KR', {
  usage: 'sort', numeric: true, sensitivity: 'variant'
});
const finder = new Intl.Collator('en-US', {
  usage: 'search', sensitivity: 'base'
});

console.log([...files].sort(sorter.compare));
console.log(finder.compare('resume', 'résumé') === 0);
console.log(Math.sign(sorter.compare('파일2', '파일10')));
console.log(Intl.Collator.supportedLocalesOf(['ko-KR', 'en-US']));
```

`node collator-demo.js`를 실행합니다. 예상 결과는 `[ '파일1', '파일2', '파일10' ]`, `true`, `-1`, `[ 'ko-KR', 'en-US' ]` 순서입니다. Windows PowerShell·명령 프롬프트, macOS 터미널, Linux 셸에서 명령은 같습니다. Node.js 빌드와 ICU·CLDR 데이터 버전에 따라 언어 지원과 세부 순서가 달라질 수 있으므로 배포 환경에서도 확인하세요.

[흔한 실수]

기본 sort()만 호출하면 숫자를 포함한 이름이 파일1, 파일10, 파일2처럼 보일 수 있습니다. compare 반환값이 언제나 -1, 0, 1이라고 단정하면 안 됩니다. sensitivity: 'base'에서 compare 결과가 0이어도 두 원본 문자열이 바이트까지 같다는 뜻은 아닙니다. 또한 search 용도의 Collator를 정렬에 재사용하지 마세요.

[보안 주의]

비밀번호, 접근 토큰, 서명값, 권한 ID는 로케일 비교 대상이 아닙니다. 이런 값은 정해진 인코딩과 정확한 일치 규칙으로 비교해야 합니다. base 비교는 서로 다른 문자열을 같게 볼 수 있으므로 로그인 식별자의 유일성 판단에도 그대로 쓰지 마세요. 로케일과 옵션은 허용 목록에서 고르고 입력 길이를 제한해 과도한 처리 비용을 막습니다. 정렬된 문자열을 HTML에 표시할 때도 일반 텍스트로 렌더링합니다. 실습은 본인 소유의 로컬 데이터에서만 진행합니다.

[직접 해볼 과제]

상품1, 상품02, 상품2, 상품10 배열을 numeric: false와 true로 각각 정렬해 차이를 기록하세요. en-US에서 sensitivity를 base, accent, case, variant로 바꾸며 resume, résumé, Resume의 compare 결과도 표로 정리하세요. 마지막으로 지원하지 않을 수 있는 로케일을 supportedLocalesOf()로 확인하세요.

[확인문제]

1. compare() 결과를 정확히 -1이나 1로 가정하면 안 되는 이유는 무엇인가요?
2. numeric: true는 파일2와 파일10의 순서를 어떻게 바꾸나요?
3. usage: 'search'인 Collator를 목록 정렬에 쓰면 안 되는 이유는 무엇인가요?

[다음 학습]

다음에는 사용자 언어에 맞게 사람 이름, 주소, 메시지 같은 표시 문구를 관리하는 번역 키와 대체 규칙을 다룹니다.

[공식 참고 자료]

ECMA-402 Collator: https://tc39.es/ecma402/#collator-objects
ECMA-402 Collator 비교 함수: https://tc39.es/ecma402/#sec-collator-compare-functions
Unicode Collation Algorithm: https://www.unicode.org/reports/tr10/
Unicode LDML Collation: https://www.unicode.org/reports/tr35/tr35-collation.html
Node.js 국제화 지원: https://nodejs.org/api/intl.html