1. Django Tutorial(Airbnb) - Django Translation

ID짱재·2021년 8월 30일

django tutorial

Django

목록 보기

29/43

🌈 Django Translation

🔥 Settings & TransTag

🔥 Translation File

🔥 get_current_language

🔥 Python code Translation

1. Settings & TransTag

🤔 LOCALE_PATHS & MIDDLEWARE

✔️ Django Translation은 국가 설정을 통해 페이지를 번역해주는 기능입니다. 이를 위해서 "locale" 디렉토리를 프로젝트 디렉토리 아래 만들어줍니다.

참고 : https://docs.djangoproject.com/en/2.2/topics/i18n/translation/

✔️ "locale" 디렉토리에는 Translation 파일이 저장된 장소로 사용됩니다. 'locale" 디렉토리를 생성 후 settings.py에서 Translation 파일은 "locale"에 저장하라고 Django에게 경로를 알려줍니다.

🔎 LOCALE_PATHS = (os.path.join(BASE_DIR, "locale"),)

# settings.py
MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "django.middleware.locale.LocaleMiddleware", # 👈 추가
]
...
...
...
# Locale
LOCALE_PATHS = (os.path.join(BASE_DIR, "locale"),)

🤔 trans 템플릿 코드

✔️ 이제 HTML의 어느 부분을 Django에게 번역시킬지 영역을 지정해 줍니다. "footer"와 "search bar"에 "placeholder" 부분을 Translation 영역으로 지정해보겠습니다.
✔️ 지정을 위해서는 HTML 파일 최상단에 i18n을 load해야하는데요, internationaliztion 의 줄임말이 i18n입니다.

🔎 {% load static i18n %} 또는 {% load static internationaliztion %}

✔️ "internationaliztion"을 load 시켰다면, 번역이 필요한 영역에 trans 템플릿 코드를 적용시킵니다.

🔎 {% trans "Please don't copy us." %}
🔎 placeholder="{% trans "Search By City" %}"

# footer.html
{% load i18n %} # 👈 load "i18n"
<footer class="container mx-auto text-center py-10 border-t font-medium text-gray-500">
    <span> {% trans "Please don't copy us." %} </span> # 👈 trnas 템플릿 코드
    <span> &copy; 2021 Airbnb-Clone, {% trans "All rights reserved" %}. </span>
</footer>

# base.html
{% load static i18n %} # 👈 load "i18n"
<!DOCTYPE html>
<html lang="en">
...
...
<form method="get" action="{% url "rooms:search" %}" class="w-9/12">
    <input
        class="search-box border px-5 w-full font-medium text-gray-900 placeholder-gray-600 py-3 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
        name="city"
        placeholder="{% trans "Search By City" %}" # 👈 trnas 템플릿 코드
    />
</form>
</html>

🤔 blocktrans 템플릿 코드

✔️ 단어를 하나하나 변경할 때는 trans 템플릿 테그를 사용할 수 있지만, 영역을 지정해서 변경할 때는 blocktrans 태그를 사용합니다. 맥락이 중요할 때는 이 방법이 더 유용하게 사용됩니다. blockrans를 사용할 때도 마찬가지로 i18n을 load해야 합니다.

🔎 {% load i18n %}

✔️ blocktrans는 템플릿 변수를 자동으로 인식할수 없습니다. 이에 템플릿 변수를 인식시키기 위해 필요한 변수를 blocktrans 내에서 with 구문 사용하여 지정합니다.

🔎 {% blocktrans with current_page=page_obj.number total_pages=page_obj.paginator.num_pages %}

{% extends "base.html" %}
{% load i18n %} # 👈 "i18n" load
    {% block page_title %}
        Home
    {% endblock page_title %}
    {% block content %}
    ...
    ...
<span class="mx-3 font-medium text-lg">
    {% blocktrans with   # 👈 변수를 지정한 뒤, 사용해야 인식합니다.
        current_page=page_obj.number 
        total_pages=page_obj.paginator.num_pages 
    %}Page {{current_page}} of {{total_pages}}
    {% endblocktrans %}
</span>
...
...

2. Translation File

🤔 makemessages & comilemessages

