이번 포스트에서는 위와 같은 Breadcrumbs를 구현하는 방법에 대해 다루겠다. views.py를 중점으로 서술할 예정이다.
Breadcrumbs 란?
브래드크럼은 핸젤과 그레텔에서 따온 용어(빵부스러기)이다. 겉보기에는 간단해보이지만 알고리즘은 생각보다는 복잡하다. 내가 직접 구현했었던 코드는 제일 하단에 있다.
어떻게 구현하는가?
가정
:
이해를 돕기 위해 좌측과 같은 구조의 Document들이 있다고 가정하겠다. 게시글6이 몇번째에 위치해 있는지 Checkpoint에 저장한 것이다. Depth는 게시글의 깊이를 표현한다. 블로그를 예로 들자면 메뉴안의 메뉴 같은 개념이다.
변수 선언
- locations = [] 으로 list형 변수를 선언해줘야 한다. breadcrumbs를 기록하는 역할을 할 것이다.
- point_depth = document.depth 으로 현재 접속한 게시글의 depth를 변수에 저장해줘야한다.
코드 작성
for i in reversed(range(0, checkpoint+1)):
if documents[i].depth < point_depth:
locations.append(documents[i])
point_depth -= 1
if point_depth == 0:
break
위 코드를 통해서 점점 위쪽으로 탐색하는 작업을 반복한다. point_depth가 0이 되면 종료되는 반복문이다. 참고로 i 는 point_depth를 비교할 대상이 되는 document번호라고 생각하면 된다.
For문 첫번째 루프
플로우차트에서 곡선 화살표가 게시글6에서 시작하는데, 잘못되었다. 게시글6과는 상관없이 i번째 게시글의 Depth와 point_depth를 비교하는 것이다.
For문 두번째 루프
i의 값이 줄어들면서 점점 위쪽 게시글로 올라가는 모습이다.
For문 세번째 루프
For문 네번째 루프
코드 종료
이런 식으로 위로 올라가며 계속 비교해가는 방식이다. Depth가 비교되고 참일경우에 계속 1씩 줄어드는데, 만약 상위 게시글과 Depth가 2정도 차이나면 location에 의도치않은 breadcrumbs가 들어가게 된다. Depth의 차이를 계산하는 과정을 추가하면 된다. 이제 locations를 HTML로 넘겨주고 렌더링하기만 하면 된다. HTML관련된 부분은 이 글에서 따로 작성하지 않도록 하겠다.
