컴포넌트에서 로케일 식별자를 구성하는 방법

자바스크립트에서 언어, 스크립트 및 지역 코드를 결합하여 로케일 식별자 구성하기

소개

'en-US' 또는 'zh-Hans-CN'과 같은 로케일 식별자는 언어, 문자 체계 및 지역에 대한 정보를 인코딩합니다. 때로는 고정된 문자열을 사용하는 대신 프로그래밍 방식으로 이러한 식별자를 구성해야 할 필요가 있습니다. 예를 들어, 사용자가 언어와 지역을 별도로 선택하게 한 다음, 이를 유효한 로케일 식별자로 결합할 수 있습니다.

JavaScript의 Intl.Locale 생성자를 사용하면 개별 구성 요소에서 로케일 식별자를 구축할 수 있습니다. 언어, 스크립트 및 지역을 별도의 매개변수로 지정할 수 있으며, 생성자는 이를 적절하게 형식화된 식별자로 조립합니다.

이 가이드는 구성 요소에서 로케일 식별자를 구성하는 방법, 이 접근 방식을 사용해야 하는 경우, 그리고 예외 상황을 처리하는 방법을 설명합니다.

로케일 식별자 구성 요소 이해하기

로케일 식별자는 하이픈으로 구분된 구성 요소로 이루어져 있습니다. 각 구성 요소는 문화적 선호도의 다른 측면을 나타냅니다.

언어 코드는 사용할 언어를 지정합니다. ISO 639에서 두 개 또는 세 개의 소문자를 사용합니다:

  • en 영어
  • es 스페인어
  • fr 프랑스어
  • zh 중국어
  • ar 아랍어

스크립트 코드는 문자 체계를 지정합니다. ISO 15924에서 첫 글자가 대문자인 네 글자를 사용합니다:

  • Hans 간체 중국어 문자
  • Hant 번체 중국어 문자
  • Cyrl 키릴 문자
  • Latn 라틴 문자

지역 코드는 지리적 영역을 지정합니다. ISO 3166-1에서 두 개의 대문자 또는 UN M.49에서 세 자리 숫자를 사용합니다:

  • US 미국
  • GB 영국
  • CN 중국
  • MX 멕시코

이러한 구성 요소는 특정 순서로 결합됩니다: 언어, 스크립트, 지역 순입니다. 예를 들어, zh-Hans-CN은 중국어 언어, 간체 스크립트, 중국 지역을 의미합니다.

언어와 지역만으로 로케일 구성하기

가장 일반적인 시나리오는 언어 코드와 지역 코드를 결합하는 것입니다. 대부분의 애플리케이션은 각 언어에 기본 스크립트가 있기 때문에 스크립트를 명시적으로 지정할 필요가 없습니다.

첫 번째 인수로 언어 코드를 전달하고 지역이 포함된 옵션 객체를 전달하여 로케일을 구성할 수 있습니다:

const locale = new Intl.Locale("en", {
  region: "US"
});

console.log(locale.toString());
// 출력: "en-US"

이렇게 하면 미국 영어에 대한 로케일 식별자가 생성됩니다.

동일한 언어의 다양한 지역 변형을 구성할 수 있습니다:

const usEnglish = new Intl.Locale("en", { region: "US" });
const britishEnglish = new Intl.Locale("en", { region: "GB" });
const canadianEnglish = new Intl.Locale("en", { region: "CA" });

console.log(usEnglish.toString()); // "en-US"
console.log(britishEnglish.toString()); // "en-GB"
console.log(canadianEnglish.toString()); // "en-CA"

각 변형은 동일한 언어를 사용하지만 다른 지역 형식 규칙을 따릅니다.

언어, 스크립트 및 지역으로 로케일 구성하기

일부 언어는 명시적인 스크립트 코드가 필요합니다. 중국어, 세르비아어 및 몇몇 다른 언어는 여러 문자 체계를 사용합니다. 모호함을 피하기 위해 스크립트를 지정해야 합니다.

옵션 객체에 스크립트 구성 요소를 추가할 수 있습니다:

