코딩 교육 TIL

2024-05-30 AI 코딩 TIL

HyunjunPark 2024. 5. 30. 20:11
목에 담이와서 너무 힘들어요
  • 경원튜터님 피드백 : 기존 각각의 템플릿과 API 추가 작성해야되는 기능말고, 장고의 기능을 이용하여 템플릿을 번역하는 기능 (장고 공식문서 참고)
  • 장고 DB에 메뉴별 저장
  • 장고 설정 파일 수정
  • # settings.py

# 이 설정을 추가 또는 수정합니다.
LANGUAGE_CODE = 'en-us'  # 기본 언어 설정
USE_I18N = True  # 국제화 기능 사용 여부
USE_L10N = True  # 지역화 기능 사용 여부
USE_TZ = True  # 시간대 사용 여부

# 번역을 지원할 언어를 설정합니다.
LANGUAGES = [
    ('en', 'English'),
    ('ko', 'Korean'),
    # 필요한 다른 언어를 추가합니다.
]

# 번역 파일을 저장할 경로를 설정합니다.
LOCALE_PATHS = [
    BASE_DIR / 'locale',
]

​
  • 템플릿 파일에 번역 태그 추가
  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  • 번역 문자열 추출
  • # 생성된 .po 파일을 열어 각 문자열을 번역합니다.
python manage.py makemessages -l ko
  • 번역 적용
  • python manage.py compilemessages
  • 언어 설정
  • # views.py
from django.utils import translation
from django.http import HttpResponse

def set_language(request):
    user_language = 'ko'
    translation.activate(user_language)
    response = HttpResponse("Language set to Korean")
    response.set_cookie(settings.LANGUAGE_COOKIE_NAME, user_language)
    return response
  • settings.py
  • # settings.py

MIDDLEWARE = [
    # 기존 미들웨어 설정
    'django.middleware.locale.LocaleMiddleware',
    # 기타 미들웨어
]
  • URL 설정
  • # urls.py
from django.conf.urls.i18n import i18n_patterns
from django.urls import path
from . import views

urlpatterns = [
    # 기본 URL 패턴
]

urlpatterns += i18n_patterns(
    path('set-language/', views.set_language, name='set_language'),
    # 기타 URL 패턴
)

 

→ 위에 있는 건 기본 설정 코드

  • en
  • # SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\\n"
"Report-Msgid-Bugs-To: \\n"
"POT-Creation-Date: 2024-05-30 16:13+0900\\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n"
"Language-Team: LANGUAGE <LL@li.org>\\n"
"Language: \\n"
"MIME-Version: 1.0\\n"
"Content-Type: text/plain; charset=UTF-8\\n"
"Content-Transfer-Encoding: 8bit\\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\\n"

#: .\\orders\\templates\\orders\\menu.html:349
msgid "선택한 상품"
msgstr "Selected Items"

#: .\\orders\\templates\\orders\\menu.html:352
#: .\\orders\\templates\\orders\\menu.html:420
msgid "음성입력"
msgstr "Voice Input"

#: .\\orders\\templates\\orders\\menu.html:368
msgid "총 금액"
msgstr "Total Amount"

#: .\\orders\\templates\\orders\\menu.html:368
#: .\\orders\\templates\\orders\\menu.html:421
msgid "원"
msgstr "Won"

# "Won" is the currency of South Korea
#: .\\orders\\templates\\orders\\menu.html:371
msgid "전체삭제"
msgstr "Delete All"

#: .\\orders\\templates\\orders\\menu.html:372
msgid "결제하기"
msgstr "Make Payment"

#: .\\orders\\templates\\orders\\menu.html:379
msgid "AI기능이 필요하시면 음성입력을 눌러주세요."
msgstr "Press voice input if AI functionality is required."

#: .\\orders\\templates\\orders\\menu.html:417
msgid "input"
msgstr "en-US"

#: .\\orders\\templates\\orders\\menu.html:418
msgid "output"
msgstr "en-US"

#: .\\orders\\templates\\orders\\menu.html:419
msgid "음성입력중"
msgstr "Inputting voice"
  • ja
  • # SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\\n"
"Report-Msgid-Bugs-To: \\n"
"POT-Creation-Date: 2024-05-30 16:09+0900\\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n"
"Language-Team: LANGUAGE <LL@li.org>\\n"
"Language: \\n"
"MIME-Version: 1.0\\n"
"Content-Type: text/plain; charset=UTF-8\\n"
"Content-Transfer-Encoding: 8bit\\n"
"Plural-Forms: nplurals=1; plural=0;\\n"

#: .\\orders\\templates\\orders\\menu.html:349
msgid "선택한 상품"
msgstr "選択した商品"

#: .\\orders\\templates\\orders\\menu.html:352
#: .\\orders\\templates\\orders\\menu.html:420
msgid "음성입력"
msgstr "音声入力"

#: .\\orders\\templates\\orders\\menu.html:368
msgid "총 금액"
msgstr "合計金額"

#: .\\orders\\templates\\orders\\menu.html:368
#: .\\orders\\templates\\orders\\menu.html:421
msgid "원"
msgstr "ウォン"

#: .\\orders\\templates\\orders\\menu.html:371
msgid "전체삭제"
msgstr "全削除"

#: .\\orders\\templates\\orders\\menu.html:372
msgid "결제하기"
msgstr "支払う"

#: .\\orders\\templates\\orders\\menu.html:379
msgid "AI기능이 필요하시면 음성입력을 눌러주세요."
msgstr "AI機能が必要な場合は、音声入力を押してください。"

#: .\\orders\\templates\\orders\\menu.html:417
msgid "input"
msgstr "ja-JP"

