[Django] 장고(Django) 서비스 개발 - 앵커(anchor)

더 많은 기능을 추가하기 전에 발견된 몇 가지 문제점을 해결하려고 한다.

발견된 문제점은 답글을 작성하거나 수정한 후에 항상 페이지 상단으로 스크롤이 이동되기 때문에 본인이 작성한 답변을 확인하려면 다시 스크롤을 내려서 확인해야 한다는 점이다.

Ajax와 같은 비동기 통신 기술을 사용하여 이 문제를 해결할 수도 있지만 보다 쉬운 방법으로 이 문제를 해결해 보려 한다.

 

이번 포스팅에서는 장고를 사용하여 게시판 서비스 개발에 필요한 앵커(anchor)에 대하여 공부를 해보고자 한다.

 

---

앵커(anchor) 

HTML에는 URL 호출 시 원하는 위치로 이동시켜 주는 앵커(anchor) 태그가 있다.

예를 들어 HTML 중간에 <a id="django"></a> 라는 앵커 태그가 있다면 이 HTML을 호출하는 URL 뒤에 #django 라고 붙여주면 해당 페이지가 호출되면서 해당 앵커로 스크롤이 이동된다.

 

답변 앵커

답변에 앵커기능을 추가해 보려 한다.

 

답변 앵커 추가

먼저 답변 작성, 수정 시에 이동해야 할 앵커 태그를 질문 상세 템플릿에 추가한다.

 

[파일명: projects\mysite\templates\pybo\question_detail.html]

(... 생략 ...)
<h5 class="border-bottom my-3 py-2">{{question.answer_set.count}}개의 답변이 있습니다.</h5>
{% for answer in question.answer_set.all %}
<a id="answer_{{ answer.id }}"></a>
(... 생략 ...)

 

답변이 반복되어 표시되는 for 문 바로 다음에 <a id="answer_{{ answer.id }}"></a>와 같이 앵커 태그를 추가했다.

앵커 태그의 name 속성은 유일한 값이어야 하므로 answer_{{ answer.id }}와 같이 답변 id를 사용했다.

 

---

답변 redirect

답변을 등록하거나 수정할 때 위에서 지정한 앵커 태그로 이동하도록 코드를 수정해보려 한다.

다음은 답변 등록 또는 답변 수정을 한 뒤 사용했던 기존 코드의 일부이다.

return redirect('pybo:detail', question_id=question.id)

 

여기에 앵커를 포함하면 다음과 같다.

return redirect('{}#answer_{}'.format(
    resolve_url('pybo:detail', question_id=question.id), answer.id))

 

pybo:detail URL에 #answer_2와 같은 앵커를 추가하기 위해 resolve_url 함수를 사용했다.

resolve_url은 실제 호출되는 URL 문자열을 리턴하는 장고의 함수이다.

따라서 answer_views.py의 answer_create, answer_modify, answer_vote 함수는 다음과 같이 변경해야 한다. 

 

[파일명: projects\mysite\pybo\views\answer_views.py]

(... 생략 ...)
from django.shortcuts import render, get_object_or_404, redirect, resolve_url
(... 생략 ...)

@login_required(login_url='common:login')
def answer_create(request, question_id):
    (... 생략 ...)
            return redirect('{}#answer_{}'.format(
                resolve_url('pybo:detail', question_id=question.id), answer.id))
    (... 생략 ...)


@login_required(login_url='common:login')
def answer_modify(request, answer_id):
    (... 생략 ...)
    if request.method == "POST":
        form = AnswerForm(request.POST, instance=answer)
        if form.is_valid():
            (... 생략 ...)
            return redirect('{}#answer_{}'.format(
                resolve_url('pybo:detail', question_id=answer.question.id), answer.id))
    (... 생략 ...)

(... 생략 ...)

@login_required(login_url='common:login')
def answer_vote(request, answer_id):
    (... 생략 ...)
    return redirect('{}#answer_{}'.format(
                resolve_url('pybo:detail', question_id=answer.question.id), answer.id))

 

answer_modify 함수를 보면 redirect 함수를 사용한 부분이 두 군데 있으므로 수정에 주의해야 한다.

 

---

답변 앵커 확인

 

 

화면에 표시한 부분을 보면 상세 화면 URL에 #answer_4가 추가되었고 스크롤이 해당 위치로 이동했음을 알 수 있다.

 

---