[번역기] 패치 노트

변경사항 0.31 /2022.11.1

google api 미갱신으로 인한 번역 불가능 상태를 api을 연장함으로써 다시 가능하게 만듦.

+) 같은 학과 학우의 피드백을 통한 불편사항 개선

새로 번역을 할 시에 post를 삭제하기 때문에, 만약에 인터넷 주소창에 예전 번역한 주소가 저장되어 있으면 들어갔을 때, 202 error 페이지가 나와서 다시 홈으로 들어가야하는 불편 사항을 겪었음

 

views.py

try:
except:
	return redirect('home')

show 함수에 try except 구문을 추가해서 먼저 id로 들어온 포스트 값을 넣어서 보여주고, 만약 오류 발생시 except구문에서 home으로 보내주는 식으로 오류 해결

 

변경사항 0.3 /2022.09.25

언어를 기존의 코드를 적는 방식이 아닌 select를 할 수 있게 만들었다.

models.py

class Translate(models.Model):
    body = models.CharField('',max_length=500)
    original = models.CharField('',max_length=500, null=True)
    lg_list = (('ko', '한국어'), ('tr','터키어'),('az','아제르바이잔어'),('nl','네덜란드어'),('hi','힌디어'),('hmn','몽골어'),('fa','페르시아어'),('th','태국어'),('vi','베트남어'),('ms','말레이어'),('id','인도네시아어'))
    from_lg = models.CharField('',max_length=10, choices=lg_list, null=True)
    to_lg = models.CharField('',max_length=10, choices=lg_list, null=True)

choicefield가 구현되어 있지 않아서 이렇게 해야 한단다.

 

forms.py

from django import forms
from .models import Translate
class Transform(forms.ModelForm):
    class Meta:
        model = Translate
        fields = ['original', 'from_lg', 'to_lg']
        
        widgets = {
            'original': forms.Textarea(
                attrs={
                    'class': 'form-control',
                    'placeholder': '번역하고 싶은 문장',
                    'id' : 'none'
                }),
             'from_lg': forms.Select(
                attrs={
                    'class': 'form-control',
                    'id': 'left',
                }
            ),
             'to_lg': forms.Select(
                attrs={
                    'class': 'form-control',
                    'id': 'right',
                }
            ),
            }
        labels = {
            "from_lg":"출발언어",
            "to_lg":"도착언어",
        }

forms.choicefield로 하려고 온갖 고생을 다하다가 그냥 forms.Select 하니깐 되더라. safari로 하면 셀렉창이 이상하게 뜨는데 크롬으로하면 예쁘게 뜬다. 왜지

 

+) 터키어 사전 버튼 추가

<button onclick= "newPage()" class="btn btn-secondary" style="margin-top: 7px;">&#128214;</button>

    function newPage()  {
  window.open('https://dict.naver.com/trkodict/#/main');
}

일단 터키어 사전만 추가했다. 왜냐고? 내가 터키어과거든 ㅋ

변경사항 0.21 잠수함

showhome하고 home하고 나누면 수정사항 생길 때 마다 두번 바꾸는게 열받고 있다가 갑자기 if문이 생각났다. 만약 post.id가 있다면 go_home 함수로 가고, 없다면 그냥 home으로 가서 home.html로 이동한다. 이로써 home 템플릿은 하나다!

    {% if post.id %}
    <a href="{% url 'blog:go_home' post.id %}"><button type="button" class="btn btn-primary btn-lg" >새로번역하기</button></a>
    {% else %}
    <a href="{% url 'home' %}"><button type="button" class="btn btn-primary btn-lg" >새로번역하기</button></a>
    {% endif %}
        <a href="{% url 'blog:go_home' post.id %}"><button type="button" class="btn btn-secondary" >기록삭제</button></a>

 

+) 기록 삭제 버튼 추가

 

변경사항 0.21

 

번역기 자체가 post 형식으로 값을 새로 생성하는 거라서 자연스럽게 데이터가 쌓일 수 밖에 없다.

이게 마음에 안 들어서 새롭게 번역을 하면 전 데이터가 삭제 되도록 코드를 수정했다.

 