#: .\\orders\\templates\\orders\\menu.html:418
msgid "output"
msgstr "ja-JP"

#: .\\orders\\templates\\orders\\menu.html:419
msgid "음성입력중"
msgstr "音声入力中"
  • ko
  • # SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\\n"
"Report-Msgid-Bugs-To: \\n"
"POT-Creation-Date: 2024-05-30 16:09+0900\\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n"
"Language-Team: LANGUAGE <LL@li.org>\\n"
"Language: \\n"
"MIME-Version: 1.0\\n"
"Content-Type: text/plain; charset=UTF-8\\n"
"Content-Transfer-Encoding: 8bit\\n"
"Plural-Forms: nplurals=1; plural=0;\\n"

#: .\\orders\\templates\\orders\\menu.html:349
msgid "선택한 상품"
msgstr "선택한 상품"

#: .\\orders\\templates\\orders\\menu.html:352
#: .\\orders\\templates\\orders\\menu.html:420
msgid "음성입력"
msgstr "음성입력"

#: .\\orders\\templates\\orders\\menu.html:368
msgid "총 금액"
msgstr "총 금액"

#: .\\orders\\templates\\orders\\menu.html:368
#: .\\orders\\templates\\orders\\menu.html:421
msgid "원"
msgstr "원"

#: .\\orders\\templates\\orders\\menu.html:371
msgid "전체삭제"
msgstr "전체삭제"

#: .\\orders\\templates\\orders\\menu.html:372
msgid "결제하기"
msgstr "결제하기"

#: .\\orders\\templates\\orders\\menu.html:379
msgid "AI기능이 필요하시면 음성입력을 눌러주세요."
msgstr "AI기능이 필요하시면 음성입력을 눌러주세요."

#: .\\orders\\templates\\orders\\menu.html:417
msgid "input"
msgstr "ko-KR"

#: .\\orders\\templates\\orders\\menu.html:418
msgid "output"
msgstr "en-US"

#: .\\orders\\templates\\orders\\menu.html:419
msgid "음성입력중"
msgstr "음성입력중"
  • cn
  • # SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\\n"
"Report-Msgid-Bugs-To: \\n"
"POT-Creation-Date: 2024-05-30 16:09+0900\\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\\n"
"Language-Team: LANGUAGE <LL@li.org>\\n"
"Language: \\n"
"MIME-Version: 1.0\\n"
"Content-Type: text/plain; charset=UTF-8\\n"
"Content-Transfer-Encoding: 8bit\\n"

#: .\\orders\\templates\\orders\\menu.html:349
msgid "선택한 상품"
msgstr "选择的商品"

#: .\\orders\\templates\\orders\\menu.html:352
#: .\\orders\\templates\\orders\\menu.html:420
msgid "음성입력"
msgstr "语音输入"

#: .\\orders\\templates\\orders\\menu.html:368
msgid "총 금액"
msgstr "总金额"

#: .\\orders\\templates\\orders\\menu.html:368
#: .\\orders\\templates\\orders\\menu.html:421
msgid "원"
msgstr "韩元"

#: .\\orders\\templates\\orders\\menu.html:371
msgid "전체삭제"
msgstr "全部删除"

#: .\\orders\\templates\\orders\\menu.html:372
msgid "결제하기"
msgstr "付款"

#: .\\orders\\templates\\orders\\menu.html:379
msgid "AI기능이 필요하시면 음성입력을 눌러주세요."
msgstr "如果需要AI功能，请按语音输入。"

#: .\\orders\\templates\\orders\\menu.html:417
msgid "input"
msgstr "zh-CN"

#: .\\orders\\templates\\orders\\menu.html:418
msgid "output"
msgstr "zh-CN"

#: .\\orders\\templates\\orders\\menu.html:419
msgid "음성입력중"
msgstr "输入语音"
  • html(언어별 버튼
  • # 버튼 위치
<div id="language-buttons" class="flex" style="position: fixed;top: 35px;right: 60px;">
    <button class="btn btn-light btn-lg" data-lang="ko">한국어</button>
    <button class="btn btn-light btn-lg" data-lang="en">English</button>
    <button class="btn btn-light btn-lg" data-lang="ja">日本語</button>
    <button class="btn btn-light btn-lg" data-lang="zh-hans">中文</button>
</div>

# 언어 변경 자바스크립트 
document.addEventListener("DOMContentLoaded", function () {
        const languageButtons = document.querySelectorAll(".btn-light");
        languageButtons.forEach(button => {
            button.addEventListener("click", function () {
                const lang = this.dataset.lang;
                switchLanguage(lang);
            });
        });

        function switchLanguage(lang) {
            fetch(`/orders/switch-language/?lang=${lang}`)
                .then(response => {
                    if (response.ok) {
                        window.location.reload();
                    } else {
                        console.error('Failed to switch language.');
                    }
                })
                .catch(error => console.error('Error:', error));
        }
    });

    function getCsrfToken() {
        const csrfTokenElement = document.querySelector('input[name="csrfmiddlewaretoken"]');
        if (csrfTokenElement) {
            return csrfTokenElement.value;
        } else {
            console.error('CSRF 토큰을 찾을 수 없습니다.');
            return null;
        }
    }

    const languageCodeIn = '{% trans 'input' %}'; // 음성입력 언어 선택
    const languageCodeOut = '{% trans 'output' %}'; // 음성입력 언어 선택
    const speechInputIn = "{% trans '음성입력중' %}"; // 음성입력 중 표시
    const speechInput = "{% trans '음성입력' %}"; // 음성입력 표시
    const won = "{% trans '원' %}"; // 원 표시
저작자표시 (새창열림)