Blogger에서 재귀함수를 통해 전체 글 리스트 얻어오기(for Archive page , JSONP API)

어제 밤부터 급 삘받아서 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;




잘 됩니다 :)