개발 공부/publishing

자바스크립트로 다국어 언어 적용하기 (with copilot)

손가는대로 2024. 7. 15. 09:30
반응형

@code-ruach

 

 

자바스크립트를 이용해서 영어, 한국어 등 언어를 설정하면 모든 화면에서 적용되도록

전역 상태로 관리하기 위해 copilot과 함께 코딩을 해보겠습니다.

 

.

.

프롬프트 :

list.html, setting.html,  language.js 파일을 만들어주고,
setting.html 파일에서 영어와 한국어 중 사용할 언어를 선택하면
list.html화면에도 적용시켜줘

list.html

<!DOCTYPE html>
<html>
<head>
    <title>리스트</title>
    <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
</head>
<body>
    <h1 data-i18n="title"></h1>
    <!-- 여기에 나머지 HTML 요소를 추가하세요. -->

    <script src="language.js"></script>
</body>
</html>

 

setting.html

<!DOCTYPE html>
<html>
<head>
    <title>개인 설정</title>
    <script src="https://unpkg.com/i18next/dist/umd/i18next.min.js"></script>
</head>
<body>
    <h1 data-i18n="title">개인 설정</h1>
    <button onclick="changeLanguage('en')">English</button>
    <button onclick="changeLanguage('ko')">한국어</button>

    <script src="language.js"></script>
</body>
</html>

 

language.js

i18next.init({
    lng: 'en',
    debug: true,
    resources: {
        en: {
            translation: {
                title: 'title',
                // 여기에 나머지 영어 번역을 추가하세요.
            },
        },
        ko: {
            translation: {
                title: '제목',
                // 여기에 나머지 한국어 번역을 추가하세요.
            },
        },
    },
}, function(err, t) {
    // 번역 파일을 비동기적으로 로드합니다.
    ['en', 'ko'].forEach(function(lng) {
        fetch(`${lng}.json`)
            .then(response => response.json())
            .then(data => {
                i18next.addResourceBundle(lng, 'translation', data);
                updateTranslations();
            });
    });

    // 페이지가 로드될 때 로컬 스토리지에서 언어 설정을 불러옵니다.
    const savedLanguage = localStorage.getItem('language');
    if (savedLanguage) {
        changeLanguage(savedLanguage);
    } else {
        updateTranslations();
    }
});

function changeLanguage(language) {
    // 언어 설정을 로컬 스토리지에 저장합니다.
    localStorage.setItem('language', language);

    // i18next의 언어 설정을 업데이트합니다.
    i18next.changeLanguage(language, updateTranslations);
}

function updateTranslations() {
    document.querySelector('h1').textContent = i18next.t('title');
    // 여기에 나머지 번역을 업데이트하는 코드를 추가하세요.
}

 

반응형