✔️ Translation의 경로를 settings.py에서 설정하고, HTML에서 번역할 영역을 지정하였습니다. 이제 Django에게 번역할 언어와 함께makemessage 명령을 내려주면 됩니다.

🔎 django-admin makemessages --locale=ko 👈 한국어(ko)
참고 : https://docs.djangoproject.com/en/2.2/ref/django-admin/#django-admin-makemessages

✔️ 만일 명령에서 오류가 난다면, gettext가 설치되지 않았을 수 있어요. 아래의 명령을 실행해보세요:)

🔎 설치 목록 확인 : brew list
🔎 gettext 설치 : brew install gettext
🔎 gettext 연결 : brew link gettext --force

✔️ gettext가 설치와 연결이 잘 되어있고, makemessages 명령에 문제가 없다면, locale 폴더에 "django.po"란 파일이 생성되어 있습니다. 우리가 "locale" 디렉토리에 파일 경로를 지정한 이유는 바로 이를 위함입니다.

#: templates/base.html:24
msgid "Search By City"
msgstr ""
#: templates/partials/footer.html:3
msgid "Please don't copy us."
msgstr ""
#: templates/partials/footer.html:4
msgid "All rights reserved"
msgstr ""

✔️ "makemessages" 명령을 통해 Django가 tagging한 영역을 모두 찾아 Translation할 수 있게 파일을 만들어 주었습니다. 이에 "msgstr" 부분에 번역할 내용을 적어줍니다.

...
...
#: templates/base.html:24
msgid "Search By City"
msgstr "도시별 검색"
#: templates/partials/footer.html:3
msgid "Please don't copy us."
msgstr "제발 우리를 도용하지 마세요."
#: templates/partials/footer.html:4
msgid "All rights reserved"
msgstr "판권 소유"
#: templates/rooms/room_list.html:24
#, python-format
msgid "Page %(current_page)s of %(total_pages)s"
msgstr "총 %(total_pages)s 중 %(current_page)s 쪽" # 👈 s까지 사용해야해요.

✔️ "django.po"에서 번역할 내용을 작성하였다면, compliemessages 명령을 내려줍니다. 이 명령을 생성하면 locale 디렉토리에 "django.mo" 파일이 생성됩니다.

🔎 django-admin compilemessages

3. get_current_language

🤔 get_current_language

✔️ 이제 사용자가 HTML에서 언어 선택을 할 수 있도록 선택 목록을 만들어 주고, 이 선택 사항에 따라 페이지의 언어가 변경될 수 있도록 해보겠습니다.
✔️ 언어 선택을 위해 select 태그를 이용하여 선택목록을 추가했고, ko로 언어를 바꿧다가, 다시 en로 돌아오기 위해서 "get_current_language"를 사용합니다.

🔎 {% get_current_language as LANGUAGE_CODE %}

# footer.html
{% load i18n %}
<footer class="container mx-auto text-center py-10 border-t font-medium text-gray-500">
    <div class="flex flex-col">
        <span>
            {% trans "Please don't copy us." %}
        </span<>
        <span>&copy; 2021 AirBnb-Clone, {% trans "All rights reserved" %}.</span>
    </div>
    <div class="mt-10 flex">
    	{% get_current_language as LANGUAGE_CODE %}
        <select class="w-1/5 h-8" id="js-lang"> # 👈 js에서 해당 태그의 변화를 감지할 수 있게 id값을 넣어 줍니다.
            <option value="en"
                {% if LANGUAGE_CODE == 'en' %}
                selected
                {% endif %}>English
            </option>
            <option value="ko"
                {% if LANGUAGE_CODE == 'ko' %}
                    selected
                {% endif %}>Korean
            </option>
        </select>
    </div>
</footer>

🤔 addEventListener

✔️ select 태그의 변화가 발생하면, addEventListener를 통해 이를 감지하고 페이지를 새고로침(reload)할 수 있도록 javascript를 활용했습니다.
✔️ 또한 fetch를 통해 경로를 설정해 주었습니다.

🔎 fetch({% url 'users:switch-language' %}?lang=${selected})

    <script>
        const langSelect = document.getElementById("js-lang");
        const handleLangChange = () => {
            const selected = langSelect.value; // 👈 value값 추출
            fetch(`{% url 'users:switch-language' %}?lang=${selected}`).then(() => window.location.reload());
        } // 👈 경로로 request를 보내고, 그러고나서 새로고침
        langSelect.addEventListener("change", handleLangChange); // 👈 "js-lang"에 변화를 감지하면, "handleLangChange" 함수 실행
    </script>

