#100daysofMiva 코딩 챌린지 8일차에 저는 한 언어를 다른 언어로 번역하는 간단한 번역기 모델을 작업했습니다.
JS에요 마법이에요✨?

? 언어 번역기 스크립트 문서

개요

이 JavaScript 코드는 재미있는 대화형 언어 번역기를 만들기 위해 설계되었습니다! MyMemory API를 활용하여 서로 다른 언어 간에 텍스트를 번역하고 언어를 교환하고, 번역을 복사하거나, 텍스트를 소리내어 말해 줄 수도 있습니다. ??

특징

• ? 언어 선택: 사용자는 암하라어부터 줄루어까지 다양한 언어 중에서 선택할 수 있습니다!
• ? 언어 교환: 버튼 클릭 한 번으로 소스 언어와 대상 언어를 쉽게 교환할 수 있습니다.
• ? 텍스트 음성 변환: 선택한 언어로 원본 또는 번역된 텍스트를 들어보세요.
• ? 클립보드에 복사: 한 번의 클릭으로 원본 또는 번역된 텍스트를 복사합니다.

코드 분석

언어 데이터

const countries = { /*...*/ } 

이 개체에는 사용 가능한 언어와 해당 국가 코드가 포함되어 있습니다. 예를 들어 "en-GB": "English"는 언어 코드와 이름을 쌍으로 지정합니다.

동적 드롭다운

selectTag.forEach((tag, id) => {
    /*...*/
});

이 코드는 국가 개체에 나열된 모든 언어로 드롭다운 메뉴를 동적으로 채웁니다. 첫 번째 드롭다운의 기본값은 영어("en-GB")이고 두 번째 드롭다운의 기본값은 힌디어("hi-IN")입니다.

언어 교환

exchageIcon.addEventListener("click", () => {
    /*...*/
});

교체 아이콘을 클릭하면 사용자가 "발신" 필드와 "도착" 필드 사이에서 텍스트와 선택한 언어를 교체할 수 있습니다.

실시간 번역

translateBtn.addEventListener("click", () => {
    /*...*/
});

"번역" 버튼을 클릭하면 텍스트가 MyMemory API로 전송되고 번역된 텍스트가 "to-text" 필드에 표시됩니다. 응답을 기다리는 동안 "번역 중..." 자리 표시자가 표시됩니다.

텍스트 음성 변환 및 복사

icons.forEach(icon => {
    /*...*/
});

이 섹션에서는 텍스트 음성 변환 및 복사 기능을 다룹니다.

• 음성: 선택한 언어로 텍스트를 소리내어 재생합니다.
• 복사: 텍스트를 클립보드에 복사합니다.

작동 방식

1. 언어 선택 ?: 드롭다운에서 언어를 선택하세요.
2. 텍스트 입력 또는 붙여넣기 ✍️: 번역하려는 텍스트를 입력하세요.
3. 번역 ?: "번역" 버튼을 클릭하고 마법이 일어나는 것을 지켜보세요!
4. 교환, 듣기 또는 복사 ???: 언어를 교환하고, 번역을 듣거나 텍스트를 클립보드에 복사합니다.

종속성

• MyMemory API: 번역 기능은 MyMemory API를 기반으로 합니다. 작동하려면 인터넷에 연결되어 있는지 확인하세요.

잠재적인 개선 사항

• 언어 자동 감지: 입력 텍스트의 언어를 자동으로 감지합니다.
• 고급 오류 처리: 번역 오류 또는 API 오류에 대한 응답을 개선합니다.
• 다중 번역: 가능한 경우 대체 번역을 표시합니다.

다음은 코드 작동 방식과 기능에 대한 단계별 분석입니다.

1단계: 사용 가능한 언어 정의

const countries = { /*...*/ }

• 기능: 이 개체에는 키가 언어-국가 코드(예: 영어의 경우 "en-GB")이고 값은 언어 이름(예: "English")인 키-값 쌍이 포함되어 있습니다. ).
• 목적: 이 데이터는 사용자가 출발어와 도착어를 선택할 수 있도록 언어 선택 드롭다운을 채우는 데 사용됩니다.

2단계: DOM 요소 선택

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

• 기능: 이 코드는 HTML 문서에서 다양한 요소를 선택하고 나중에 쉽게 액세스할 수 있도록 변수에 저장합니다.
  • fromText 및 toText: 사용자가 텍스트를 입력하고 번역을 보는 텍스트 영역입니다.
  • exchageIcon: 언어와 텍스트를 교환하는 데 사용되는 아이콘입니다.
  • selectTag: 언어 선택을 위한 드롭다운 메뉴입니다.
  • 아이콘: 복사 및 음성 기능을 위한 아이콘입니다.
  • translateBtn: 번역을 실행하는 버튼입니다.

3단계: 언어 드롭다운 채우기

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = `${countries[country_code]}`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• 기능: 이 루프는 국가 개체를 살펴보고 각 언어를 언어 선택 드롭다운의 옵션으로 추가합니다.
  • 드롭다운이 첫 번째 항목(id == 0)인 경우 기본적으로 영어("en-GB")가 선택됩니다.
  • 드롭다운이 두 번째 드롭다운(id == 1)인 경우 힌디어("hi-IN")가 기본적으로 선택됩니다.

4단계: 언어 및 텍스트 교체

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

• 기능: 교체 아이콘을 클릭하면 이 기능은 "시작" 및 "끝" 텍스트 영역과 선택한 언어 사이의 텍스트를 교체합니다.
  • tempText는 "from-text" 필드의 원본 텍스트를 임시로 보유합니다.
  • tempLang은 첫 번째 드롭다운의 원래 언어를 일시적으로 유지합니다.
  • 그런 다음 "from-text"가 "to-text"로 대체되고 그 반대도 마찬가지입니다. 선택한 언어도 교체됩니다.

5단계: 번역된 텍스트 지우기

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

• 기능: 사용자가 "from-text" 필드에서 모든 텍스트를 삭제하면 이 기능은 "to-text" 필드도 자동으로 지웁니다.
• 목적: 입력 텍스트가 지워지면 번역도 지워져 혼동을 방지합니다.

6단계: 텍스트 번역

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

• 기능: "번역" 버튼을 클릭하면 이 기능은 다음과 같습니다.
  1. "from-text" 필드에서 텍스트를 추출합니다.
  2. 드롭다운에서 선택한 언어를 식별합니다.
  3. 텍스트와 선택한 언어를 포함하여 MyMemory API에 요청을 보냅니다.
  4. API에서 번역을 받아 "텍스트로" 필드에 표시합니다.
  5. 프로세스가 진행 중임을 나타내는 번역을 기다리는 동안 자리 표시자 텍스트를 업데이트합니다.

요약

이 스크립트를 사용하면 사용자는 동적 대화형 인터페이스를 통해 다양한 언어 간에 텍스트를 번역할 수 있습니다. 사용자는 언어를 선택하고, 텍스트를 입력하고, 클릭 한 번으로 번역하고, 언어와 텍스트를 교환하고, 번역 내용을 소리내어 듣거나 클립보드에 복사할 수 있습니다.

다양한 언어로 플레이하며 번역 여정을 재미있고 상호작용적으로 만들어보세요! ?? 다음으로 ?✌?✨

여기에서 확인해 보세요.
https://app.marvelly.com.ng/100daysofMiva/day-8/

소스 코드
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_언어_번역기