์ง€๋Šฅํ˜• i18n

    ํƒ€์ž… ์•ˆ์ „. AI๋กœ ๋ฒˆ์—ญ. ์‹œ๊ฐ์ ์œผ๋กœ ํŽธ์ง‘.

    npx intlayer init

    ์ฝ”๋“œ๋ฒ ์ด์Šค ์–ด๋””์—์„œ๋“  ์›ํ•˜๋Š” ๊ณณ์— ๋ฒˆ์—ญ์„ ์ •์˜ํ•˜๊ณ  ๊ฐœ๋ฐœ ์†๋„๋ฅผ ๋†’์ด์„ธ์š”. ๋ฒˆ๋“ค์„ ์ ์ ˆํžˆ ๊ฐ€๋ณ๊ฒŒ ์œ ์ง€ํ•˜์„ธ์š”.

    ์‚ฌ์šฉ ๊ฐ€๋Šฅ

    // src/component/server/component.content.tsimport { t, type Dictionary } from "intlayer";const componentContent = {  key: "server-component",  content: {    title: t({      en: "Title of my component",      fr: "Titre de mon component",      es: "Tรญtulo de mi componente",    }),    content:      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",  },} satisfies Dictionary;export default componentContent;
    // src/components/Component.tsxexport const Component = () => {  return (    <div>      <h2>Intlayer Compiler</h2>      <p>        The Intlayer Compiler extracts automatically the content from the        components and generates the dictionary files.      </p>    </div>  );};
    ํ”Œ๋ ˆ์ด๊ทธ๋ผ์šด๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌด๋ฃŒ๋กœ ์‹œ๋„ํ•˜์„ธ์š”.ํ”Œ๋ ˆ์ด๊ทธ๋ผ์šด๋“œ๋กœ ์ด๋™
    intlayer test
    $ npx intlayer test
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ~/Desktop/MyApp

    ์ฝ˜ํ…์ธ  ์ •์˜๋ฅผ ๊ตฌ์„ฑ ์š”์†Œ ๊ฐ€๊นŒ์ด์— ์œ ์ง€ํ•˜์—ฌ ์ฝ”๋“œ ์œ ์ง€ ๊ด€๋ฆฌ๋ฅผ ๊ฐœ์„ ํ•˜์„ธ์š”. ์ค‘๋ณต์„ ์ค„์ด๊ณ  ๋ช…ํ™•์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๋ฉฐ ๊ตฌ์กฐํ™”๋œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜์—ฌ ์—…๋ฐ์ดํŠธ๋ฅผ ๋‹จ์ˆœํ™”ํ•˜์—ฌ ์ฝ”๋“œ ๊ด€๋ฆฌ ๋ฐ ํ™•์žฅ์„ ์šฉ์ดํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

    Intlayer Compiler๋กœ ์ฆ‰์‹œ ์ฝ˜ํ…์ธ ๋ฅผ ์ถ”์ถœํ•˜์„ธ์š”. ์ฝ˜ํ…์ธ ์˜ ๊ตญ์ œํ™”๋ฅผ ์œ„ํ•œ ํ•„์ˆ˜ ์‚ฌ์ „ ํŒŒ์ผ์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ˆœ์‹๊ฐ„์— ๋‹ค๊ตญ์–ด๋กœ ์ „ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

    ๋ฌด๋ฃŒ ๋น„์ฃผ์–ผ ํŽธ์ง‘๊ธฐ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์‚ฌ์ดํŠธ๋ฅผ ์†์‰ฝ๊ฒŒ ๊ตฌ์ถ•ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜์„ธ์š”. ์ฝ”๋“œ๋ฅผ ๋งŒ์ง€์ง€ ์•Š๊ณ ๋„ ๊ตฌ์„ฑ ์š”์†Œ์™€ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ณ , ํŽธ์ง‘ํ•˜๊ณ , ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์–ด ์ฝ˜ํ…์ธ  ๊ด€๋ฆฌ์ž์™€ ๊ฐœ๋ฐœ์ž๊ฐ€ ํšจ์œจ์ ์œผ๋กœ ํ˜‘์—…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋‚ด์žฅ๋œ ๋ฒˆ์—ญ ์ง€์›์„ ํ†ตํ•ด ๋„๋‹ฌ ๋ฒ”์œ„๋ฅผ ๋„“ํžˆ์„ธ์š”. ์ง๊ด€์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ˜ํ…์ธ ๋ฅผ ์†์‰ฝ๊ฒŒ ๋ฒˆ์—ญํ•˜๊ณ , ์—ฌ๋Ÿฌ ์ฝ˜ํ…์ธ  ๋ฒ„์ „์„ ์ˆ˜๋™์œผ๋กœ ๊ด€๋ฆฌํ•  ํ•„์š” ์—†์ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์›ํ™œํ•œ ๋‹ค๊ตญ์–ด ๊ฒฝํ—˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

    Intlayer CLI์™€ AI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ˜ํ…์ธ ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์ž๋™์œผ๋กœ ์ฑ„์›Œ ๋ชจ๋“  ๋ฒˆ์—ญ์ด ์™„์ „ํ•˜๊ณ  ์ •ํ™•ํ•œ์ง€ ํ™•์ธํ•˜์„ธ์š”.

    ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

    ๊ตญ์ œํ™”(i18n)๋Š” Next.js, React ๋˜๋Š” Express์™€ ๊ฐ™์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์„ค๊ณ„ํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜์—ฌ ์—ฌ๋Ÿฌ ์–ธ์–ด๋ฅผ ์‰ฝ๊ฒŒ ์ง€์›ํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋ฒˆ์—ญ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹จ์ˆœํ™”ํ•˜์—ฌ ๋‹ค๊ตญ์–ด ์›น์‚ฌ์ดํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. TypeScript์™€ ๊ฐ™์€ ๋„๊ตฌ๋Š” i18n์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋‹ค์–‘ํ•œ ์–ธ์–ด์™€ ์ง€์—ญ์— ํšจ์œจ์ ์ด๊ณ  ์‰ฝ๊ฒŒ ์ ์‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.i18n์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    Intlayer๋Š” ๋‹ค๊ตญ์–ด ์›น์‚ฌ์ดํŠธ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ํŒจํ‚ค์ง€์ž…๋‹ˆ๋‹ค. ๋‹ค๊ตญ์–ด ์ฝ˜ํ…์ธ ์™€ ํ˜„์ง€ํ™”๋ฅผ ์œ„ํ•œ ์›น์‚ฌ์ดํŠธ ์„ค์ •์„ ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ๋„๊ตฌ ๋ฐ ์œ ํ‹ธ๋ฆฌํ‹ฐ ์„ธํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.Intlayer์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    Intlayer๋Š” ๊ตฌ์„ฑ ๊ด€๋ฆฌ๋ฅผ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ์„œ๋ฒ„ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํฌํ•จํ•œ ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ JavaScript ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ๊ตญ์ œํ™”๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ์™€ ๋‚˜๋ž€ํžˆ ์ฝ˜ํ…์ธ  ์„ ์–ธ์„ ํ—ˆ์šฉํ•˜์—ฌ ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ์œ ์ง€๊ด€๋ฆฌ๋ฅผ ๊ฐœ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ Intlayer๋Š” TypeScript๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ˆ„๋ฝ๋œ ์„ ์–ธ์„ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ Intlayer๋Š” ๋น„๊ฐœ๋ฐœ์ž๊ฐ€ ์›น์‚ฌ์ดํŠธ ์ฝ˜ํ…์ธ ๋ฅผ ํŽธ์ง‘ํ•˜๊ณ  AI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ž๋™์œผ๋กœ ๋ฒˆ์—ญํ•˜๋ฉฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ SEO๋ฅผ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๋น„์ฃผ์–ผ ํŽธ์ง‘๊ธฐ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.Intlayer์˜ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    Intlayer๋Š” ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง ๋ฐ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜์—ฌ ๋‹ค๊ตญ์–ด ์ฝ˜ํ…์ธ  ์ œ๊ณต์„ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ํ†ตํ•ฉํ•ฉ๋‹ˆ๋‹ค.Next.js ํ†ตํ•ฉ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    ์˜ˆ, Intlayer๋Š” ์ฝ”๋“œ์— ๋‹ค์ด๋น™ํ•˜์ง€ ์•Š๊ณ  ์ฝ˜ํ…์ธ ๋ฅผ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ์„ ํƒ์  ๋น„์ฃผ์–ผ ํŽธ์ง‘๊ธฐ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.๋น„์ฃผ์–ผ ํŽธ์ง‘๊ธฐ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    Pull requests๋ฅผ ์ œ์ถœํ•˜๊ฑฐ๋‚˜ GitHub ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์—์„œ ๋ฌธ์ œ๋ฅผ ๋ณด๊ณ ํ•จ์œผ๋กœ์จ ๊ธฐ์—ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.๊ธฐ์—ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    Intlayer๋Š” ๋ฌด๋ฃŒ NPM ํŒจํ‚ค์ง€์™€ ์‹œ๊ฐ์  ํŽธ์ง‘๊ธฐ๋ฅผ ํ†ตํ•ฉํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ์ฝ˜ํ…์ธ  ์™ธ๋ถ€ํ™”๋ฅผ ์œ„ํ•œ CMS๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด CMS๋Š” ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ํ”„๋ฆฌ๋ฏธ์—„ ๋ฐ ์—”ํ„ฐํ”„๋ผ์ด์ฆˆ ํ”Œ๋žœ ๋ฉค๋ฒ„๋ฅผ ์œ„ํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์ด ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.Intlayer ๊ณ„ํš์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    Intlayer๋Š” React(React ์•ฑ ์ƒ์„ฑ ํฌํ•จ), Vite๋ฅผ ์‚ฌ์šฉํ•˜๋Š” React, Next.js, Tanstack Start, Vue, Nuxt, Express, NestJS, Preact ๋“ฑ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์ตœ์‹  JavaScript ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ ์„œ๋ฒ„ ์ธก ํ™˜๊ฒฝ๊ณผ์˜ ์›ํ™œํ•œ ํ†ตํ•ฉ์„ ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.์ง€์›๋˜๋Š” ํ”Œ๋žซํผ์— ๋Œ€ํ•ด ๋” ์ฝ์–ด๋ณด์„ธ์š”

    ์˜ˆ, Intlayer๋Š” i18next, next-intl, vue-i18next ๋“ฑ์„ ๋ž˜ํผ๋กœ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญ์„ ์ž๋™ํ™”ํ•˜๊ณ  ๊ธฐ์กด ์ฝ”๋“œ๋ฅผ ๋ฆฌํŒฉํ† ๋งํ•˜์ง€ ์•Š๊ณ  Intlayer๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋ชจ๋“  ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ ์ฝ๊ธฐ