오랫만에 돌아온… 드디어 Frontend… 그간 노력했던 두개의 ios와 google play 출시가 모두 끝났다.
주말까지 갈아 넣으며 개고생을 하고 출시한 만큼 잘되길 기원하며 다시 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>해당 라이브러리에 대한 자세한
설명을 보면서 작업하니 생각보다 쉽게 바로 전환할 수 있었고 좋았다. 나중에 지금 하던 OilfieldNEX 프로젝트와 Sales의 작업을 추가할 때 적용할 생각에 엄청 설레였다.
Share article
