blog.stackframe.dev

블로그 개발 삽질기 3 - 템플릿 구현

  1. 블로그 개발 삽질기 0 - 발단
  2. 블로그 개발 삽질기 1 - 설계
  3. 블로그 개발 삽질기 2 - reStructuredText 파서 구현
  4. 블로그 개발 삽질기 3 - 템플릿 구현
  5. 블로그 개발 삽질기 4 - Service Worker
  6. 블로그 개발 삽질기 5 - 파서 리팩토링

파서가 어느정도 완성되어 본격적으로 프론트엔드를 만들기 시작했다. 개인적으로 프론트엔드는 아주 잼병이다. 어떤 디자인으로 만들어야 괜찮은지도 잘 모르겠고 뭘 봐도 마음에 쏙 드는 그런게 없어서 늘 비슷하고 단순한 디자인이 나와버린다. 난 역시 백엔드가 어울리는 것 같다.

아무튼 설계 때 정했던 것처럼 템플릿을 사용하여 사용자가 사이트 구조를 수정할 수 있게 하였다. 블로그의 각 부분을 파일로 나누고, 내용 중간에 {{{ templateString }}} 형태로 선언하면 거기에 맞는 데이터가 추가되도록 만들었다. 여기서 주의했던 점은 무한 루프가 발생 할 수 있다는 것이다. 템플릿 안에서 동일한 템플릿을 로드한다면 계속 반복하다가 결국 메모리 초과로 에러가 발생할 것이다. 이를 막기 위해 템플릿 안에 또다른 템플릿을 로드 가능한 요소는 템플릿 처리하기 전에 자신을 다시 요청할 수 없도록 리스트에서 제거하였다.

unset()으로 템플릿 리스트에서 제거

다만 완전히 모든걸 사용자 마음대로 수정할 수 있도록 하지는 않았다. 댓글 목록, 글 목록, 카테고리 목록은 따로 템플릿이 없고 내가 지정한 HTML만 삽입한다. 가장 큰 이유는 당연히 요소 하나씩 템플릿을 사용하도록 하면 복잡해지고, 거기까지 사용자 재량으로 하면 관리해야 할 템플릿 수가 너무 많아지기 때문이다. 티스토리 같은 경우는 skin.html에 치환자라 해서 모든 구조들을 거기에 넣는 방식을 채택하던데, 이렇게 나처럼 각 요소 별로 분할하는 것과 한 파일에 넣는 것은 서로 장단점이 있다고 생각한다.

댓글