🤔 views.py & urls.py

✔️ view와 url을 매핑해 작동되는지 확인합니다.
✔️ tranlation을 import 후, url에서 가져온 언어의 값이("langSelect.value") 존재한다면,, session에 언어 값을 추가해줍니다.

🔎 request.session[translation.LANGUAGE_SESSION_KEY] = lang

#user/views.py
from django.http import HttpResponse # 👈 "HttpResponse" 추가
from django.utils import translation # 👈 "translation" 추가
...
...
def switch_language(request):
    lang = request.GET.get("lang", None)
    if lang is not None:
        request.session[translation.LANGUAGE_SESSION_KEY] = lang  # 👈 session에 언어값 추가
    return HttpResponse(status=200)

#user/urls.py
from django.urls import path
from . import views
app_name = "users"
urlpatterns = [
    ...
    ...
    path("switch-language/", views.switch_language, name="switch-language"),
]

4. Python code Translation

🤔 get_textlazy

✔️ Template에서 Translation하는 방법을 알아 보았으니, python code를 Translation하는 방법을 알아볼께요:)
✔️ 이를 위해 gettext_lazy를 import합니다. 이는 reverselazy처럼 즉각적으로 실행되는 것이 아니라, 코드가 호출되었을 때만 반응해요.

🔎 from django.utils.translation import gettext_lazy

✔️ gettextlazy를 `로 사용하기로 하였으니, _`에 인자로 전달하여 makemessages를 명령시킵니다.

🔎 django-admin makemessages locale=ko

# users/models.py
from django.utils.translation import gettext_lazy as _ # 👈 gettext_lazy 호출
...
# Create your models here.
class User(AbstractUser):
    GENDER_MALE = "male"
    GENDER_FEMALE = "female"
    GENDER_OTHER = "other"
    GENDER_CHOICES = (
        (GENDER_MALE, _("Male")), # 👈 _()로 gettext_lazy를 호출합니다.
        (GENDER_FEMALE, _("Female")), # 👈 _()로 gettext_lazy를 호출합니다.
        (GENDER_OTHER, _("Other")), # 👈 _()로 gettext_lazy를 호출합니다.
    )
    LANGUAGE_ENGLISH = "en"
    LANGUAGE_KOREAN = "kr"
    LANGUAGE_CHOICES = (
        (LANGUAGE_ENGLISH, _("English")), # 👈 _()로 gettext_lazy를 호출합니다.
        (LANGUAGE_KOREAN, _("Korean")), # 👈 _()로 gettext_lazy를 호출합니다.
    )
   ...
   ...
    avatar = models.ImageField(upload_to="avatars", blank=True)
    gender = models.CharField(
        _("gender"), choices=GENDER_CHOICES, max_length=10, blank=True
    ) # 👈 _()로 gettext_lazy를 호출합니다.
    bio = models.TextField(blank=True)
    birthdate = models.DateField(null=True, blank=True)
    language = models.CharField(
        _("language"), # 👈 _()로 gettext_lazy를 호출합니다.
        choices=LANGUAGE_CHOICES,
        max_length=2,
        blank=True,
        default=LANGUAGE_KOREAN,
    )
...
...

✔️ msgstr을 다 작성한 후에 compile도 진행해주어야 합니다.

🔎 django-admin compilemessages

#: users/models.py:20
msgid "Male"
msgstr "남성"
#: users/models.py:21
msgid "Female"
msgstr "여성"
#: users/models.py:22
msgid "Other"
msgstr "기타"
#: users/models.py:29
msgid "English"
msgstr "영어"
#: users/models.py:30
msgid "Korean"
msgstr "한국어"
#: users/models.py:53
msgid "gender"
msgstr "성별"
#: users/models.py:58
msgid "language"
msgstr "언어"
#: users/models.py:85
msgid "Verify Airbnb Account"
msgstr "Airbnb 계정 인증"

ID짱재

Keep Going, Keep Coding!

이전 포스트

1. Django Tutorial(Airbnb) - Template Filter

다음 포스트