์ž‘๊ฐ€:
    ์ƒ์„ฑ:2024-08-11๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ:2025-06-29

    ๋ฌธ์„œ: intlayer์˜ getLocaleName ํ•จ์ˆ˜

    ์„ค๋ช…

    getLocaleName ํ•จ์ˆ˜๋Š” ์ฃผ์–ด์ง„ ๋กœ์ผ€์ผ(targetLocale)์˜ ํ˜„์ง€ํ™”๋œ ์ด๋ฆ„์„ ํ‘œ์‹œ ๋กœ์ผ€์ผ(displayLocale)๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. targetLocale์ด ์ œ๊ณต๋˜์ง€ ์•Š์œผ๋ฉด, displayLocale์˜ ์ด๋ฆ„์„ ํ•ด๋‹น ๋กœ์ผ€์ผ์˜ ์–ธ์–ด๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ๋งค๊ฐœ๋ณ€์ˆ˜

    • displayLocale: Locales

      • ์„ค๋ช…: ๋Œ€์ƒ ๋กœ์ผ€์ผ์˜ ์ด๋ฆ„์ด ํ‘œ์‹œ๋  ๋กœ์ผ€์ผ์ž…๋‹ˆ๋‹ค.
      • ํƒ€์ž…: ์œ ํšจํ•œ ๋กœ์ผ€์ผ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์—ด๊ฑฐํ˜• ๋˜๋Š” ๋ฌธ์ž์—ด์ž…๋‹ˆ๋‹ค.
    • targetLocale?: Locales

      • ์„ค๋ช…: ์ด๋ฆ„์ด ํ˜„์ง€ํ™”๋  ๋กœ์ผ€์ผ์ž…๋‹ˆ๋‹ค.
      • ํƒ€์ž…: ์„ ํƒ ์‚ฌํ•ญ์ด๋ฉฐ, ์œ ํšจํ•œ ๋กœ์ผ€์ผ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์—ด๊ฑฐํ˜• ๋˜๋Š” ๋ฌธ์ž์—ด์ž…๋‹ˆ๋‹ค.

    ๋ฐ˜ํ™˜๊ฐ’

    • ํƒ€์ž…: string
    • ์„ค๋ช…: targetLocale๊ฐ€ ์ œ๊ณต๋˜๋ฉด displayLocale์—์„œ ํ˜„์ง€ํ™”๋œ targetLocale์˜ ์ด๋ฆ„์„ ๋ฐ˜ํ™˜ํ•˜๋ฉฐ, ์ œ๊ณต๋˜์ง€ ์•Š์œผ๋ฉด displayLocale ์ž์‹ ์˜ ์ด๋ฆ„์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋ฒˆ์—ญ์„ ์ฐพ์„ ์ˆ˜ ์—†์œผ๋ฉด "Unknown locale"์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ์‚ฌ์šฉ ์˜ˆ์‹œ

    typescript
    import { Locales, getLocaleName } from "intlayer";
    
    getLocaleName(Locales.ENGLISH); // ์ถœ๋ ฅ: "English"
    getLocaleName(Locales.ENGLISH, Locales.FRENCH); // ์ถœ๋ ฅ: "Anglais"
    getLocaleName(Locales.ENGLISH, Locales.ESPANOL); // ์ถœ๋ ฅ: "Inglรฉs"
    getLocaleName(Locales.ENGLISH, Locales.ENGLISH); // ์ถœ๋ ฅ: "English"
    
    getLocaleName(Locales.FRENCH); // ์ถœ๋ ฅ: "Franรงais"
    getLocaleName(Locales.FRENCH, Locales.FRENCH); // ์ถœ๋ ฅ: "Franรงais"
    getLocaleName(Locales.FRENCH, Locales.ESPANOL); // ์ถœ๋ ฅ: "Francรฉs"
    getLocaleName(Locales.FRENCH, Locales.ENGLISH); // ์ถœ๋ ฅ: "French"
    
    getLocaleName(Locales.CHINESE); // ์ถœ๋ ฅ: "ไธญๆ–‡"
    getLocaleName(Locales.CHINESE, Locales.FRENCH); // ์ถœ๋ ฅ: "Chinois"
    getLocaleName(Locales.CHINESE, Locales.ESPANOL); // ์ถœ๋ ฅ: "Chino"
    getLocaleName(Locales.CHINESE, Locales.ENGLISH); // ์ถœ๋ ฅ: "Chinese"
    
    getLocaleName("unknown-locale"); // ์ถœ๋ ฅ: "์•Œ ์ˆ˜ ์—†๋Š” ๋กœ์ผ€์ผ"
    

    ์˜ˆ์™ธ ์ƒํ™ฉ

    • targetLocale๊ฐ€ ์ œ๊ณต๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ:
    • ํ•จ์ˆ˜๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ displayLocale ์ž์‹ ์˜ ์ด๋ฆ„์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
    • ๋ฒˆ์—ญ ๋ˆ„๋ฝ:
      • localeNameTranslations์— targetLocale ๋˜๋Š” ํŠน์ • displayLocale์— ๋Œ€ํ•œ ํ•ญ๋ชฉ์ด ์—†์œผ๋ฉด, ํ•จ์ˆ˜๋Š” ownLocalesName์„ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ "Unknown locale"์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    React Native ๋ฐ ๊ตฌํ˜• ํ™˜๊ฒฝ์šฉ Polyfills

    getLocaleName ํ•จ์ˆ˜๋Š” Intl.DisplayNames API์— ์˜์กดํ•˜๋ฉฐ, ์ด API๋Š” React Native๋‚˜ ๊ตฌํ˜• JavaScript ํ™˜๊ฒฝ์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ™˜๊ฒฝ์—์„œ getLocaleName์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ polyfills๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ดˆ๊ธฐ์— polyfills๋ฅผ ๊ฐ€์ ธ์˜ค์„ธ์š”. ๊ฐ€๋Šฅํ•˜๋ฉด ์ง„์ž…์  ํŒŒ์ผ(์˜ˆ: index.js, App.tsx, ๋˜๋Š” main.tsx)์—์„œ ์ˆ˜ํ–‰ํ•˜์„ธ์š”:

    typescript
    import "intl";
    import "@formatjs/intl-locale/polyfill";
    import "@formatjs/intl-displaynames/polyfill";
    

    ์ž์„ธํ•œ ๋‚ด์šฉ์€ FormatJS polyfills ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.