def home(request):
    form = Transform()
    forms = {'form': form}
    if request.method == 'POST':
        form = Transform(request.POST)
        translator = translate.Client()
        if form.is_valid():
            post = form.save(commit=False)
            if post.from_lg == 'ko':
                client_id = 
                client_secret = 
                post.body = post.original
                encText = urllib.parse.quote(post.body)
                data = "source=ko&target=en&text=" + encText
                url = "https://openapi.naver.com/v1/papago/n2mt"
                request = urllib.request.Request(url)
                request.add_header("X-Naver-Client-Id",client_id)
                request.add_header("X-Naver-Client-Secret",client_secret)
                response = urllib.request.urlopen(request, data=data.encode("utf-8"))
                rescode = response.getcode()

                if(rescode==200):
                    response_body = response.read()
                    decode = json.loads(response_body.decode('utf-8'))
                    post.body = decode['message']['result']['translatedText']
                post.body = translator.translate(post.body, target_language=post.to_lg)
                post.body = post.body["translatedText"]                    
                post.body = html.unescape(post.body)
                form.save()
            else:
                post.body = post.original
                post.body = translator.translate(post.body, target_language='en')
                post.body = post.body["translatedText"]

                client_id = 
                client_secret = 
                encText = urllib.parse.quote(post.body)
                data = "source=en&target=ko&text=" + encText
                url = "https://openapi.naver.com/v1/papago/n2mt"
                request = urllib.request.Request(url)
                request.add_header("X-Naver-Client-Id",client_id)
                request.add_header("X-Naver-Client-Secret",client_secret)
                response = urllib.request.urlopen(request, data=data.encode("utf-8"))
                rescode = response.getcode()
    
                if(rescode==200):
                    response_body = response.read()
                    decode = json.loads(response_body.decode('utf-8'))
                    post.body = decode['message']['result']['translatedText']
                    post.body = html.unescape(post.body)
                form.save()
            return redirect('blog:show', id = post.id)
    return render(request, 'home.html', forms)

def show(request, id):
    if request.method == 'GET':
        post = get_object_or_404(Translate, id=id)
        form = Transform(instance=post)
    else:
        post = get_object_or_404(Translate, id=id)
        post.delete()
        form = Transform(request.POST)
        translator = translate.Client()
        if form.is_valid():
            post = form.save(commit=False)
            if post.from_lg == 'ko':
                client_id = 
                client_secret = 
                post.body = post.original
                encText = urllib.parse.quote(post.body)
                data = "source=ko&target=en&text=" + encText
                url = "https://openapi.naver.com/v1/papago/n2mt"
                request = urllib.request.Request(url)
                request.add_header("X-Naver-Client-Id",client_id)
                request.add_header("X-Naver-Client-Secret",client_secret)
                response = urllib.request.urlopen(request, data=data.encode("utf-8"))
                rescode = response.getcode()

                if(rescode==200):
                    response_body = response.read()
                    decode = json.loads(response_body.decode('utf-8'))
                    post.body = decode['message']['result']['translatedText']
                post.body = translator.translate(post.body, target_language=post.to_lg)
                post.body = post.body["translatedText"]                    
                post.body = html.unescape(post.body)
                form.save()
            else:
                post.body = post.original
                post.body = translator.translate(post.body, target_language='en')
                post.body = post.body["translatedText"]

                client_id = 
                client_secret = 
                encText = urllib.parse.quote(post.body)
                data = "source=en&target=ko&text=" + encText
                url = "https://openapi.naver.com/v1/papago/n2mt"
                request = urllib.request.Request(url)
                request.add_header("X-Naver-Client-Id",client_id)
                request.add_header("X-Naver-Client-Secret",client_secret)
                response = urllib.request.urlopen(request, data=data.encode("utf-8"))
                rescode = response.getcode()
    
                if(rescode==200):
                    response_body = response.read()
                    decode = json.loads(response_body.decode('utf-8'))
                    post.body = decode['message']['result']['translatedText']
                    post.body = html.unescape(post.body)
                form.save()
            return redirect('blog:show', id = post.id)
    return render(request, 'showhome.html', {'post': post, 'form': form})

def go_home(request, id):
    post = get_object_or_404(Translate, id=id)
    post.delete()
    return redirect('home')

우선 home을 showhome과 그냥 home으로 분리시켰다. 그리고 create함수를 삭제하였다. 처음에는 아무리 생각해도 원래의 form action {% blog:create %}는 바꿀 수 없겠다고 생각했다. 이번에 예전의 create 함수를 보면 

