어제 밤부터 급 삘받아서 Archive 페이지를 만들었습니다. https://www.hahwul.com/p/blog-archive.html

보통 게시글 리스트는 Pagination 되어 한번에 지정된 갯수의 결과만큼만 확인할 수 있게 구성합니다. 저 또한 제 블로그 메인 페이지나 검색쪽은 동일하게 적용되어 있습니다. 그러나 가끔은 페이지의 전체 리스트가 보고싶은 경우가 있습니다.

오늘은 blogger의 JSONP API를 이용해 전체 게시글 리스트를 가져오고 이를 이용해서 Archive 를 만들어봅시다.

feeds를 이용하여 전체 글 목록 가져오기

blogger의 JSONP API 중 /feeds/posts/summary 를 이용하면 게시글 리스트를 가져올 수 있습니다. 보통 메인 페이지의 글 리스트의 구현 코드는 이 방식을 이용합니다.

https://www.hahwul.com/feeds/posts/summary?alt=json-in-script&callback=zzzz

다만 한번에 피드에서 받아올 수 있는 크기가 정해져있어(500개던가요..) 글 갯수가 그 이상이 경우 한번의 요청으로 모든 글을 가져올 수 없습니다. 그래서 전체 피드를 나눠서 받아와야하며, 이는 재귀함수를 통해 쉽게 구현할 수 있습니다.

docdoc = []

function sendQuery()
{
   var scpt = document.createElement("script");
   scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList&start-index=" + startIndex + "&max-results=" + maxResults;

   document.body.appendChild(scpt);
}

function processPostList(root)
{
   var feed = root.feed;

   if (feed.entry.length > 0)
   {
      for (var i = 0; i < feed.entry.length; i++)
      {
         var entry = feed.entry[i];

         var title = entry.title.$t;

         for (var j = 0; j < entry.link.length; j++)
         {
            if (entry.link[j].rel == "alternate")
            {
               var url = entry.link[j].href;

               if (url && url.length > 0 && title && title.length > 0)
               {
                  // entry (각 객체)
                  // title (게시글 제목)
                  // .link (링크)
                  // .published (발행일)
                  tmp = Date.parse(entry.published.$t)
                  date = new Date(tmp)         
                  year = date.getFullYear();
                  if(chartdata[year]){
                    chartdata[year] = chartdata[year]+1;
                  }
                  else{
                    chartdata[year] = 1;
                  }          
                  // 저는 이런식으로 docdoc 이라는 Array에 hash 형태로 집어넣었습니다.
                  docdoc.push({title:title,link:url,updated:date.toLocaleDateString()})
               }

               break;
            }
         }
      }

      if (feed.entry.length >= maxResults)
      {
         startIndex += maxResults;
         sendQuery();
      }
   }
}

sendQuery();

View 만들기

여기서부턴 제 Archive 페이지와 구성이 조금 달라집니다. (전 VueJS를 사용한 상태라..) 위에서 docdoc이라는 Array를 만들고 Hash로 값을 넣어줬기 때문에 forEach로 뺴면 간단합니다.

docdoc.forEach(function(obj){console.log(obj.title)})
// 제목만 출력

페이지에 li로 찍도록 변경해보면..

c = document.getElementById('canvas');
buf = ""
docdoc.forEach(function(obj){
  buf = buf + "<li><a href='"+obj.link+"'>"+obj.title+"</a></li>"
})

c.innerHTML = buf;

잘 됩니다 :)