26. 앵커

답글을 작성하거나 수정한 후에 항상 페이지 상단으로 스크롤이 이동되어 작성한 답변을 확인하려면 다시 스크롤을 내려서 확인해야 한다. Ajax같은 비동기 통신 기술을 사용할 수 도 있지만 보다 쉬운 방법으로 이 문제를 해결해 보자. HTML 에는 URL 호출시 원하는 위치로 이동시켜 주는 앵커 태그가 있다. 예를 들어 HTML 중간에 <a id="django"></a> 라는 앵커 태그가 있다면 이 HTML 을 호출하는 URL 뒤에 #django 라고 붙여주면 해당 페이지가 호출되면서 해당 앵커로 스크롤이 이동된다. 이를 적용해 보자.

먼저 답변에 앵커기능을 추가해 보자.

projects\mysite\templates\pybo\question_detail.html 을 수정하자.

답변 작성, 수정시에이동해야할 앵커 태그를 추가했다. 답변이 반복되어 표시되는 for 문 바로 뒤에 추가했다. name 속성은 유일한 값 이어야 하므로 answer_{{ answer.id }} 같은 답변 id 를 사용했다. 

 

이제 답변을 등록하거나 수정한 뒤 지정한 앵커 태그로 이동하도록 코드를 수정하자. 다음은 답변 등록 또는 답변 수정을 한 뒤 사용했던 기존 코드의 일부이다.

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 함수도 변경해 줘야 한다.

projcets\mysite\pybo\views\answer_views.py 를 수정하자.

테스트 해보면 답변을 작성한 후에 자동으로 스크롤이 지정한 앵커로 이동하는 것을 확인할 수 있다. 그리고 URL 을 보면 #answer_숫자 가 추가되었다.