#26 앵커

#26 앵커

1. 앵커(Anchor)

현재 Pybo는 댓글이나 답글을 작성/수정하고나면 게시글 상세페이지로 리다이렉트되며 페이지 최상단으로 이동하기

때문에 자신이 작성한 답변을 확인하기 위해 스크롤을 내려야 한다. Ajax 와 같은 비동기 통신기술을 사용하면 페이지의

리로드 자체가 발생하지 않기 때문에 자동으로 해결될 일이지만 여기서는 앵커(Anchor)를 사용하여 보다 쉽게 해결하려

한다. 하이퍼링크를 추가할때 사용햇던 태그가 바로 앵커 태그이다. 앵커 태그를 통해 다른 웹 페이지의 하이퍼

링크나 웹페이지 내 특정 부분으로 이동할 수 있다.

2. 답글 앵커 추가

특정 답글로의 이동을 위해서는 먼저 답글의 위치에 앵커태그를 추가해둬야한다.

반복문으로 게시글에 달린 답글들을 출력하는 템플릿 코드에서 답글 하나의 시작부분에 앵커태그를 추가한다.

앵커태그의 name은 유일한 값이어야 하기 때문에 answer_<답글id> 의 형태로 하였다.

3. 답글 작성, 수정 후 앵커 위치로 리다이렉트

이제 답글을 작성하거나 수정하면 해당 위치의 앵커로 이동하도록 리다이렉트 함수를 수정해야한다.

먼저 django.shortcuts 에서 resolve_url 을 import 한다. url resolve 는 url 매핑이 의미하는 실제 url주소를 문자열로

반환하는 함수이다. 그리고나서 redirect 되는 주소를 <게시글상세페이지 주소>/#answer_<작성/수정한 답글id> 의

형태로 수정해준다. 이동할 url의 뒷부분에 #앵커이름 을 추가해주는 것으로 그 페이지의 앵커이름에 해당하는 부분으로

이동할 수 있다.

답글을 작성해보면 리다이렉트되며 작성한 답글의 위치로 바로 이동하는 것을 확인할 수 있다.

4. 댓글에 앵커기능 추가

답글과 동일한 방식으로 댓글에도 앵커기능을 추가할 수 있다.

게시글과 답글의 댓글영역 시작부분에 앵커를 추가해준다.

from http://scala0114.tistory.com/114 by ccl(A) rewrite - 2021-10-11 15:26:54