코딩 교육 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 '원' %}"; // 원 표시