@intlayer/docs 5.7.8 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/intlayer_with_next-i18next.md +5 -6
- package/blog/ar/intlayer_with_next-intl.md +3 -4
- package/blog/ar/intlayer_with_react-i18next.md +1 -1
- package/blog/ar/intlayer_with_react-intl.md +1 -1
- package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +96 -219
- package/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md +88 -129
- package/blog/ar/vue-i18n_vs_intlayer.md +268 -0
- package/blog/de/intlayer_with_next-i18next.md +5 -6
- package/blog/de/intlayer_with_react-intl.md +1 -1
- package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/de/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/de/vue-i18n_vs_intlayer.md +268 -0
- package/blog/en/intlayer_with_next-i18next.md +5 -6
- package/blog/en/intlayer_with_next-intl.md +3 -4
- package/blog/en/intlayer_with_react-i18next.md +1 -1
- package/blog/en/intlayer_with_react-intl.md +1 -1
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +89 -220
- package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +85 -123
- package/blog/en/vue-i18n_vs_intlayer.md +268 -0
- package/blog/en-GB/intlayer_with_next-i18next.md +5 -6
- package/blog/en-GB/intlayer_with_next-intl.md +3 -4
- package/blog/en-GB/intlayer_with_react-i18next.md +1 -1
- package/blog/en-GB/intlayer_with_react-intl.md +1 -1
- package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +85 -218
- package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md +80 -130
- package/blog/en-GB/vue-i18n_vs_intlayer.md +258 -0
- package/blog/es/intlayer_with_next-i18next.md +5 -6
- package/blog/es/intlayer_with_next-intl.md +3 -4
- package/blog/es/intlayer_with_react-i18next.md +1 -1
- package/blog/es/intlayer_with_react-intl.md +1 -1
- package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/es/vue-i18n_vs_intlayer.md +268 -0
- package/blog/fr/intlayer_with_next-i18next.md +5 -6
- package/blog/fr/intlayer_with_next-intl.md +3 -4
- package/blog/fr/intlayer_with_react-i18next.md +1 -1
- package/blog/fr/intlayer_with_react-intl.md +1 -1
- package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
- package/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
- package/blog/fr/vue-i18n_vs_intlayer.md +269 -0
- package/blog/hi/intlayer_with_next-i18next.md +5 -6
- package/blog/hi/intlayer_with_next-intl.md +3 -4
- package/blog/hi/intlayer_with_react-i18next.md +1 -1
- package/blog/hi/intlayer_with_react-intl.md +1 -1
- package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +97 -220
- package/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
- package/blog/hi/vue-i18n_vs_intlayer.md +268 -0
- package/blog/it/intlayer_with_next-i18next.md +5 -6
- package/blog/it/intlayer_with_next-intl.md +3 -4
- package/blog/it/intlayer_with_react-i18next.md +1 -1
- package/blog/it/intlayer_with_react-intl.md +1 -1
- package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
- package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
- package/blog/it/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ja/intlayer_with_next-i18next.md +5 -6
- package/blog/ja/intlayer_with_next-intl.md +3 -4
- package/blog/ja/intlayer_with_react-intl.md +1 -1
- package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/ja/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ko/intlayer_with_next-i18next.md +5 -6
- package/blog/ko/intlayer_with_next-intl.md +3 -4
- package/blog/ko/intlayer_with_react-intl.md +1 -1
- package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +95 -217
- package/blog/ko/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
- package/blog/ko/vue-i18n_vs_intlayer.md +268 -0
- package/blog/pt/intlayer_with_next-i18next.md +5 -6
- package/blog/pt/intlayer_with_next-intl.md +3 -4
- package/blog/pt/intlayer_with_react-intl.md +1 -1
- package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/pt/vue-i18n_vs_intlayer.md +268 -0
- package/blog/ru/intlayer_with_next-i18next.md +5 -6
- package/blog/ru/intlayer_with_next-intl.md +3 -4
- package/blog/ru/intlayer_with_react-i18next.md +1 -1
- package/blog/ru/intlayer_with_react-intl.md +1 -1
- package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +94 -217
- package/blog/ru/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/ru/vue-i18n_vs_intlayer.md +268 -0
- package/blog/zh/intlayer_with_next-i18next.md +5 -6
- package/blog/zh/intlayer_with_next-intl.md +3 -4
- package/blog/zh/intlayer_with_react-i18next.md +1 -1
- package/blog/zh/intlayer_with_react-intl.md +1 -1
- package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
- package/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
- package/blog/zh/vue-i18n_vs_intlayer.md +269 -0
- package/dist/cjs/generated/blog.entry.cjs +41 -0
- package/dist/cjs/generated/blog.entry.cjs.map +1 -1
- package/dist/cjs/generated/docs.entry.cjs +41 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/blog.entry.mjs +41 -0
- package/dist/esm/generated/blog.entry.mjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +41 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/blog.entry.d.ts +1 -0
- package/dist/types/generated/blog.entry.d.ts.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/formatters.md +625 -0
- package/docs/ar/how_works_intlayer.md +2 -4
- package/docs/ar/interest_of_intlayer.md +159 -49
- package/docs/ar/intlayer_CMS.md +2 -3
- package/docs/ar/intlayer_visual_editor.md +2 -3
- package/docs/ar/intlayer_with_tanstack.md +1 -1
- package/docs/ar/introduction.md +7 -7
- package/docs/ar/packages/intlayer/index.md +3 -3
- package/docs/ar/packages/next-intlayer/index.md +3 -3
- package/docs/de/formatters.md +649 -0
- package/docs/de/interest_of_intlayer.md +161 -47
- package/docs/de/introduction.md +5 -5
- package/docs/de/packages/intlayer/index.md +3 -3
- package/docs/de/packages/next-intlayer/index.md +3 -3
- package/docs/de/packages/react-intlayer/index.md +3 -3
- package/docs/en/dictionary/enumeration.md +2 -2
- package/docs/en/dictionary/function_fetching.md +2 -2
- package/docs/en/dictionary/get_started.md +2 -2
- package/docs/en/dictionary/translation.md +2 -2
- package/docs/en/formatters.md +618 -0
- package/docs/en/how_works_intlayer.md +2 -4
- package/docs/en/interest_of_intlayer.md +170 -46
- package/docs/en/intlayer_CMS.md +2 -3
- package/docs/en/intlayer_visual_editor.md +2 -3
- package/docs/en/intlayer_with_create_react_app.md +2 -2
- package/docs/en/intlayer_with_express.md +2 -2
- package/docs/en/intlayer_with_tanstack.md +1 -1
- package/docs/en/introduction.md +7 -7
- package/docs/en/packages/express-intlayer/index.md +2 -2
- package/docs/en/packages/intlayer/getConfiguration.md +2 -3
- package/docs/en/packages/intlayer/getEnumeration.md +2 -7
- package/docs/en/packages/intlayer/getHTMLTextDir.md +2 -4
- package/docs/en/packages/intlayer/getLocaleLang.md +2 -4
- package/docs/en/packages/intlayer/getLocaleName.md +2 -3
- package/docs/en/packages/intlayer/getLocalizedUrl.md +2 -8
- package/docs/en/packages/intlayer/getMultilingualUrls.md +2 -7
- package/docs/en/packages/intlayer/getPathWithoutLocale.md +2 -3
- package/docs/en/packages/intlayer/getTranslation.md +2 -4
- package/docs/en/packages/intlayer/index.md +5 -5
- package/docs/en/packages/next-intlayer/index.md +5 -5
- package/docs/en/packages/next-intlayer/t.md +2 -2
- package/docs/en/packages/next-intlayer/useDictionary.md +2 -2
- package/docs/en/packages/next-intlayer/useIntlayer.md +2 -2
- package/docs/en/packages/next-intlayer/useLocale.md +2 -2
- package/docs/en/packages/react-intlayer/index.md +5 -5
- package/docs/en/packages/react-intlayer/t.md +2 -2
- package/docs/en/packages/react-intlayer/useI18n.md +2 -2
- package/docs/en/packages/react-intlayer/useIntlayer.md +2 -2
- package/docs/en/packages/react-intlayer/useLocale.md +2 -2
- package/docs/en/packages/react-scripts-intlayer/index.md +2 -2
- package/docs/en/packages/solid-intlayer/index.md +2 -2
- package/docs/en/packages/vite-intlayer/index.md +2 -2
- package/docs/en-GB/formatters.md +625 -0
- package/docs/en-GB/how_works_intlayer.md +2 -4
- package/docs/en-GB/interest_of_intlayer.md +157 -53
- package/docs/en-GB/intlayer_with_tanstack.md +1 -1
- package/docs/en-GB/introduction.md +2 -2
- package/docs/en-GB/packages/intlayer/index.md +3 -3
- package/docs/en-GB/packages/next-intlayer/index.md +3 -3
- package/docs/en-GB/packages/react-intlayer/index.md +3 -3
- package/docs/es/formatters.md +649 -0
- package/docs/es/how_works_intlayer.md +2 -4
- package/docs/es/interest_of_intlayer.md +156 -47
- package/docs/es/intlayer_with_tanstack.md +1 -1
- package/docs/es/introduction.md +5 -5
- package/docs/es/packages/intlayer/index.md +3 -3
- package/docs/es/packages/next-intlayer/index.md +3 -3
- package/docs/fr/formatters.md +649 -0
- package/docs/fr/how_works_intlayer.md +2 -4
- package/docs/fr/interest_of_intlayer.md +157 -46
- package/docs/fr/intlayer_with_tanstack.md +1 -1
- package/docs/fr/introduction.md +5 -5
- package/docs/fr/packages/intlayer/index.md +3 -3
- package/docs/fr/packages/next-intlayer/index.md +3 -3
- package/docs/fr/packages/react-intlayer/index.md +3 -3
- package/docs/hi/formatters.md +630 -0
- package/docs/hi/how_works_intlayer.md +2 -4
- package/docs/hi/interest_of_intlayer.md +155 -42
- package/docs/hi/intlayer_with_tanstack.md +1 -1
- package/docs/hi/introduction.md +5 -5
- package/docs/hi/packages/intlayer/index.md +3 -3
- package/docs/hi/packages/next-intlayer/index.md +3 -3
- package/docs/hi/packages/react-intlayer/index.md +3 -3
- package/docs/it/formatters.md +647 -0
- package/docs/it/how_works_intlayer.md +2 -4
- package/docs/it/interest_of_intlayer.md +157 -46
- package/docs/it/intlayer_with_tanstack.md +1 -1
- package/docs/it/introduction.md +5 -5
- package/docs/it/packages/intlayer/index.md +3 -3
- package/docs/it/packages/next-intlayer/index.md +3 -3
- package/docs/it/packages/react-intlayer/index.md +3 -3
- package/docs/ja/formatters.md +649 -0
- package/docs/ja/how_works_intlayer.md +2 -4
- package/docs/ja/interest_of_intlayer.md +154 -48
- package/docs/ja/intlayer_with_tanstack.md +1 -1
- package/docs/ja/introduction.md +5 -5
- package/docs/ja/packages/intlayer/index.md +3 -3
- package/docs/ja/packages/next-intlayer/index.md +3 -3
- package/docs/ja/packages/react-intlayer/index.md +3 -3
- package/docs/ko/formatters.md +649 -0
- package/docs/ko/how_works_intlayer.md +2 -4
- package/docs/ko/interest_of_intlayer.md +157 -48
- package/docs/ko/intlayer_with_tanstack.md +1 -1
- package/docs/ko/introduction.md +5 -5
- package/docs/ko/packages/intlayer/index.md +3 -3
- package/docs/ko/packages/next-intlayer/index.md +3 -3
- package/docs/ko/packages/react-intlayer/index.md +3 -3
- package/docs/pt/formatters.md +625 -0
- package/docs/pt/how_works_intlayer.md +2 -4
- package/docs/pt/interest_of_intlayer.md +162 -47
- package/docs/pt/intlayer_with_tanstack.md +1 -1
- package/docs/pt/introduction.md +5 -5
- package/docs/pt/packages/intlayer/index.md +3 -3
- package/docs/pt/packages/next-intlayer/index.md +3 -3
- package/docs/pt/packages/react-intlayer/index.md +3 -3
- package/docs/ru/autoFill.md +2 -2
- package/docs/ru/configuration.md +1 -40
- package/docs/ru/formatters.md +649 -0
- package/docs/ru/how_works_intlayer.md +5 -7
- package/docs/ru/index.md +1 -1
- package/docs/ru/interest_of_intlayer.md +165 -50
- package/docs/ru/intlayer_CMS.md +7 -8
- package/docs/ru/intlayer_cli.md +4 -7
- package/docs/ru/intlayer_visual_editor.md +5 -6
- package/docs/ru/intlayer_with_angular.md +1 -1
- package/docs/ru/intlayer_with_create_react_app.md +5 -5
- package/docs/ru/intlayer_with_lynx+react.md +1 -1
- package/docs/ru/intlayer_with_nextjs_15.md +3 -3
- package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ru/intlayer_with_nuxt.md +1 -1
- package/docs/ru/intlayer_with_react_native+expo.md +2 -2
- package/docs/ru/intlayer_with_tanstack.md +3 -3
- package/docs/ru/intlayer_with_vite+preact.md +3 -3
- package/docs/ru/intlayer_with_vite+react.md +3 -3
- package/docs/ru/intlayer_with_vite+solid.md +1 -1
- package/docs/ru/intlayer_with_vite+svelte.md +1 -1
- package/docs/ru/intlayer_with_vite+vue.md +2 -2
- package/docs/ru/introduction.md +8 -8
- package/docs/ru/locale_mapper.md +1 -1
- package/docs/ru/packages/@intlayer/api/index.md +2 -2
- package/docs/ru/packages/@intlayer/chokidar/index.md +1 -1
- package/docs/ru/packages/@intlayer/cli/index.md +2 -2
- package/docs/ru/packages/@intlayer/config/index.md +2 -2
- package/docs/ru/packages/@intlayer/core/index.md +2 -2
- package/docs/ru/packages/@intlayer/design-system/index.md +2 -2
- package/docs/ru/packages/@intlayer/dictionary-entry/index.md +2 -2
- package/docs/ru/packages/@intlayer/editor/index.md +1 -1
- package/docs/ru/packages/@intlayer/editor-react/index.md +1 -1
- package/docs/ru/packages/@intlayer/webpack/index.md +1 -1
- package/docs/ru/packages/angular-intlayer/index.md +1 -1
- package/docs/ru/packages/express-intlayer/index.md +3 -3
- package/docs/ru/packages/express-intlayer/t.md +1 -1
- package/docs/ru/packages/intlayer/getEnumeration.md +3 -8
- package/docs/ru/packages/intlayer/getTranslation.md +3 -5
- package/docs/ru/packages/intlayer/getTranslationContent.md +1 -3
- package/docs/ru/packages/intlayer/index.md +6 -6
- package/docs/ru/packages/intlayer-cli/index.md +1 -1
- package/docs/ru/packages/intlayer-editor/index.md +2 -2
- package/docs/ru/packages/lynx-intlayer/index.md +1 -1
- package/docs/ru/packages/next-intlayer/index.md +7 -7
- package/docs/ru/packages/next-intlayer/t.md +4 -4
- package/docs/ru/packages/next-intlayer/useLocale.md +3 -3
- package/docs/ru/packages/nuxt-intlayer/index.md +1 -1
- package/docs/ru/packages/preact-intlayer/index.md +1 -1
- package/docs/ru/packages/react-intlayer/index.md +7 -7
- package/docs/ru/packages/react-intlayer/t.md +4 -4
- package/docs/ru/packages/react-native-intlayer/index.md +1 -1
- package/docs/ru/packages/react-scripts-intlayer/index.md +3 -3
- package/docs/ru/packages/solid-intlayer/index.md +3 -3
- package/docs/ru/packages/svelte-intlayer/index.md +1 -1
- package/docs/ru/packages/vite-intlayer/index.md +3 -3
- package/docs/ru/packages/vue-intlayer/index.md +1 -1
- package/docs/ru/per_locale_file.md +1 -1
- package/docs/ru/roadmap.md +3 -5
- package/docs/ru/vs_code_extension.md +1 -1
- package/docs/zh/formatters.md +647 -0
- package/docs/zh/how_works_intlayer.md +2 -4
- package/docs/zh/interest_of_intlayer.md +155 -48
- package/docs/zh/intlayer_with_tanstack.md +1 -1
- package/docs/zh/introduction.md +5 -5
- package/docs/zh/packages/intlayer/index.md +3 -3
- package/docs/zh/packages/next-intlayer/index.md +3 -3
- package/docs/zh/packages/react-intlayer/index.md +3 -3
- package/frequent_questions/ar/domain_routing.md +1 -1
- package/frequent_questions/en/domain_routing.md +1 -1
- package/frequent_questions/en-GB/domain_routing.md +1 -1
- package/frequent_questions/es/domain_routing.md +1 -1
- package/frequent_questions/fr/domain_routing.md +1 -1
- package/frequent_questions/hi/domain_routing.md +1 -1
- package/frequent_questions/it/domain_routing.md +1 -1
- package/frequent_questions/ko/domain_routing.md +1 -1
- package/frequent_questions/pt/domain_routing.md +1 -1
- package/frequent_questions/ru/domain_routing.md +1 -1
- package/frequent_questions/ru/get_locale_cookie.md +4 -4
- package/frequent_questions/ru/static_rendering.md +1 -2
- package/frequent_questions/zh/domain_routing.md +1 -1
- package/package.json +11 -11
- package/src/generated/blog.entry.ts +41 -0
- package/src/generated/docs.entry.ts +41 -0
|
@@ -0,0 +1,649 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-08-13
|
|
3
|
+
updatedAt: 2025-08-20
|
|
4
|
+
title: 포매터
|
|
5
|
+
description: 숫자, 백분율, 통화, 날짜, 상대 시간, 단위 및 축약 표기법에 대해 Intl 기반의 로케일 인식 포매팅 유틸리티. 캐시된 Intl 헬퍼 포함.
|
|
6
|
+
keywords:
|
|
7
|
+
- 포매터
|
|
8
|
+
- Intl
|
|
9
|
+
- 숫자
|
|
10
|
+
- 통화
|
|
11
|
+
- 백분율
|
|
12
|
+
- 날짜
|
|
13
|
+
- 상대 시간
|
|
14
|
+
- 단위
|
|
15
|
+
- 축약
|
|
16
|
+
- 리스트
|
|
17
|
+
- 국제화
|
|
18
|
+
slugs:
|
|
19
|
+
- doc
|
|
20
|
+
- formatters
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
# Intlayer 포매터
|
|
24
|
+
|
|
25
|
+
## 개요
|
|
26
|
+
|
|
27
|
+
Intlayer는 네이티브 `Intl` API 위에 구축된 경량 헬퍼 세트와 무거운 포매터를 반복 생성하지 않도록 하는 캐시된 `Intl` 래퍼를 제공합니다. 이 유틸리티들은 완전한 로케일 인식을 지원하며 메인 `intlayer` 패키지에서 사용할 수 있습니다.
|
|
28
|
+
|
|
29
|
+
### 임포트
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import {
|
|
33
|
+
Intl,
|
|
34
|
+
number,
|
|
35
|
+
percentage,
|
|
36
|
+
currency,
|
|
37
|
+
date,
|
|
38
|
+
relativeTime,
|
|
39
|
+
units,
|
|
40
|
+
compact,
|
|
41
|
+
list,
|
|
42
|
+
getLocaleName,
|
|
43
|
+
getLocaleLang,
|
|
44
|
+
getLocaleFromPath,
|
|
45
|
+
getPathWithoutLocale,
|
|
46
|
+
getLocalizedUrl,
|
|
47
|
+
getHTMLTextDir,
|
|
48
|
+
getContent,
|
|
49
|
+
getLocalisedContent,
|
|
50
|
+
getTranslation,
|
|
51
|
+
getIntlayer,
|
|
52
|
+
getIntlayerAsync,
|
|
53
|
+
} from "intlayer";
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
React를 사용하는 경우, 훅도 제공됩니다; `react-intlayer/format`을 참조하세요.
|
|
57
|
+
|
|
58
|
+
## 캐시된 Intl
|
|
59
|
+
|
|
60
|
+
내보내진 `Intl`은 전역 `Intl`을 감싼 얇은 캐시 래퍼입니다. 이는 `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, `PluralRules` 인스턴스를 메모이제이션하여 동일한 포매터를 반복 생성하는 것을 방지합니다.
|
|
61
|
+
|
|
62
|
+
포매터 생성은 상대적으로 비용이 많이 들기 때문에, 이 캐싱은 동작을 변경하지 않으면서 성능을 향상시킵니다. 이 래퍼는 네이티브 `Intl`과 동일한 API를 제공하므로 사용법도 동일합니다.
|
|
63
|
+
|
|
64
|
+
- 캐싱은 프로세스별로 이루어지며 호출자에게 투명합니다.
|
|
65
|
+
|
|
66
|
+
> 환경에 `Intl.DisplayNames`가 없으면, 개발자 전용 경고가 한 번 출력됩니다(폴리필 사용을 고려하세요).
|
|
67
|
+
|
|
68
|
+
예시:
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
import { Intl } from "intlayer";
|
|
72
|
+
|
|
73
|
+
// 숫자 포맷팅
|
|
74
|
+
const numberFormat = new Intl.NumberFormat("en-GB", {
|
|
75
|
+
style: "currency",
|
|
76
|
+
currency: "GBP",
|
|
77
|
+
});
|
|
78
|
+
numberFormat.format(1234.5); // "£1,234.50"
|
|
79
|
+
|
|
80
|
+
// 언어, 지역 등의 표시 이름
|
|
81
|
+
const displayNames = new Intl.DisplayNames("fr", { type: "language" });
|
|
82
|
+
displayNames.of("en"); // "anglais"
|
|
83
|
+
|
|
84
|
+
// 정렬을 위한 콜레이션
|
|
85
|
+
const collator = new Intl.Collator("fr", { sensitivity: "base" });
|
|
86
|
+
collator.compare("é", "e"); // 0 (동일)
|
|
87
|
+
|
|
88
|
+
// 복수형 규칙
|
|
89
|
+
const pluralRules = new Intl.PluralRules("fr");
|
|
90
|
+
pluralRules.select(1); // "one"
|
|
91
|
+
pluralRules.select(2); // "other"
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## 추가 Intl 유틸리티
|
|
95
|
+
|
|
96
|
+
포매터 헬퍼 외에도, 캐시된 Intl 래퍼를 직접 사용하여 다른 Intl 기능을 활용할 수 있습니다:
|
|
97
|
+
|
|
98
|
+
### `Intl.DisplayNames`
|
|
99
|
+
|
|
100
|
+
언어, 지역, 통화, 스크립트의 현지화된 이름을 위한 기능:
|
|
101
|
+
|
|
102
|
+
```ts
|
|
103
|
+
import { Intl } from "intlayer";
|
|
104
|
+
|
|
105
|
+
const languageNames = new Intl.DisplayNames("en", { type: "language" });
|
|
106
|
+
languageNames.of("fr"); // "French"
|
|
107
|
+
|
|
108
|
+
const regionNames = new Intl.DisplayNames("fr", { type: "region" });
|
|
109
|
+
regionNames.of("US"); // "États-Unis"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### `Intl.Collator`
|
|
113
|
+
|
|
114
|
+
로케일 인식 문자열 비교 및 정렬을 위해:
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { Intl } from "intlayer";
|
|
118
|
+
|
|
119
|
+
const collator = new Intl.Collator("de", {
|
|
120
|
+
sensitivity: "base",
|
|
121
|
+
numeric: true,
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
const words = ["äpfel", "zebra", "100", "20"];
|
|
125
|
+
words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### `Intl.PluralRules`
|
|
129
|
+
|
|
130
|
+
다양한 로케일에서 복수형을 결정하기 위해:
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
import { Intl } from "intlayer";
|
|
134
|
+
|
|
135
|
+
const pluralRules = new Intl.PluralRules("ar");
|
|
136
|
+
pluralRules.select(0); // "zero"
|
|
137
|
+
pluralRules.select(1); // "one"
|
|
138
|
+
pluralRules.select(2); // "two"
|
|
139
|
+
pluralRules.select(3); // "few"
|
|
140
|
+
pluralRules.select(11); // "many"
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## 로케일 유틸리티
|
|
144
|
+
|
|
145
|
+
### `getLocaleName(displayLocale, targetLocale?)`
|
|
146
|
+
|
|
147
|
+
다른 로케일에서 로케일의 현지화된 이름을 가져옵니다:
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { getLocaleName } from "intlayer";
|
|
151
|
+
|
|
152
|
+
getLocaleName("fr", "en"); // "French"
|
|
153
|
+
getLocaleName("en", "fr"); // "anglais"
|
|
154
|
+
getLocaleName("de", "es"); // "alemán"
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
- **displayLocale**: 이름을 가져올 로케일
|
|
158
|
+
- **targetLocale**: 이름을 표시할 로케일 (기본값은 displayLocale)
|
|
159
|
+
|
|
160
|
+
### `getLocaleLang(locale?)`
|
|
161
|
+
|
|
162
|
+
로케일 문자열에서 언어 코드를 추출합니다:
|
|
163
|
+
|
|
164
|
+
```ts
|
|
165
|
+
import { getLocaleLang } from "intlayer";
|
|
166
|
+
|
|
167
|
+
getLocaleLang("en-US"); // "en"
|
|
168
|
+
getLocaleLang("fr-CA"); // "fr"
|
|
169
|
+
getLocaleLang("de"); // "de"
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
- **locale**: 언어를 추출할 로케일 (기본값은 현재 로케일)
|
|
173
|
+
|
|
174
|
+
### `getLocaleFromPath(inputUrl)`
|
|
175
|
+
|
|
176
|
+
URL 또는 경로명에서 로케일 부분을 추출합니다:
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
import { getLocaleFromPath } from "intlayer";
|
|
180
|
+
|
|
181
|
+
getLocaleFromPath("/en/dashboard"); // "en"
|
|
182
|
+
getLocaleFromPath("/fr/dashboard"); // "fr"
|
|
183
|
+
getLocaleFromPath("/dashboard"); // "en" (기본 로케일)
|
|
184
|
+
getLocaleFromPath("https://example.com/es/about"); // "es"
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
- **inputUrl**: 처리할 전체 URL 문자열 또는 경로명
|
|
188
|
+
- **returns**: 감지된 로케일 또는 로케일이 없을 경우 기본 로케일
|
|
189
|
+
|
|
190
|
+
### `getPathWithoutLocale(inputUrl, locales?)`
|
|
191
|
+
|
|
192
|
+
URL 또는 경로명에서 로케일 세그먼트를 제거합니다:
|
|
193
|
+
|
|
194
|
+
```ts
|
|
195
|
+
import { getPathWithoutLocale } from "intlayer";
|
|
196
|
+
|
|
197
|
+
getPathWithoutLocale("/en/dashboard"); // "/dashboard"
|
|
198
|
+
getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
|
|
199
|
+
getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
- **inputUrl**: 처리할 전체 URL 문자열 또는 경로명
|
|
203
|
+
- **locales**: 선택적 지원 로케일 배열 (기본값은 구성된 로케일)
|
|
204
|
+
- **returns**: 로케일 세그먼트가 제거된 URL
|
|
205
|
+
|
|
206
|
+
### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
|
|
207
|
+
|
|
208
|
+
현재 로케일에 맞는 로컬라이즈된 URL을 생성합니다:
|
|
209
|
+
|
|
210
|
+
```ts
|
|
211
|
+
import { getLocalizedUrl } from "intlayer";
|
|
212
|
+
|
|
213
|
+
getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
|
|
214
|
+
getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
|
|
215
|
+
getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
- **url**: 로컬라이즈할 원본 URL
|
|
219
|
+
- **currentLocale**: 현재 로케일
|
|
220
|
+
- **locales**: 선택적 지원 로케일 배열 (기본값은 구성된 로케일)
|
|
221
|
+
- **defaultLocale**: 선택적 기본 로케일 (구성된 기본 로케일을 기본값으로 사용)
|
|
222
|
+
- **prefixDefault**: 기본 로케일에 접두사를 붙일지 여부 (구성된 값을 기본값으로 사용)
|
|
223
|
+
|
|
224
|
+
### `getHTMLTextDir(locale?)`
|
|
225
|
+
|
|
226
|
+
로케일에 대한 텍스트 방향을 반환합니다:
|
|
227
|
+
|
|
228
|
+
```ts
|
|
229
|
+
import { getHTMLTextDir } from "intlayer";
|
|
230
|
+
|
|
231
|
+
getHTMLTextDir("en-US"); // "ltr"
|
|
232
|
+
getHTMLTextDir("ar"); // "rtl"
|
|
233
|
+
getHTMLTextDir("he"); // "rtl"
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
- **locale**: 텍스트 방향을 가져올 로케일 (기본값은 현재 로케일)
|
|
237
|
+
- **returns**: `"ltr"`, `"rtl"`, 또는 `"auto"`
|
|
238
|
+
|
|
239
|
+
## 콘텐츠 처리 유틸리티
|
|
240
|
+
|
|
241
|
+
### `getContent(node, nodeProps, locale?)`
|
|
242
|
+
|
|
243
|
+
모든 사용 가능한 플러그인(번역, 열거, 삽입 등)을 사용하여 콘텐츠 노드를 변환합니다:
|
|
244
|
+
|
|
245
|
+
```ts
|
|
246
|
+
import { getContent } from "intlayer";
|
|
247
|
+
|
|
248
|
+
const content = getContent(
|
|
249
|
+
contentNode,
|
|
250
|
+
{ dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
|
|
251
|
+
"fr"
|
|
252
|
+
);
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
- **node**: 변환할 콘텐츠 노드
|
|
256
|
+
- **nodeProps**: 변환 컨텍스트를 위한 속성
|
|
257
|
+
- **locale**: 선택적 로케일 (기본값은 구성된 기본 로케일)
|
|
258
|
+
|
|
259
|
+
### `getLocalisedContent(node, locale, nodeProps, fallback?)`
|
|
260
|
+
|
|
261
|
+
번역 플러그인만 사용하여 콘텐츠 노드를 변환합니다:
|
|
262
|
+
|
|
263
|
+
```ts
|
|
264
|
+
import { getLocalisedContent } from "intlayer";
|
|
265
|
+
|
|
266
|
+
const content = getLocalisedContent(
|
|
267
|
+
contentNode,
|
|
268
|
+
"fr",
|
|
269
|
+
{ dictionaryKey: "common" },
|
|
270
|
+
true // 번역이 없을 경우 기본 로케일로 대체
|
|
271
|
+
);
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
- **node**: 변환할 콘텐츠 노드
|
|
275
|
+
- **locale**: 번역에 사용할 로케일
|
|
276
|
+
- **nodeProps**: 변환 컨텍스트를 위한 속성
|
|
277
|
+
- **fallback**: 기본 로케일로 대체할지 여부 (기본값은 false)
|
|
278
|
+
|
|
279
|
+
### `getTranslation(languageContent, locale?, fallback?)`
|
|
280
|
+
|
|
281
|
+
언어 콘텐츠 객체에서 특정 로케일의 콘텐츠를 추출합니다:
|
|
282
|
+
|
|
283
|
+
```ts
|
|
284
|
+
import { getTranslation } from "intlayer";
|
|
285
|
+
|
|
286
|
+
const content = getTranslation(
|
|
287
|
+
{
|
|
288
|
+
en: "Hello",
|
|
289
|
+
fr: "Bonjour",
|
|
290
|
+
de: "Hallo",
|
|
291
|
+
},
|
|
292
|
+
"fr",
|
|
293
|
+
true
|
|
294
|
+
); // "Bonjour"
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
- **languageContent**: 로케일을 콘텐츠에 매핑한 객체
|
|
298
|
+
- **locale**: 대상 로케일 (기본값은 설정된 기본 로케일)
|
|
299
|
+
- **fallback**: 기본 로케일로 대체할지 여부 (기본값은 true)
|
|
300
|
+
|
|
301
|
+
### `getIntlayer(dictionaryKey, locale?, plugins?)`
|
|
302
|
+
|
|
303
|
+
키로 사전에서 콘텐츠를 가져오고 변환합니다:
|
|
304
|
+
|
|
305
|
+
```ts
|
|
306
|
+
import { getIntlayer } from "intlayer";
|
|
307
|
+
|
|
308
|
+
const content = getIntlayer("common", "fr");
|
|
309
|
+
const nestedContent = getIntlayer("common", "fr", customPlugins);
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
- **dictionaryKey**: 가져올 사전의 키
|
|
313
|
+
- **locale**: 선택적 로케일 (기본 설정된 기본 로케일 사용)
|
|
314
|
+
- **plugins**: 선택적 사용자 정의 변환 플러그인 배열
|
|
315
|
+
|
|
316
|
+
### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
|
|
317
|
+
|
|
318
|
+
원격 사전에서 비동기적으로 콘텐츠를 가져옵니다:
|
|
319
|
+
|
|
320
|
+
```ts
|
|
321
|
+
import { getIntlayerAsync } from "intlayer";
|
|
322
|
+
|
|
323
|
+
const content = await getIntlayerAsync("common", "fr");
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
- **dictionaryKey**: 가져올 사전의 키
|
|
327
|
+
- **locale**: 선택적 로케일 (기본 설정된 기본 로케일 사용)
|
|
328
|
+
- **plugins**: 선택적 사용자 정의 변환 플러그인 배열
|
|
329
|
+
|
|
330
|
+
## 포매터(Formatters)
|
|
331
|
+
|
|
332
|
+
아래의 모든 헬퍼는 `intlayer`에서 내보내집니다.
|
|
333
|
+
|
|
334
|
+
### `number(value, options?)`
|
|
335
|
+
|
|
336
|
+
로케일 인식 그룹화 및 소수점 표기를 사용하여 숫자 값을 포맷합니다.
|
|
337
|
+
|
|
338
|
+
- **value**: `number | string`
|
|
339
|
+
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
340
|
+
|
|
341
|
+
예시:
|
|
342
|
+
|
|
343
|
+
```ts
|
|
344
|
+
import { number } from "intlayer";
|
|
345
|
+
|
|
346
|
+
number(123456.789); // "123,456.789" (en-US 기준)
|
|
347
|
+
number("1000000", { locale: "fr" }); // "1 000 000"
|
|
348
|
+
number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
### `percentage(value, options?)`
|
|
352
|
+
|
|
353
|
+
숫자를 백분율 문자열로 포맷합니다.
|
|
354
|
+
|
|
355
|
+
동작: 1보다 큰 값은 전체 백분율로 해석되어 정규화됩니다 (예: `25` → `25%`, `0.25` → `25%`).
|
|
356
|
+
|
|
357
|
+
- **value**: `number | string`
|
|
358
|
+
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
359
|
+
|
|
360
|
+
예시:
|
|
361
|
+
|
|
362
|
+
```ts
|
|
363
|
+
import { percentage } from "intlayer";
|
|
364
|
+
|
|
365
|
+
percentage(0.25); // "25%"
|
|
366
|
+
percentage(25); // "25%"
|
|
367
|
+
percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
### `currency(value, options?)`
|
|
371
|
+
|
|
372
|
+
값을 현지화된 통화 형식으로 포맷합니다. 기본값은 소수점 두 자리의 `USD`입니다.
|
|
373
|
+
|
|
374
|
+
- **value**: `number | string`
|
|
375
|
+
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
376
|
+
- 일반 필드: `currency` (예: `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
|
|
377
|
+
|
|
378
|
+
예시:
|
|
379
|
+
|
|
380
|
+
```ts
|
|
381
|
+
import { currency } from "intlayer";
|
|
382
|
+
|
|
383
|
+
currency(1234.5, { currency: "EUR" }); // "€1,234.50"
|
|
384
|
+
currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
### `date(date, optionsOrPreset?)`
|
|
388
|
+
|
|
389
|
+
`Intl.DateTimeFormat`을 사용하여 날짜/시간 값을 포맷합니다.
|
|
390
|
+
|
|
391
|
+
- **date**: `Date | string | number`
|
|
392
|
+
- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` 또는 다음 프리셋 중 하나:
|
|
393
|
+
- 프리셋: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
|
|
394
|
+
|
|
395
|
+
예시:
|
|
396
|
+
|
|
397
|
+
```ts
|
|
398
|
+
import { date } from "intlayer";
|
|
399
|
+
|
|
400
|
+
date(new Date(), "short"); // 예: "08/02/25, 14:30"
|
|
401
|
+
date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); // "2 août"
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
### `relativeTime(from, to = new Date(), options?)`
|
|
405
|
+
|
|
406
|
+
`Intl.RelativeTimeFormat`을 사용하여 두 시점 간의 상대 시간을 포맷합니다.
|
|
407
|
+
|
|
408
|
+
- 첫 번째 인수로 "now"를 전달하고 두 번째 인수로 대상 시점을 전달하면 자연스러운 표현을 얻을 수 있습니다.
|
|
409
|
+
- **from**: `Date | string | number`
|
|
410
|
+
- **to**: `Date | string | number` (기본값은 `new Date()`)
|
|
411
|
+
- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
|
|
412
|
+
- 기본 `unit`은 `"second"`입니다.
|
|
413
|
+
|
|
414
|
+
예시:
|
|
415
|
+
|
|
416
|
+
```ts
|
|
417
|
+
import { relativeTime } from "intlayer";
|
|
418
|
+
|
|
419
|
+
const now = new Date();
|
|
420
|
+
const in3Days = new Date(now.getTime() + 3 * 864e5);
|
|
421
|
+
relativeTime(now, in3Days, { unit: "day" }); // "3일 후"
|
|
422
|
+
|
|
423
|
+
const twoHoursAgo = new Date(now.getTime() - 2 * 3600e3);
|
|
424
|
+
relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2시간 전"
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
### `units(value, options?)`
|
|
428
|
+
|
|
429
|
+
`Intl.NumberFormat`의 `style: 'unit'`을 사용하여 숫자 값을 현지화된 단위 문자열로 포맷합니다.
|
|
430
|
+
|
|
431
|
+
- **value**: `number | string`
|
|
432
|
+
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
|
|
433
|
+
- 공통 필드: `unit` (예: `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
|
|
434
|
+
- 기본값: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
|
|
435
|
+
|
|
436
|
+
예제:
|
|
437
|
+
|
|
438
|
+
```ts
|
|
439
|
+
import { units } from "intlayer";
|
|
440
|
+
|
|
441
|
+
units(5, { unit: "kilometer", unitDisplay: "long", locale: "en-GB" }); // "5 kilometers"
|
|
442
|
+
units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (로케일에 따라 다름)
|
|
443
|
+
```
|
|
444
|
+
|
|
445
|
+
### `compact(value, options?)`
|
|
446
|
+
|
|
447
|
+
숫자를 축약 표기법(예: `1.2K`, `1M`)으로 포맷합니다.
|
|
448
|
+
|
|
449
|
+
- **value**: `number | string`
|
|
450
|
+
- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (`notation: 'compact'`를 내부적으로 사용)
|
|
451
|
+
|
|
452
|
+
예제:
|
|
453
|
+
|
|
454
|
+
```ts
|
|
455
|
+
import { compact } from "intlayer";
|
|
456
|
+
|
|
457
|
+
compact(1200); // "1.2K"
|
|
458
|
+
compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
|
|
459
|
+
```
|
|
460
|
+
|
|
461
|
+
### `list(values, options?)`
|
|
462
|
+
|
|
463
|
+
`Intl.ListFormat`을 사용하여 값 배열을 현지화된 목록 문자열로 포맷합니다.
|
|
464
|
+
|
|
465
|
+
- **values**: `(string | number)[]`
|
|
466
|
+
- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
|
|
467
|
+
- 공통 필드: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
|
|
468
|
+
- 기본값: `type: 'conjunction'`, `style: 'long'`
|
|
469
|
+
|
|
470
|
+
예시:
|
|
471
|
+
|
|
472
|
+
```ts
|
|
473
|
+
import { list } from "intlayer";
|
|
474
|
+
|
|
475
|
+
list(["apple", "banana", "orange"]); // "apple, banana, and orange"
|
|
476
|
+
list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
|
|
477
|
+
list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
|
|
478
|
+
```
|
|
479
|
+
|
|
480
|
+
## 참고 사항
|
|
481
|
+
|
|
482
|
+
- 모든 헬퍼는 `string` 입력을 허용하며, 내부적으로 숫자나 날짜로 강제 변환됩니다.
|
|
483
|
+
- 로케일이 제공되지 않으면 구성된 `internationalization.defaultLocale`이 기본값으로 사용됩니다.
|
|
484
|
+
- 이 유틸리티들은 얇은 래퍼이며, 고급 포맷팅이 필요할 경우 표준 `Intl` 옵션을 직접 전달하세요.
|
|
485
|
+
|
|
486
|
+
## 진입점 및 재내보내기 (`@index.ts`)
|
|
487
|
+
|
|
488
|
+
포매터들은 코어 패키지에 존재하며, 런타임 전반에 걸쳐 임포트를 편리하게 하기 위해 상위 패키지에서 재내보내기됩니다:
|
|
489
|
+
|
|
490
|
+
예시:
|
|
491
|
+
|
|
492
|
+
```ts
|
|
493
|
+
// 앱 코드 (권장)
|
|
494
|
+
import {
|
|
495
|
+
number,
|
|
496
|
+
currency,
|
|
497
|
+
date,
|
|
498
|
+
relativeTime,
|
|
499
|
+
units,
|
|
500
|
+
compact,
|
|
501
|
+
list,
|
|
502
|
+
Intl,
|
|
503
|
+
getLocaleName,
|
|
504
|
+
getLocaleLang,
|
|
505
|
+
getLocaleFromPath,
|
|
506
|
+
getPathWithoutLocale,
|
|
507
|
+
getLocalizedUrl,
|
|
508
|
+
getHTMLTextDir,
|
|
509
|
+
getContent,
|
|
510
|
+
getLocalisedContent,
|
|
511
|
+
getTranslation,
|
|
512
|
+
getIntlayer,
|
|
513
|
+
getIntlayerAsync,
|
|
514
|
+
} from "intlayer";
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
### React
|
|
518
|
+
|
|
519
|
+
클라이언트 컴포넌트:
|
|
520
|
+
|
|
521
|
+
```tsx
|
|
522
|
+
import {
|
|
523
|
+
useNumber,
|
|
524
|
+
useCurrency,
|
|
525
|
+
useDate,
|
|
526
|
+
usePercentage,
|
|
527
|
+
useCompact,
|
|
528
|
+
useList,
|
|
529
|
+
useRelativeTime,
|
|
530
|
+
useUnit,
|
|
531
|
+
} from "react-intlayer/format";
|
|
532
|
+
// 또는 Next.js 앱에서
|
|
533
|
+
import {
|
|
534
|
+
useNumber,
|
|
535
|
+
useCurrency,
|
|
536
|
+
useDate,
|
|
537
|
+
usePercentage,
|
|
538
|
+
useCompact,
|
|
539
|
+
useList,
|
|
540
|
+
useRelativeTime,
|
|
541
|
+
useUnit,
|
|
542
|
+
} from "next-intlayer/client/format";
|
|
543
|
+
|
|
544
|
+
const MyComponent = () => {
|
|
545
|
+
const number = useNumber();
|
|
546
|
+
const currency = useCurrency();
|
|
547
|
+
const date = useDate();
|
|
548
|
+
const percentage = usePercentage();
|
|
549
|
+
const compact = useCompact();
|
|
550
|
+
const list = useList();
|
|
551
|
+
const relativeTime = useRelativeTime();
|
|
552
|
+
const unit = useUnit();
|
|
553
|
+
|
|
554
|
+
return (
|
|
555
|
+
<div>
|
|
556
|
+
<p>{number(123456.789)}</p>
|
|
557
|
+
<p>{currency(1234.5, { currency: "EUR" })}</p>
|
|
558
|
+
<p>{date(new Date(), "short")}</p>
|
|
559
|
+
<p>{percentage(0.25)}</p>
|
|
560
|
+
<p>{compact(1200)}</p>
|
|
561
|
+
<p>{list(["apple", "banana", "orange"])}</p>
|
|
562
|
+
<p>{relativeTime(new Date(), new Date() + 1000)}</p>
|
|
563
|
+
<p>{unit(123456.789, { unit: "kilometer" })}</p>
|
|
564
|
+
</div>
|
|
565
|
+
);
|
|
566
|
+
};
|
|
567
|
+
```
|
|
568
|
+
|
|
569
|
+
서버 컴포넌트(또는 React 서버 런타임):
|
|
570
|
+
|
|
571
|
+
```ts
|
|
572
|
+
import {
|
|
573
|
+
useNumber,
|
|
574
|
+
useCurrency,
|
|
575
|
+
useDate,
|
|
576
|
+
usePercentage,
|
|
577
|
+
useCompact,
|
|
578
|
+
useList,
|
|
579
|
+
useRelativeTime,
|
|
580
|
+
useUnit,
|
|
581
|
+
} from "intlayer/server/format";
|
|
582
|
+
// 또는 Next.js 앱에서는
|
|
583
|
+
import {
|
|
584
|
+
useNumber,
|
|
585
|
+
useCurrency,
|
|
586
|
+
useDate,
|
|
587
|
+
usePercentage,
|
|
588
|
+
useCompact,
|
|
589
|
+
useList,
|
|
590
|
+
useRelativeTime,
|
|
591
|
+
useUnit,
|
|
592
|
+
} from "next-intlayer/server/format";
|
|
593
|
+
```
|
|
594
|
+
|
|
595
|
+
> 이 훅들은 `IntlayerProvider` 또는 `IntlayerServerProvider`에서 설정된 로케일을 고려합니다.
|
|
596
|
+
|
|
597
|
+
### Vue
|
|
598
|
+
|
|
599
|
+
클라이언트 컴포넌트:
|
|
600
|
+
|
|
601
|
+
```ts
|
|
602
|
+
import {
|
|
603
|
+
useNumber,
|
|
604
|
+
useCurrency,
|
|
605
|
+
useDate,
|
|
606
|
+
usePercentage,
|
|
607
|
+
useCompact,
|
|
608
|
+
useList,
|
|
609
|
+
useRelativeTime,
|
|
610
|
+
useUnit,
|
|
611
|
+
} from "vue-intlayer/format";
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
> 이 컴포저블들은 주입된 `IntlayerProvider`에서 로케일을 고려합니다.
|
|
615
|
+
|
|
616
|
+
## 문서 변경 이력
|
|
617
|
+
|
|
618
|
+
| 버전 | 날짜 | 변경 사항 |
|
|
619
|
+
| ----- | ---------- | ---------------- |
|
|
620
|
+
| 5.8.0 | 2025-08-20 | vue 포매터 추가 |
|
|
621
|
+
| 5.8.0 | 2025-08-18 | 포매터 문서 추가 |
|
|
622
|
+
|
|
623
|
+
클라이언트 컴포넌트:
|
|
624
|
+
|
|
625
|
+
```ts
|
|
626
|
+
import {
|
|
627
|
+
useNumber,
|
|
628
|
+
useCurrency,
|
|
629
|
+
useDate,
|
|
630
|
+
usePercentage,
|
|
631
|
+
useCompact,
|
|
632
|
+
useList,
|
|
633
|
+
useRelativeTime,
|
|
634
|
+
useUnit,
|
|
635
|
+
} from "vue-intlayer/format";
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
> 이 컴포저블들은 주입된 `IntlayerProvider`에서 로케일을 고려합니다.
|
|
639
|
+
|
|
640
|
+
## 문서 이력
|
|
641
|
+
|
|
642
|
+
| 버전 | 날짜 | 변경 사항 |
|
|
643
|
+
| ----- | ---------- | ------------------------------------------------------------------------- |
|
|
644
|
+
| 5.8.0 | 2025-08-20 | Vue 포매터 추가 |
|
|
645
|
+
| 5.8.0 | 2025-08-18 | 포매터 문서 추가 |
|
|
646
|
+
| 5.8.0 | 2025-08-20 | 리스트 포매터 문서 추가 |
|
|
647
|
+
| 5.8.0 | 2025-08-20 | 추가 Intl 유틸리티 추가 (DisplayNames, Collator, PluralRules) |
|
|
648
|
+
| 5.8.0 | 2025-08-20 | 로케일 유틸리티 추가 (getLocaleName, getLocaleLang, getLocaleFromPath 등) |
|
|
649
|
+
| 5.8.0 | 2025-08-20 | 콘텐츠 처리 유틸리티 추가 (getContent, getTranslation, getIntlayer 등) |
|
|
@@ -25,8 +25,8 @@ Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하
|
|
|
25
25
|
.
|
|
26
26
|
└── Components
|
|
27
27
|
└── MyComponent
|
|
28
|
-
├── index.content.
|
|
29
|
-
└── index.
|
|
28
|
+
├── index.content.ts
|
|
29
|
+
└── index.tsx
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
이를 위해 Intlayer의 역할은 프로젝트에 존재하는 다양한 형식의 `콘텐츠 선언 파일`을 모두 찾아내고, 이를 기반으로 `사전(dictionary)`을 생성하는 것입니다.
|
|
@@ -45,12 +45,10 @@ Intlayer의 주요 아이디어는 컴포넌트별 콘텐츠 관리를 채택하
|
|
|
45
45
|
- [`vite-intlayer` 패키지](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/vite-intlayer/index.md)와 같은 앱 플러그인 또는 [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/packages/next-intlayer/index.md)용 동등한 플러그인을 사용하는 방법. 이러한 플러그인 중 하나를 사용하면 Intlayer는 애플리케이션을 시작(개발)하거나 빌드(프로덕션)할 때 자동으로 사전을 빌드합니다.
|
|
46
46
|
|
|
47
47
|
1. 콘텐츠 파일 선언
|
|
48
|
-
|
|
49
48
|
- 콘텐츠 파일은 TypeScript, ECMAScript, CommonJS 또는 JSON과 같은 다양한 형식으로 정의할 수 있습니다.
|
|
50
49
|
- 콘텐츠 파일은 프로젝트 어디에서나 정의할 수 있어 유지 관리와 확장성이 향상됩니다. 콘텐츠 파일의 파일 확장자 규칙을 준수하는 것이 중요합니다. 기본 확장자는 `*.content.{js|cjs|mjs|ts|tsx|json}`이지만, [설정 파일](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/configuration.md)에서 수정할 수 있습니다.
|
|
51
50
|
|
|
52
51
|
2. `사전(dictionary)` 생성
|
|
53
|
-
|
|
54
52
|
- 사전은 콘텐츠 파일에서 생성됩니다. 기본적으로 Intlayer 사전은 프로젝트의 `.intlayer/dictionaries` 디렉토리에 생성됩니다.
|
|
55
53
|
- 이러한 사전은 모든 요구를 충족하고 애플리케이션 성능을 최적화하기 위해 다양한 형식으로 생성됩니다.
|
|
56
54
|
|