const simplifiedChinese = new Intl.Locale("zh", {
  script: "Hans",
  region: "CN"
});

console.log(simplifiedChinese.toString());
// 출력: "zh-Hans-CN"

이렇게 하면 중국에서 사용되는 간체 중국어에 대한 로케일이 생성됩니다.

번체 중국어는 다른 스크립트와 지역을 사용합니다:

const traditionalChinese = new Intl.Locale("zh", {
  script: "Hant",
  region: "TW"
});

console.log(traditionalChinese.toString());
// 출력: "zh-Hant-TW"

스크립트 코드는 두 문자 체계를 구분합니다.

세르비아어는 키릴 문자와 라틴 문자를 모두 사용합니다. 어떤 스크립트를 사용할지 지정해야 합니다:

const serbianCyrillic = new Intl.Locale("sr", {
  script: "Cyrl",
  region: "RS"
});

const serbianLatin = new Intl.Locale("sr", {
  script: "Latn",
  region: "RS"
});

console.log(serbianCyrillic.toString()); // "sr-Cyrl-RS"
console.log(serbianLatin.toString()); // "sr-Latn-RS"

두 로케일 모두 세르비아에서 세르비아어를 사용하지만 다른 문자 체계를 사용합니다.

사용자 선택에서 로케일 구성하기

사용자 인터페이스는 종종 언어와 지역을 별도로 선택할 수 있게 합니다. 이러한 선택을 로케일 식별자로 결합할 수 있습니다.

두 개의 드롭다운 메뉴가 있는 설정 양식을 고려해보세요:

function buildLocaleFromSelections(languageCode, regionCode) {
  const locale = new Intl.Locale(languageCode, {
    region: regionCode
  });

  return locale.toString();
}

const userLocale = buildLocaleFromSelections("es", "MX");
console.log(userLocale);
// 출력: "es-MX"

이는 독립적인 선택에서 로케일 식별자를 생성합니다.

생성자에서 발생하는 오류를 캐치하여 선택을 검증할 수 있습니다:

