[EXT-022][실무] 언어와 지역 코드를 읽기 쉬운 이름으로 바꾸기
페이지 정보
작성자 기술팀장 작성일 26-09-08 12:36 조회 6 댓글 0본문
[이번 수업]
설정 화면의 ja, JP, JPY 같은 코드를 사용자에게 그대로 보여 주지 않고 일본어, 일본, 일본 엔처럼 읽기 쉬운 이름으로 표시합니다. Intl.DisplayNames와 이름이 없을 때의 대체 동작을 다룹니다.
[선수지식]
문자열, 객체, 배열을 알고 Node.js 파일을 실행할 수 있으면 됩니다. 로케일은 언어와 지역에 따른 표시 규칙 묶음이며, 코드는 데이터를 안정적으로 식별하는 짧은 값입니다.
[학습목표]
1. 언어·지역·통화 코드를 로케일에 맞는 이름으로 표시할 수 있습니다.
2. type, style, fallback 옵션의 역할을 설명할 수 있습니다.
3. 저장용 코드와 화면용 이름을 분리할 수 있습니다.
[핵심개념]
Intl.DisplayNames는 표준 코드에 대응하는 현지화 이름을 제공합니다. 생성할 때 첫 인수로 표시 언어를, type으로 코드 종류를 정합니다. type은 language, region, script, currency, calendar, dateTimeField 중 하나입니다. 예를 들어 표시 언어가 ko이고 type이 region이면 JP가 '일본'으로 바뀝니다.
style은 long, short, narrow 중 하나지만 데이터에 따라 결과가 같을 수도 있습니다. fallback: 'code'는 이름을 찾지 못하면 정리된 코드를 돌려주고, fallback: 'none'은 undefined를 돌려줍니다. 구조가 잘못된 코드는 RangeError를 낼 수 있습니다. DisplayNames는 화면용 도구일 뿐 코드의 실제 배정이나 결제 가능 여부를 판정하지 않습니다. 업무 검증은 공식 등록부와 서비스 허용 목록으로 처리합니다.
[따라하기]
아래를 display-names.js로 저장합니다.
```javascript
const languages = new Intl.DisplayNames(['ko'], {
type: 'language', languageDisplay: 'standard'
});
const regions = new Intl.DisplayNames(['ko'], { type: 'region' });
const currencies = new Intl.DisplayNames(['en'], {
type: 'currency', style: 'long', fallback: 'none'
});
console.log(languages.of('ja'));
console.log(regions.of('JP'));
console.log(currencies.of('JPY'));
console.log(currencies.of('ZZZ'));
console.log(Intl.DisplayNames.supportedLocalesOf(['ko', 'en']));
```
`node display-names.js`를 실행합니다. 이 환경의 예상 결과는 `일본어`, `일본`, `Japanese Yen`, `undefined`, `[ 'ko', 'en' ]` 순서입니다. ZZZ는 이름 데이터가 없어 undefined가 됩니다. Windows PowerShell·명령 프롬프트, macOS 터미널, Linux 셸에서 명령은 같습니다. Node.js와 ICU·CLDR 데이터 버전에 따라 번역 이름과 지원 로케일이 다를 수 있으므로 운영 환경에서도 확인하세요.
[흔한 실수]
표시할 언어와 이름을 묻는 코드의 역할을 뒤집지 마세요. new Intl.DisplayNames(['en'], { type: 'region' }).of('JP')는 영어로 'Japan'을 만듭니다. 화면에 표시된 번역 이름을 데이터베이스 키로 저장하면 언어 변경이나 데이터 갱신 때 연결이 끊깁니다. 이름이 항상 문자열이라고 가정하면 fallback: 'none'에서 undefined를 놓칩니다. 짧은 style이 언제나 더 짧은 결과를 보장한다고 생각해서도 안 됩니다.
[보안 주의]
외부에서 받은 type과 로케일을 그대로 생성자에 넣지 말고 애플리케이션의 허용 목록에서 고릅니다. 권한, 국가 제한, 통화 결제 여부는 번역된 이름이 아니라 검증된 원본 코드로 판단하세요. 사용자에게서 받은 코드는 길이와 문법을 검사하고, 지원 목록과 대조합니다. 결과를 HTML에 넣을 때는 일반 텍스트로 렌더링해 스크립트 삽입을 막습니다. 실습은 본인 소유의 로컬 환경에서만 진행합니다.
[직접 해볼 과제]
JP, KR, US를 ko, en, ja 표시 언어로 각각 변환해 표를 만드세요. fallback을 code와 none으로 바꾸어 ZZZ 결과를 비교하고 undefined일 때 '알 수 없는 통화'를 보여 주세요. 마지막으로 region 타입에 JPN을 넣어 try/catch로 RangeError를 확인하세요.
[확인문제]
1. 데이터베이스에는 번역 이름보다 원본 코드를 저장해야 하는 이유는 무엇인가요?
2. fallback: 'none'에서 이름을 찾지 못하면 어떤 값이 나오나요?
3. Intl.DisplayNames만으로 코드의 실제 배정 여부를 판단하면 안 되는 이유는 무엇인가요?
[다음 학습]
다음에는 Intl.Locale로 언어 태그의 언어·문자 체계·지역 정보를 안전하게 읽고 정리하는 방법을 배웁니다.
[공식 참고 자료]
ECMA-402 DisplayNames: https://tc39.es/ecma402/#displaynames-objects
ECMA-402 of() 메서드: https://tc39.es/ecma402/#sec-Intl.DisplayNames.prototype.of
Unicode LDML 표시 이름: https://www.unicode.org/reports/tr35/tr35-general.html#Display_Name_Elements
IANA 언어 하위 태그 등록부: https://www.iana.org/assignments/language-subtags-tags-extensions/
Node.js 국제화 지원: https://nodejs.org/api/intl.html
설정 화면의 ja, JP, JPY 같은 코드를 사용자에게 그대로 보여 주지 않고 일본어, 일본, 일본 엔처럼 읽기 쉬운 이름으로 표시합니다. Intl.DisplayNames와 이름이 없을 때의 대체 동작을 다룹니다.
[선수지식]
문자열, 객체, 배열을 알고 Node.js 파일을 실행할 수 있으면 됩니다. 로케일은 언어와 지역에 따른 표시 규칙 묶음이며, 코드는 데이터를 안정적으로 식별하는 짧은 값입니다.
[학습목표]
1. 언어·지역·통화 코드를 로케일에 맞는 이름으로 표시할 수 있습니다.
2. type, style, fallback 옵션의 역할을 설명할 수 있습니다.
3. 저장용 코드와 화면용 이름을 분리할 수 있습니다.
[핵심개념]
Intl.DisplayNames는 표준 코드에 대응하는 현지화 이름을 제공합니다. 생성할 때 첫 인수로 표시 언어를, type으로 코드 종류를 정합니다. type은 language, region, script, currency, calendar, dateTimeField 중 하나입니다. 예를 들어 표시 언어가 ko이고 type이 region이면 JP가 '일본'으로 바뀝니다.
style은 long, short, narrow 중 하나지만 데이터에 따라 결과가 같을 수도 있습니다. fallback: 'code'는 이름을 찾지 못하면 정리된 코드를 돌려주고, fallback: 'none'은 undefined를 돌려줍니다. 구조가 잘못된 코드는 RangeError를 낼 수 있습니다. DisplayNames는 화면용 도구일 뿐 코드의 실제 배정이나 결제 가능 여부를 판정하지 않습니다. 업무 검증은 공식 등록부와 서비스 허용 목록으로 처리합니다.
[따라하기]
아래를 display-names.js로 저장합니다.
```javascript
const languages = new Intl.DisplayNames(['ko'], {
type: 'language', languageDisplay: 'standard'
});
const regions = new Intl.DisplayNames(['ko'], { type: 'region' });
const currencies = new Intl.DisplayNames(['en'], {
type: 'currency', style: 'long', fallback: 'none'
});
console.log(languages.of('ja'));
console.log(regions.of('JP'));
console.log(currencies.of('JPY'));
console.log(currencies.of('ZZZ'));
console.log(Intl.DisplayNames.supportedLocalesOf(['ko', 'en']));
```
`node display-names.js`를 실행합니다. 이 환경의 예상 결과는 `일본어`, `일본`, `Japanese Yen`, `undefined`, `[ 'ko', 'en' ]` 순서입니다. ZZZ는 이름 데이터가 없어 undefined가 됩니다. Windows PowerShell·명령 프롬프트, macOS 터미널, Linux 셸에서 명령은 같습니다. Node.js와 ICU·CLDR 데이터 버전에 따라 번역 이름과 지원 로케일이 다를 수 있으므로 운영 환경에서도 확인하세요.
[흔한 실수]
표시할 언어와 이름을 묻는 코드의 역할을 뒤집지 마세요. new Intl.DisplayNames(['en'], { type: 'region' }).of('JP')는 영어로 'Japan'을 만듭니다. 화면에 표시된 번역 이름을 데이터베이스 키로 저장하면 언어 변경이나 데이터 갱신 때 연결이 끊깁니다. 이름이 항상 문자열이라고 가정하면 fallback: 'none'에서 undefined를 놓칩니다. 짧은 style이 언제나 더 짧은 결과를 보장한다고 생각해서도 안 됩니다.
[보안 주의]
외부에서 받은 type과 로케일을 그대로 생성자에 넣지 말고 애플리케이션의 허용 목록에서 고릅니다. 권한, 국가 제한, 통화 결제 여부는 번역된 이름이 아니라 검증된 원본 코드로 판단하세요. 사용자에게서 받은 코드는 길이와 문법을 검사하고, 지원 목록과 대조합니다. 결과를 HTML에 넣을 때는 일반 텍스트로 렌더링해 스크립트 삽입을 막습니다. 실습은 본인 소유의 로컬 환경에서만 진행합니다.
[직접 해볼 과제]
JP, KR, US를 ko, en, ja 표시 언어로 각각 변환해 표를 만드세요. fallback을 code와 none으로 바꾸어 ZZZ 결과를 비교하고 undefined일 때 '알 수 없는 통화'를 보여 주세요. 마지막으로 region 타입에 JPN을 넣어 try/catch로 RangeError를 확인하세요.
[확인문제]
1. 데이터베이스에는 번역 이름보다 원본 코드를 저장해야 하는 이유는 무엇인가요?
2. fallback: 'none'에서 이름을 찾지 못하면 어떤 값이 나오나요?
3. Intl.DisplayNames만으로 코드의 실제 배정 여부를 판단하면 안 되는 이유는 무엇인가요?
[다음 학습]
다음에는 Intl.Locale로 언어 태그의 언어·문자 체계·지역 정보를 안전하게 읽고 정리하는 방법을 배웁니다.
[공식 참고 자료]
ECMA-402 DisplayNames: https://tc39.es/ecma402/#displaynames-objects
ECMA-402 of() 메서드: https://tc39.es/ecma402/#sec-Intl.DisplayNames.prototype.of
Unicode LDML 표시 이름: https://www.unicode.org/reports/tr35/tr35-general.html#Display_Name_Elements
IANA 언어 하위 태그 등록부: https://www.iana.org/assignments/language-subtags-tags-extensions/
Node.js 국제화 지원: https://nodejs.org/api/intl.html
댓글목록 0
등록된 댓글이 없습니다.