프레임워크 없이 다국어 정적 페이지를 만드는 방법

때때로 우리는 Angular, Vue.js 또는 React와 같은 프레임워크 없이 웹사이트를 구축한 경험이 있습니다. 아마도 재미를 위해 우리는 새롭거나 매우 단순한 것을 원할 것입니다.

제 경우에는 몇 년 전에 personal website을 만들기 시작했습니다. 그 당시에는 Angular를 몰랐고 필요한 모든 것을 지원하기에는 약간 지저분했습니다. 저는 스스로를 프론트엔드 개발자라고 생각하지 않았습니다. 내 취미와 비슷했습니다.

제 경우에는 영어와 스페인어를 유창하게 구사하기 때문에 다국어 지원을 추가하는 것이 중요했습니다. 좋은 라이브러리나 솔루션을 찾을 수 없었기 때문에 이것은 약간 지저분했습니다. 몇 번의 시도 끝에 나는 당신의 삶을 단순화할 수 있는 다음과 같은 코드를 생각해 냈습니다.

하나는 영어용이고 다른 하나는 스페인어용으로 두 개의 파일이 있는데 여기서 변환을 JSON에 상수로 저장합니다. JSON만 저장하지 않는 이유가 궁금하시다면 나중에 파일을 사용하는 데 몇 가지 문제가 있었습니다. 몇 가지 오류가 발생했으며 대부분의 솔루션은 Node.js 전용이었습니다.

lang-en.js

const translations = {
    "telephone": "Telephone",
    "email": "Email",
    "contactMe": "Contact me"
};

lang-es.js

const translations = {
    "telephone": "Teléfono",
    "email": "Email",
    "contactMe": "Contáctame"
};

다음 스크립트는 스크립트를 읽기 위한 것입니다.

get-script.js

const getScript = url => new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;

    script.onerror = reject;

    script.onload = script.onreadystatechange = function() {
      const loadState = this.readyState;

      if (loadState && loadState !== 'loaded' && loadState !== 'complete') return;

      script.onload = script.onreadystatechange = null;

      resolve();
    }

    document.head.appendChild(script);
});

그리고 마지막 스크립트는 HTML에서 값을 설정하기 위한 것입니다.

translations.js

let lang = 'en';

let nLang = (navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)).split('-')[0];

let supportedLang = ['en', 'es'];

lang = supportedLang.includes(nLang) ? nLang : lang;

getScript(`lang-${lang}.js`)
.then(() => {
    document.querySelectorAll('[data-translation]').forEach(item => {
        item.innerHTML = translations[`${item.dataset.translation}`];
    });
})
.catch((e) => {
  console.error(e);
});

그렇다면 HTML에서 구성을 어떻게 사용합니까? 다음과 같이 "JSON"에서 기대하는 값으로 data-translation이라는 data-* 속성을 정의합니다.

<script src="get-script.js"></script>
<script src="translations.js"></script>

<p data-translation="contactMe"></p>
<p data-translation="telephone"></p>
<p data-translation="email"></p>

그리고 그게 다야. 이제 프레임워크 없이 정적 다국어 페이지를 만들 수 있습니다.

나를 팔로우하세요:

링크드인
유튜브
인스 타 그램
사이버 예언자
당신의 이야기를 공유