반응형
자바스크립트를 이용해서 영어, 한국어 등 언어를 설정하면 모든 화면에서 적용되도록
전역 상태로 관리하기 위해 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');
// 여기에 나머지 번역을 업데이트하는 코드를 추가하세요.
}
반응형
'개발 공부 > publishing' 카테고리의 다른 글
| 시맨틱 태그란? 기본 개념부터 기능 태그까지 Semantic Tags를 알아보자! (5) | 2024.10.07 |
|---|---|
| html 링크 연결 방법 정리 ( a 태그, button 태그 ) (3) | 2024.10.06 |
| 무료 움직이는 애니메이션 아이콘 사용하기 (feat.lordicon) (0) | 2024.07.14 |
| 즐겨찾기 / 퍼블리싱 작업에 폰트 적용 폰트어썸 사이트로 종결! (무료폰트, 자세한 라이센스 범위까지 한번에 확인) (0) | 2024.06.26 |
| 무료 아이콘 / 아이콘 저장소 서비스 폰트어썸 사용해보기 ( 설치없이 벡터 아이콘 사용 가능 ) (0) | 2024.06.20 |
