i18n란?, vue-i18n 적용기

Feb 20, 2025

오랫만에 돌아온… 드디어 Frontend… 그간 노력했던 두개의 ios와 google play 출시가 모두 끝났다.

‎** Move to Any Oilfield ** Oilfield NEX allows you to search for oilfields by API# or name and integrates with navigation apps. No more paying high costs to travel to oilfields. ** Record What Happens in the Oilfield ** You can freely document issues and take photos of tasks performed at the oil…

https://apps.apple.com/kr/app/oilfieldnex/id6742073504

Oilfield NEX - Apps on Google Play

Oilfield NEX is an optimal tool for Oil & Gas operations

https://play.google.com/store/apps/details?id=com.ulalalab.oilfieldNEX&pcampaignid=web_share

주말까지 갈아 넣으며 개고생을 하고 출시한 만큼 잘되길 기원하며 다시 FE 업무를 맡아서 진행하다 발견한 처음 보는 단어 $t(’메롱’)

그래서 이게 뭐지 하고 보니 진짜 … 못봤던 놈이라 기록하려한다.

i18n

뭐지 욕인가? 아니다… ㅋㅋ 일단 internationalization(국제화) 라는 단어를 축약한 것이다.

i부터 n까지 18개의 문자수를 축약해서 i18n으로 나타낸다는 의미이며 국제화는 설계의 기본 단계 중 하나이다.

우리는 vue를 이용한 프로젝트가 많다.

그래서 내가 찾아본 라이브러리는 vue-i18n 였고 해당하는 라이브러리를 소개해보려한다.

vue-i18n

언어에 관련된 js 파일은 따로 관리해주기 위하여 파일을 따로 생성해준다.

한글의 경우 아래와 같이 설정하고


{
    "dashboard": "모니터링",
    "calibrationResult": "캘리브레이션 결과",
    "registSuccessMsg": "{0} 등록이 성공하였습니다.",
    "registFailMsg": "{0} 등록이 실패하였습니다.",
    "visionData": "비전 데이터",
    "failDownload": "{0}의 다운로드가 실패하였습니다."
}

영어의 경우 아래와 같이 설정한 파일을 각각 Language 파일 안에 담아주었다.


{
    "dashboard": "Monitoring",
    "calibrationResult": "Calibration Results",
    "registSuccessMsg": "Registration of {0} was successful.",
    "registFailMsg": "Registration of {0} was failed.",
    "visionData": "Vision data",
    "failDownload": "Failed to download {0}."
}

그후 main.ts 파일에 추가하여 어디서든 쓸 수 있도록 대처했다.


//i18n
import ko from '@/mappings/language/ko_lang.json';
import en from '@/mappings/language/en_lang.json';

const i18n = createI18n({
    locale: 'ko',
    fallbackLocale: 'en',
    legacy: false,
    globalInjection: true,
    allowComposition: true,
    messages: {
        ko,
        en,
    },
});

app.use(createPinia()).use(i18n);

그 다음 가져다 쓰는 곳에서 import 를해서 바로 사용해보았다. 제대로 표출되는 것을 확인할 수 있었고 편하게 언어팩을 적용한다는게 정말 신세계였다…!?


import { useI18n } from 'vue-i18n';

/** i18n */
const { t } = useI18n();


<VBtn
    class="btn-sub1-tb"
    @click="onClickViewDetails(item)"
>
    {{ $t('visionData') }}
</VBtn>

해당 라이브러리에 대한 자세한

Getting started | Vue I18n

Vue I18n is internationalization plugin for Vue.js

https://kazupon.github.io/vue-i18n/started.html#html

설명을 보면서 작업하니 생각보다 쉽게 바로 전환할 수 있었고 좋았다. 나중에 지금 하던 OilfieldNEX 프로젝트와 Sales의 작업을 추가할 때 적용할 생각에 엄청 설레였다.

{ "dashboard": "모니터링", "calibrationResult": "캘리브레이션 결과", "registSuccessMsg": "{0} 등록이 성공하였습니다.", "registFailMsg": "{0} 등록이 실패하였습니다.", "visionData": "비전 데이터", "failDownload": "{0}의 다운로드가 실패하였습니다." }

{ "dashboard": "Monitoring", "calibrationResult": "Calibration Results", "registSuccessMsg": "Registration of {0} was successful.", "registFailMsg": "Registration of {0} was failed.", "visionData": "Vision data", "failDownload": "Failed to download {0}." }

//i18n import ko from '@/mappings/language/ko_lang.json'; import en from '@/mappings/language/en_lang.json'; const i18n = createI18n({ locale: 'ko', fallbackLocale: 'en', legacy: false, globalInjection: true, allowComposition: true, messages: { ko, en, }, }); app.use(createPinia()).use(i18n);