form = Transform(request.POST)

이 부분에서 무조건 form 제출은 있어야겠다고 생각했기 때문.

그래서 저 blog:create는 남겨둔체 views.py 에서 show 함수의 else: 부분을 redirect('create')로 하였으나.. 위의 저 create 방식을 보면 request.post가 있어야 값을 전달하기 때문에... 전달 된 값이 없어서 계속 오류가 떴었다.

<form method="POST" style='max-width: 30rem; text-align:center; margin: 0 auto;'>
    {%csrf_token%}
    {{form.as_p}}
<button type="submit"class="btn btn-primary btn-lg">번역하기</button>
</form>

그래서 그냥 form action url을 지우고 그냥 method='POST'로 한 후, home이나 show 부분에서 post를 할 때, 다르게 작동 되도록 코드를 짰다. home에서 form을 제출하면 기존의 create 함수처럼 값들을 show에 넘겨주고, show를 get으로 받으면 값들을 보여준다. 그리고 그 상태에서 post를 누르게 되면 post.delete() 함수로 이전 데이터를 지운 후, 새로 작성을 하게 된다. 여기서 보여지는 템플릿은 showhome이다. home 과 showhome을 나눈 이유는 바로 

    <a href="{% url 'blog:go_home' post.id %}"><button type="button" class="btn btn-primary btn-lg" >새로번역하기</button></a>

요 새로 번역하기 버튼. 이게 기존의 home.html에 있게 되면 처음 화면에서 post.id를 얻어오지 못해서 오류가 뜬다. 그래서 show에서 넘어간 값들은 showhome.html로 보낸 후, 새로 번역하기 버튼을 누르면 해당 게시글을 지우고 home으로 이동하게 된다.

저 post.id가 가능한 이유는 show함수에서 번역한 값들을 {'post' : post}로 넘겼기 때문이다.

 

알게된 점 : post값으로 넘어가면 모든 파라미터들이 같이 넘어가게 된다. 또한 render는 context를 받아 템플릿에 뿌리는 거고, redirect는 단순히 url만 연결하기 때문에 context, 즉 데이터를 넘기지 못한다. 따라서 내가 else: return redirect('create')를 해도 소용이 없었던 것. 애초에 create함수는 request가 post일 때 값을 받기 때문에 안됐다.

변경사항 0.2

'' 나 "", <> 가 포함되면 html entity 코드로 표기되는 버그를 해결했다.

import html

post.body = html.unescape(post.body)

unescape를 하면 디코딩 해주고 escape를 하면 인코딩 해준다.

 

변경사항 0.12 및 0.11

<button onclick= 'switchText()' class="btn btn-secondary" style="margin-top: 7px;">⇄</button>
<button type="button" class="btn btn-primary btn-lg" onclick="copyT()">복사하기</button>

<script>    
  function copyT() {
      var obj = document.getElementById("copyTxt");
      var range = document.createRange();
      range.selectNode(obj.childNodes[0]);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range); 
      document.execCommand("copy"); 
      sel.removeRange(range);
  }
    function switchText() {
      var obj1 = document.getElementById('left').value;
      var obj2 = document.getElementById('right').value;

      var temp = obj1;
      obj1 = obj2;
      obj2 = temp;
      
      document.getElementById('left').value = obj1;
      document.getElementById('right').value = obj2;
    }

</script>

복사하기 버튼과 언어 스왑 버튼을 구현하였다. 저 left와 right id 값을 지정하기 위해서 forms.py의

        widgets = {
            'original': forms.Textarea(
                attrs={
                    'class': 'form-control',
                    'placeholder': '번역하고 싶은 문장',
                    'id' : 'none'
                }),
            'from_lg': forms.TextInput(
                attrs={
                    'class': 'form-control form-control-lg',
                    'placeholder': '출발언어코드(밑에 코드표 참고)',
                    'id': 'left',
                }),
            'to_lg': forms.TextInput(
                attrs={
                    'class': 'form-control form-control-lg',
                    'placeholder': '도착언어코드(밑에 코드표 참고)',
                    'id': 'right',
                }),
                }

attrs을 통해서 지정해 두었다.

그리고 form 태그 스위칭 버튼을 두어 강제로 form 제출하는 것을 막았다.