@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.
Files changed (297) hide show
  1. package/blog/ar/intlayer_with_next-i18next.md +5 -6
  2. package/blog/ar/intlayer_with_next-intl.md +3 -4
  3. package/blog/ar/intlayer_with_react-i18next.md +1 -1
  4. package/blog/ar/intlayer_with_react-intl.md +1 -1
  5. package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +96 -219
  6. package/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md +88 -129
  7. package/blog/ar/vue-i18n_vs_intlayer.md +268 -0
  8. package/blog/de/intlayer_with_next-i18next.md +5 -6
  9. package/blog/de/intlayer_with_react-intl.md +1 -1
  10. package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  11. package/blog/de/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  12. package/blog/de/vue-i18n_vs_intlayer.md +268 -0
  13. package/blog/en/intlayer_with_next-i18next.md +5 -6
  14. package/blog/en/intlayer_with_next-intl.md +3 -4
  15. package/blog/en/intlayer_with_react-i18next.md +1 -1
  16. package/blog/en/intlayer_with_react-intl.md +1 -1
  17. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +89 -220
  18. package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +85 -123
  19. package/blog/en/vue-i18n_vs_intlayer.md +268 -0
  20. package/blog/en-GB/intlayer_with_next-i18next.md +5 -6
  21. package/blog/en-GB/intlayer_with_next-intl.md +3 -4
  22. package/blog/en-GB/intlayer_with_react-i18next.md +1 -1
  23. package/blog/en-GB/intlayer_with_react-intl.md +1 -1
  24. package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +85 -218
  25. package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md +80 -130
  26. package/blog/en-GB/vue-i18n_vs_intlayer.md +258 -0
  27. package/blog/es/intlayer_with_next-i18next.md +5 -6
  28. package/blog/es/intlayer_with_next-intl.md +3 -4
  29. package/blog/es/intlayer_with_react-i18next.md +1 -1
  30. package/blog/es/intlayer_with_react-intl.md +1 -1
  31. package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  32. package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  33. package/blog/es/vue-i18n_vs_intlayer.md +268 -0
  34. package/blog/fr/intlayer_with_next-i18next.md +5 -6
  35. package/blog/fr/intlayer_with_next-intl.md +3 -4
  36. package/blog/fr/intlayer_with_react-i18next.md +1 -1
  37. package/blog/fr/intlayer_with_react-intl.md +1 -1
  38. package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
  39. package/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
  40. package/blog/fr/vue-i18n_vs_intlayer.md +269 -0
  41. package/blog/hi/intlayer_with_next-i18next.md +5 -6
  42. package/blog/hi/intlayer_with_next-intl.md +3 -4
  43. package/blog/hi/intlayer_with_react-i18next.md +1 -1
  44. package/blog/hi/intlayer_with_react-intl.md +1 -1
  45. package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +97 -220
  46. package/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
  47. package/blog/hi/vue-i18n_vs_intlayer.md +268 -0
  48. package/blog/it/intlayer_with_next-i18next.md +5 -6
  49. package/blog/it/intlayer_with_next-intl.md +3 -4
  50. package/blog/it/intlayer_with_react-i18next.md +1 -1
  51. package/blog/it/intlayer_with_react-intl.md +1 -1
  52. package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
  53. package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
  54. package/blog/it/vue-i18n_vs_intlayer.md +268 -0
  55. package/blog/ja/intlayer_with_next-i18next.md +5 -6
  56. package/blog/ja/intlayer_with_next-intl.md +3 -4
  57. package/blog/ja/intlayer_with_react-intl.md +1 -1
  58. package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  59. package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  60. package/blog/ja/vue-i18n_vs_intlayer.md +268 -0
  61. package/blog/ko/intlayer_with_next-i18next.md +5 -6
  62. package/blog/ko/intlayer_with_next-intl.md +3 -4
  63. package/blog/ko/intlayer_with_react-intl.md +1 -1
  64. package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +95 -217
  65. package/blog/ko/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
  66. package/blog/ko/vue-i18n_vs_intlayer.md +268 -0
  67. package/blog/pt/intlayer_with_next-i18next.md +5 -6
  68. package/blog/pt/intlayer_with_next-intl.md +3 -4
  69. package/blog/pt/intlayer_with_react-intl.md +1 -1
  70. package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  71. package/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  72. package/blog/pt/vue-i18n_vs_intlayer.md +268 -0
  73. package/blog/ru/intlayer_with_next-i18next.md +5 -6
  74. package/blog/ru/intlayer_with_next-intl.md +3 -4
  75. package/blog/ru/intlayer_with_react-i18next.md +1 -1
  76. package/blog/ru/intlayer_with_react-intl.md +1 -1
  77. package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +94 -217
  78. package/blog/ru/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  79. package/blog/ru/vue-i18n_vs_intlayer.md +268 -0
  80. package/blog/zh/intlayer_with_next-i18next.md +5 -6
  81. package/blog/zh/intlayer_with_next-intl.md +3 -4
  82. package/blog/zh/intlayer_with_react-i18next.md +1 -1
  83. package/blog/zh/intlayer_with_react-intl.md +1 -1
  84. package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  85. package/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  86. package/blog/zh/vue-i18n_vs_intlayer.md +269 -0
  87. package/dist/cjs/generated/blog.entry.cjs +41 -0
  88. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  89. package/dist/cjs/generated/docs.entry.cjs +41 -0
  90. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  91. package/dist/esm/generated/blog.entry.mjs +41 -0
  92. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  93. package/dist/esm/generated/docs.entry.mjs +41 -0
  94. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  95. package/dist/types/generated/blog.entry.d.ts +1 -0
  96. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  97. package/dist/types/generated/docs.entry.d.ts +1 -0
  98. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  99. package/docs/ar/formatters.md +625 -0
  100. package/docs/ar/how_works_intlayer.md +2 -4
  101. package/docs/ar/interest_of_intlayer.md +159 -49
  102. package/docs/ar/intlayer_CMS.md +2 -3
  103. package/docs/ar/intlayer_visual_editor.md +2 -3
  104. package/docs/ar/intlayer_with_tanstack.md +1 -1
  105. package/docs/ar/introduction.md +7 -7
  106. package/docs/ar/packages/intlayer/index.md +3 -3
  107. package/docs/ar/packages/next-intlayer/index.md +3 -3
  108. package/docs/de/formatters.md +649 -0
  109. package/docs/de/interest_of_intlayer.md +161 -47
  110. package/docs/de/introduction.md +5 -5
  111. package/docs/de/packages/intlayer/index.md +3 -3
  112. package/docs/de/packages/next-intlayer/index.md +3 -3
  113. package/docs/de/packages/react-intlayer/index.md +3 -3
  114. package/docs/en/dictionary/enumeration.md +2 -2
  115. package/docs/en/dictionary/function_fetching.md +2 -2
  116. package/docs/en/dictionary/get_started.md +2 -2
  117. package/docs/en/dictionary/translation.md +2 -2
  118. package/docs/en/formatters.md +618 -0
  119. package/docs/en/how_works_intlayer.md +2 -4
  120. package/docs/en/interest_of_intlayer.md +170 -46
  121. package/docs/en/intlayer_CMS.md +2 -3
  122. package/docs/en/intlayer_visual_editor.md +2 -3
  123. package/docs/en/intlayer_with_create_react_app.md +2 -2
  124. package/docs/en/intlayer_with_express.md +2 -2
  125. package/docs/en/intlayer_with_tanstack.md +1 -1
  126. package/docs/en/introduction.md +7 -7
  127. package/docs/en/packages/express-intlayer/index.md +2 -2
  128. package/docs/en/packages/intlayer/getConfiguration.md +2 -3
  129. package/docs/en/packages/intlayer/getEnumeration.md +2 -7
  130. package/docs/en/packages/intlayer/getHTMLTextDir.md +2 -4
  131. package/docs/en/packages/intlayer/getLocaleLang.md +2 -4
  132. package/docs/en/packages/intlayer/getLocaleName.md +2 -3
  133. package/docs/en/packages/intlayer/getLocalizedUrl.md +2 -8
  134. package/docs/en/packages/intlayer/getMultilingualUrls.md +2 -7
  135. package/docs/en/packages/intlayer/getPathWithoutLocale.md +2 -3
  136. package/docs/en/packages/intlayer/getTranslation.md +2 -4
  137. package/docs/en/packages/intlayer/index.md +5 -5
  138. package/docs/en/packages/next-intlayer/index.md +5 -5
  139. package/docs/en/packages/next-intlayer/t.md +2 -2
  140. package/docs/en/packages/next-intlayer/useDictionary.md +2 -2
  141. package/docs/en/packages/next-intlayer/useIntlayer.md +2 -2
  142. package/docs/en/packages/next-intlayer/useLocale.md +2 -2
  143. package/docs/en/packages/react-intlayer/index.md +5 -5
  144. package/docs/en/packages/react-intlayer/t.md +2 -2
  145. package/docs/en/packages/react-intlayer/useI18n.md +2 -2
  146. package/docs/en/packages/react-intlayer/useIntlayer.md +2 -2
  147. package/docs/en/packages/react-intlayer/useLocale.md +2 -2
  148. package/docs/en/packages/react-scripts-intlayer/index.md +2 -2
  149. package/docs/en/packages/solid-intlayer/index.md +2 -2
  150. package/docs/en/packages/vite-intlayer/index.md +2 -2
  151. package/docs/en-GB/formatters.md +625 -0
  152. package/docs/en-GB/how_works_intlayer.md +2 -4
  153. package/docs/en-GB/interest_of_intlayer.md +157 -53
  154. package/docs/en-GB/intlayer_with_tanstack.md +1 -1
  155. package/docs/en-GB/introduction.md +2 -2
  156. package/docs/en-GB/packages/intlayer/index.md +3 -3
  157. package/docs/en-GB/packages/next-intlayer/index.md +3 -3
  158. package/docs/en-GB/packages/react-intlayer/index.md +3 -3
  159. package/docs/es/formatters.md +649 -0
  160. package/docs/es/how_works_intlayer.md +2 -4
  161. package/docs/es/interest_of_intlayer.md +156 -47
  162. package/docs/es/intlayer_with_tanstack.md +1 -1
  163. package/docs/es/introduction.md +5 -5
  164. package/docs/es/packages/intlayer/index.md +3 -3
  165. package/docs/es/packages/next-intlayer/index.md +3 -3
  166. package/docs/fr/formatters.md +649 -0
  167. package/docs/fr/how_works_intlayer.md +2 -4
  168. package/docs/fr/interest_of_intlayer.md +157 -46
  169. package/docs/fr/intlayer_with_tanstack.md +1 -1
  170. package/docs/fr/introduction.md +5 -5
  171. package/docs/fr/packages/intlayer/index.md +3 -3
  172. package/docs/fr/packages/next-intlayer/index.md +3 -3
  173. package/docs/fr/packages/react-intlayer/index.md +3 -3
  174. package/docs/hi/formatters.md +630 -0
  175. package/docs/hi/how_works_intlayer.md +2 -4
  176. package/docs/hi/interest_of_intlayer.md +155 -42
  177. package/docs/hi/intlayer_with_tanstack.md +1 -1
  178. package/docs/hi/introduction.md +5 -5
  179. package/docs/hi/packages/intlayer/index.md +3 -3
  180. package/docs/hi/packages/next-intlayer/index.md +3 -3
  181. package/docs/hi/packages/react-intlayer/index.md +3 -3
  182. package/docs/it/formatters.md +647 -0
  183. package/docs/it/how_works_intlayer.md +2 -4
  184. package/docs/it/interest_of_intlayer.md +157 -46
  185. package/docs/it/intlayer_with_tanstack.md +1 -1
  186. package/docs/it/introduction.md +5 -5
  187. package/docs/it/packages/intlayer/index.md +3 -3
  188. package/docs/it/packages/next-intlayer/index.md +3 -3
  189. package/docs/it/packages/react-intlayer/index.md +3 -3
  190. package/docs/ja/formatters.md +649 -0
  191. package/docs/ja/how_works_intlayer.md +2 -4
  192. package/docs/ja/interest_of_intlayer.md +154 -48
  193. package/docs/ja/intlayer_with_tanstack.md +1 -1
  194. package/docs/ja/introduction.md +5 -5
  195. package/docs/ja/packages/intlayer/index.md +3 -3
  196. package/docs/ja/packages/next-intlayer/index.md +3 -3
  197. package/docs/ja/packages/react-intlayer/index.md +3 -3
  198. package/docs/ko/formatters.md +649 -0
  199. package/docs/ko/how_works_intlayer.md +2 -4
  200. package/docs/ko/interest_of_intlayer.md +157 -48
  201. package/docs/ko/intlayer_with_tanstack.md +1 -1
  202. package/docs/ko/introduction.md +5 -5
  203. package/docs/ko/packages/intlayer/index.md +3 -3
  204. package/docs/ko/packages/next-intlayer/index.md +3 -3
  205. package/docs/ko/packages/react-intlayer/index.md +3 -3
  206. package/docs/pt/formatters.md +625 -0
  207. package/docs/pt/how_works_intlayer.md +2 -4
  208. package/docs/pt/interest_of_intlayer.md +162 -47
  209. package/docs/pt/intlayer_with_tanstack.md +1 -1
  210. package/docs/pt/introduction.md +5 -5
  211. package/docs/pt/packages/intlayer/index.md +3 -3
  212. package/docs/pt/packages/next-intlayer/index.md +3 -3
  213. package/docs/pt/packages/react-intlayer/index.md +3 -3
  214. package/docs/ru/autoFill.md +2 -2
  215. package/docs/ru/configuration.md +1 -40
  216. package/docs/ru/formatters.md +649 -0
  217. package/docs/ru/how_works_intlayer.md +5 -7
  218. package/docs/ru/index.md +1 -1
  219. package/docs/ru/interest_of_intlayer.md +165 -50
  220. package/docs/ru/intlayer_CMS.md +7 -8
  221. package/docs/ru/intlayer_cli.md +4 -7
  222. package/docs/ru/intlayer_visual_editor.md +5 -6
  223. package/docs/ru/intlayer_with_angular.md +1 -1
  224. package/docs/ru/intlayer_with_create_react_app.md +5 -5
  225. package/docs/ru/intlayer_with_lynx+react.md +1 -1
  226. package/docs/ru/intlayer_with_nextjs_15.md +3 -3
  227. package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
  228. package/docs/ru/intlayer_with_nuxt.md +1 -1
  229. package/docs/ru/intlayer_with_react_native+expo.md +2 -2
  230. package/docs/ru/intlayer_with_tanstack.md +3 -3
  231. package/docs/ru/intlayer_with_vite+preact.md +3 -3
  232. package/docs/ru/intlayer_with_vite+react.md +3 -3
  233. package/docs/ru/intlayer_with_vite+solid.md +1 -1
  234. package/docs/ru/intlayer_with_vite+svelte.md +1 -1
  235. package/docs/ru/intlayer_with_vite+vue.md +2 -2
  236. package/docs/ru/introduction.md +8 -8
  237. package/docs/ru/locale_mapper.md +1 -1
  238. package/docs/ru/packages/@intlayer/api/index.md +2 -2
  239. package/docs/ru/packages/@intlayer/chokidar/index.md +1 -1
  240. package/docs/ru/packages/@intlayer/cli/index.md +2 -2
  241. package/docs/ru/packages/@intlayer/config/index.md +2 -2
  242. package/docs/ru/packages/@intlayer/core/index.md +2 -2
  243. package/docs/ru/packages/@intlayer/design-system/index.md +2 -2
  244. package/docs/ru/packages/@intlayer/dictionary-entry/index.md +2 -2
  245. package/docs/ru/packages/@intlayer/editor/index.md +1 -1
  246. package/docs/ru/packages/@intlayer/editor-react/index.md +1 -1
  247. package/docs/ru/packages/@intlayer/webpack/index.md +1 -1
  248. package/docs/ru/packages/angular-intlayer/index.md +1 -1
  249. package/docs/ru/packages/express-intlayer/index.md +3 -3
  250. package/docs/ru/packages/express-intlayer/t.md +1 -1
  251. package/docs/ru/packages/intlayer/getEnumeration.md +3 -8
  252. package/docs/ru/packages/intlayer/getTranslation.md +3 -5
  253. package/docs/ru/packages/intlayer/getTranslationContent.md +1 -3
  254. package/docs/ru/packages/intlayer/index.md +6 -6
  255. package/docs/ru/packages/intlayer-cli/index.md +1 -1
  256. package/docs/ru/packages/intlayer-editor/index.md +2 -2
  257. package/docs/ru/packages/lynx-intlayer/index.md +1 -1
  258. package/docs/ru/packages/next-intlayer/index.md +7 -7
  259. package/docs/ru/packages/next-intlayer/t.md +4 -4
  260. package/docs/ru/packages/next-intlayer/useLocale.md +3 -3
  261. package/docs/ru/packages/nuxt-intlayer/index.md +1 -1
  262. package/docs/ru/packages/preact-intlayer/index.md +1 -1
  263. package/docs/ru/packages/react-intlayer/index.md +7 -7
  264. package/docs/ru/packages/react-intlayer/t.md +4 -4
  265. package/docs/ru/packages/react-native-intlayer/index.md +1 -1
  266. package/docs/ru/packages/react-scripts-intlayer/index.md +3 -3
  267. package/docs/ru/packages/solid-intlayer/index.md +3 -3
  268. package/docs/ru/packages/svelte-intlayer/index.md +1 -1
  269. package/docs/ru/packages/vite-intlayer/index.md +3 -3
  270. package/docs/ru/packages/vue-intlayer/index.md +1 -1
  271. package/docs/ru/per_locale_file.md +1 -1
  272. package/docs/ru/roadmap.md +3 -5
  273. package/docs/ru/vs_code_extension.md +1 -1
  274. package/docs/zh/formatters.md +647 -0
  275. package/docs/zh/how_works_intlayer.md +2 -4
  276. package/docs/zh/interest_of_intlayer.md +155 -48
  277. package/docs/zh/intlayer_with_tanstack.md +1 -1
  278. package/docs/zh/introduction.md +5 -5
  279. package/docs/zh/packages/intlayer/index.md +3 -3
  280. package/docs/zh/packages/next-intlayer/index.md +3 -3
  281. package/docs/zh/packages/react-intlayer/index.md +3 -3
  282. package/frequent_questions/ar/domain_routing.md +1 -1
  283. package/frequent_questions/en/domain_routing.md +1 -1
  284. package/frequent_questions/en-GB/domain_routing.md +1 -1
  285. package/frequent_questions/es/domain_routing.md +1 -1
  286. package/frequent_questions/fr/domain_routing.md +1 -1
  287. package/frequent_questions/hi/domain_routing.md +1 -1
  288. package/frequent_questions/it/domain_routing.md +1 -1
  289. package/frequent_questions/ko/domain_routing.md +1 -1
  290. package/frequent_questions/pt/domain_routing.md +1 -1
  291. package/frequent_questions/ru/domain_routing.md +1 -1
  292. package/frequent_questions/ru/get_locale_cookie.md +4 -4
  293. package/frequent_questions/ru/static_rendering.md +1 -2
  294. package/frequent_questions/zh/domain_routing.md +1 -1
  295. package/package.json +11 -11
  296. package/src/generated/blog.entry.ts +41 -0
  297. 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.cjs
29
- └── index.mjs
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