function buildLocaleFromSelections(languageCode, regionCode) {
  try {
    const locale = new Intl.Locale(languageCode, {
      region: regionCode
    });
    return {
      success: true,
      locale: locale.toString()
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

const valid = buildLocaleFromSelections("fr", "CA");
console.log(valid);
// 출력: { success: true, locale: "fr-CA" }

const invalid = buildLocaleFromSelections("invalid", "XX");
console.log(invalid);
// 출력: { success: false, error: "..." }

생성자는 구성 요소가 유효하지 않은 경우 RangeError를 발생시킵니다.

선택적 구성 요소로 로케일 구성하기

모든 로케일이 모든 구성 요소를 필요로 하는 것은 아닙니다. 필요하지 않은 구성 요소는 생략할 수 있습니다.

언어만 있는 로케일은 지역과 스크립트를 생략합니다:

const locale = new Intl.Locale("fr");
console.log(locale.toString());
// 출력: "fr"

이는 특정 지역이나 스크립트를 지정하지 않고 프랑스어를 나타냅니다.

사용자 입력에 따라 구성 요소를 조건부로 포함할 수 있습니다:

function buildLocale(language, options = {}) {
  const localeOptions = {};

  if (options.region) {
    localeOptions.region = options.region;
  }

  if (options.script) {
    localeOptions.script = options.script;
  }

  const locale = new Intl.Locale(language, localeOptions);
  return locale.toString();
}

console.log(buildLocale("en"));
// 출력: "en"

console.log(buildLocale("en", { region: "US" }));
// 출력: "en-US"

console.log(buildLocale("zh", { script: "Hans", region: "CN" }));
// 출력: "zh-Hans-CN"

이 함수는 사용 가능한 정보를 기반으로 가장 간단한 유효한 로케일 식별자를 구성합니다.

기존 로케일의 컴포넌트 재정의

기존 로케일 식별자를 가져와 특정 컴포넌트를 재정의할 수 있습니다. 이는 다른 부분은 그대로 유지하면서 한 부분만 변경해야 할 때 유용합니다.

생성자의 두 번째 인수는 첫 번째 인수의 컴포넌트를 재정의합니다:

const baseLocale = new Intl.Locale("en-US");
const withDifferentRegion = new Intl.Locale(baseLocale, {
  region: "GB"
});

console.log(withDifferentRegion.toString());
// 출력: "en-GB"

새 로케일은 언어는 유지하면서 지역을 변경합니다.

여러 컴포넌트를 재정의할 수 있습니다:

const original = new Intl.Locale("zh-Hans-CN");
const modified = new Intl.Locale(original, {
  script: "Hant",
  region: "TW"
});

console.log(modified.toString());
// 출력: "zh-Hant-TW"

이는 언어는 유지하면서 스크립트와 지역을 모두 변경합니다.

구성된 로케일에 서식 지정 환경설정 추가

언어, 스크립트, 지역 외에도 로케일에는 서식 지정 환경설정이 포함될 수 있습니다. 이러한 환경설정은 날짜, 숫자 및 기타 값이 표시되는 방식을 제어합니다.

로케일을 구성할 때 캘린더 환경설정을 추가할 수 있습니다:

const locale = new Intl.Locale("ar", {
  region: "SA",
  calendar: "islamic"
});

console.log(locale.toString());
// 출력: "ar-SA-u-ca-islamic"

console.log(locale.calendar);
// 출력: "islamic"

캘린더 환경설정은 식별자 문자열에 유니코드 확장으로 나타납니다.

여러 서식 지정 환경설정을 지정할 수 있습니다:

const locale = new Intl.Locale("en", {
  region: "US",
  calendar: "gregory",
  numberingSystem: "latn",
  hourCycle: "h12"
});

console.log(locale.toString());
// 출력: "en-US-u-ca-gregory-hc-h12-nu-latn"

생성자는 확장 키를 알파벳 순으로 정렬합니다.

이러한 환경설정은 포맷터가 데이터를 표시하는 방식에 영향을 미칩니다:

const locale = new Intl.Locale("ar", {
  region: "EG",
  numberingSystem: "arab"
});

const formatter = new Intl.NumberFormat(locale);
console.log(formatter.format(12345));
// 출력: "١٢٬٣٤٥" (아랍-인도 숫자)

숫자 체계 환경설정은 표시되는 숫자를 제어합니다.

컴포넌트 조합 검증하기

언어, 스크립트 및 지역의 모든 조합이 의미 있는 것은 아닙니다. 생성자는 구문적으로 유효한 모든 컴포넌트를 허용하지만, 일부 조합은 실제 로케일을 나타내지 않을 수 있습니다.

생성자는 구문은 검증하지만 의미적 정확성은 검증하지 않습니다:

// 구문적으로는 유효하지만 의미적으로는 의문스러운 조합
const locale = new Intl.Locale("en", {
  script: "Arab",
  region: "JP"
});

console.log(locale.toString());
// 출력: "en-Arab-JP"

이는 일본에서 아랍 스크립트로 작성된 영어에 대한 로케일을 구성합니다. 이 식별자는 BCP 47에 따라 유효하지만, 실제 세계의 로케일을 나타내지는 않습니다.

maximize() 메서드를 사용하여 로케일이 일반적인 패턴과 일치하는지 확인할 수 있습니다:

const locale = new Intl.Locale("en", { region: "JP" });
const maximized = locale.maximize();

console.log(maximized.toString());
// 출력: "en-Latn-JP"

이 메서드는 해당 언어에 가장 가능성이 높은 스크립트를 추가합니다. 결과가 예상 패턴과 일치하면 해당 조합은 합리적인 것입니다.

구성된 로케일에서 컴포넌트 읽기

로케일을 구성한 후에는 해당 컴포넌트를 속성으로 읽을 수 있습니다.

language 속성은 언어 코드를 반환합니다:

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.language);
// 출력: "fr"

region 속성은 지역 코드를 반환합니다:

const locale = new Intl.Locale("fr", { region: "CA" });
console.log(locale.region);
// 출력: "CA"

script 속성은 지정된 경우 스크립트 코드를 반환합니다:

const locale = new Intl.Locale("zh", {
  script: "Hans",
  region: "CN"
});

console.log(locale.script);
// 출력: "Hans"

스크립트가 지정되지 않은 경우, 이 속성은 undefined를 반환합니다:

const locale = new Intl.Locale("en", { region: "US" });
console.log(locale.script);
// 출력: undefined

baseName 속성은 확장자 없이 전체 식별자를 반환합니다:

const locale = new Intl.Locale("ar", {
  region: "SA",
  calendar: "islamic",
  numberingSystem: "arab"
});

console.log(locale.baseName);
// 출력: "ar-SA"

이는 서식 지정 기본 설정 없이 언어-스크립트-지역 부분을 제공합니다.

로케일 식별자를 문자열로 변환하기

toString() 메서드는 전체 로케일 식별자를 문자열로 반환합니다:

const locale = new Intl.Locale("es", { region: "MX" });
const identifier = locale.toString();

console.log(identifier);
// 출력: "es-MX"

이 문자열을 다른 Intl API와 함께 사용할 수 있습니다:

const locale = new Intl.Locale("de", { region: "DE" });
const formatter = new Intl.NumberFormat(locale.toString());

const price = 1234.56;
console.log(formatter.format(price));
// 출력: "1.234,56"

포맷터는 문자열 표현을 받아들입니다.

대부분의 Intl API는 로케일 객체를 직접 받아들이기도 합니다:

const locale = new Intl.Locale("de", { region: "DE" });
const formatter = new Intl.NumberFormat(locale);

API는 필요할 때 내부적으로 toString()을 호출합니다.

실용적인 사용 사례

컴포넌트에서 로케일 식별자를 구성하는 것은 국제화된 애플리케이션에서 여러 일반적인 문제를 해결합니다.

로케일 선택기 만들기

사용자 인터페이스는 종종 사용자가 언어와 지역을 별도로 선택할 수 있게 합니다. 선택 항목을 결합할 수 있습니다:

function createLocaleFromPicker(languageSelect, regionSelect) {
  const language = languageSelect.value;
  const region = regionSelect.value;

  const locale = new Intl.Locale(language, { region });
  return locale.toString();
}

// 사용자가 "스페인어"와 "멕시코"를 선택
const selectedLocale = createLocaleFromPicker(
  { value: "es" },
  { value: "MX" }
);

console.log(selectedLocale);
// 출력: "es-MX"

로케일 변형 생성하기

단일 언어 코드에서 여러 지역 변형을 생성할 수 있습니다:

function generateRegionalVariants(languageCode, regionCodes) {
  return regionCodes.map(regionCode => {
    const locale = new Intl.Locale(languageCode, {
      region: regionCode
    });
    return locale.toString();
  });
}

const englishVariants = generateRegionalVariants("en", [
  "US",
  "GB",
  "CA",
  "AU",
  "NZ"
]);

console.log(englishVariants);
// 출력: ["en-US", "en-GB", "en-CA", "en-AU", "en-NZ"]

이는 다양한 영어 사용 지역에 대한 로케일 식별자 목록을 생성합니다.

URL 매개변수에서 로케일 구성하기

URL은 종종 로케일 환경설정을 별도의 매개변수로 인코딩합니다. 이러한 매개변수에서 로케일을 구성할 수 있습니다:

function getLocaleFromURL(url) {
  const params = new URL(url).searchParams;
  const language = params.get("lang");
  const region = params.get("region");

  if (!language) {
    return null;
  }

  const options = {};
  if (region) {
    options.region = region;
  }

  try {
    const locale = new Intl.Locale(language, options);
    return locale.toString();
  } catch (error) {
    return null;
  }
}

const locale1 = getLocaleFromURL("https://example.com?lang=fr&region=CA");
console.log(locale1);
// 출력: "fr-CA"

const locale2 = getLocaleFromURL("https://example.com?lang=ja");
console.log(locale2);
// 출력: "ja"

로케일 식별자 정규화하기

로케일 식별자를 파싱하고 재구성하여 정규화할 수 있습니다:

function normalizeLocale(identifier) {
  try {
    const locale = new Intl.Locale(identifier);
    return locale.toString();
  } catch (error) {
    return null;
  }
}

console.log(normalizeLocale("EN-us"));
// 출력: "en-US"

console.log(normalizeLocale("zh_Hans_CN"));
// 출력: null (유효하지 않은 구분자)

생성자는 대소문자를 정규화하고 구조를 검증합니다.

사용자 환경설정으로 포맷터 구성하기

사용자 설정을 기반으로 포맷팅 환경설정이 포함된 로케일 식별자를 구성할 수 있습니다:

function buildFormatterLocale(language, region, preferences) {
  const locale = new Intl.Locale(language, {
    region,
    hourCycle: preferences.use24Hour ? "h23" : "h12",
    numberingSystem: preferences.numberingSystem
  });

  return locale;
}

const userPreferences = {
  use24Hour: true,
  numberingSystem: "latn"
};

const locale = buildFormatterLocale("fr", "FR", userPreferences);

const timeFormatter = new Intl.DateTimeFormat(locale, {
  hour: "numeric",
  minute: "numeric"
});

const now = new Date("2025-10-15T14:30:00");
console.log(timeFormatter.format(now));
// 출력: "14:30" (24시간 형식)

로케일에는 사용자 설정의 포맷팅 환경설정이 포함됩니다.

구성 요소에서 로케일을 구성해야 하는 경우

구성 요소에서 로케일을 구성하는 것은 특정 시나리오에서 유용합니다. 별도의 언어 및 지역 데이터가 있거나, 사용자 입력을 처리하거나, 프로그래밍 방식으로 로케일 변형을 생성할 때 이 접근 방식을 사용하세요.

고정된 로케일에는 리터럴 문자열을 사용하세요:

// 고정 로케일에 적합함
const locale = new Intl.Locale("en-US");

값이 변수에서 오는 경우 구성 요소에서 구성하세요:

// 동적 로케일에 적합함
const locale = new Intl.Locale(userLanguage, {
  region: userRegion
});

생성자는 구성 요소를 검증하고 올바르게 포맷된 식별자를 생성합니다.

브라우저 지원

Intl.Locale 생성자는 모든 현대 브라우저에서 작동합니다. Chrome, Firefox, Safari 및 Edge는 컴포넌트에서 로케일을 구성하기 위한 생성자와 옵션 객체를 지원합니다.

Node.js는 버전 12부터 Intl.Locale을 지원하며, 버전 14 이상에서는 모든 생성자 옵션에 대한 완전한 지원을 제공합니다.

요약

Intl.Locale 생성자는 개별 컴포넌트에서 로케일 식별자를 구성합니다. 언어 코드를 첫 번째 인수로 전달하고 스크립트, 지역 및 형식 지정 기본 설정을 옵션 객체로 제공합니다.

주요 개념:

  • 로케일 식별자는 언어, 스크립트 및 지역 컴포넌트로 구성됩니다
  • 생성자는 language, script 및 region 속성이 있는 옵션 객체를 허용합니다
  • 기존 로케일을 첫 번째 인수로 전달하여 컴포넌트를 재정의할 수 있습니다
  • calendar 및 hourCycle과 같은 형식 지정 기본 설정은 유니코드 확장으로 표시됩니다
  • toString() 메서드는 완전한 식별자 문자열을 반환합니다
  • language, region 및 script와 같은 속성을 통해 컴포넌트를 읽을 수 있습니다
  • 생성자는 구문은 검증하지만 의미적 정확성은 검증하지 않습니다

사용자 입력에서 로케일을 구성하거나, 지역 변형을 생성하거나, 별도의 언어 및 지역 선택을 결합할 때 이 접근 방식을 사용하세요. 고정된 로케일의 경우 대신 문자열 리터럴을 사용하세요.