나도 깃허브 잔디밭처럼 포스팅 목록을 가져오고 싶다아--
라는 생각으로 시작한 토이프로젝트..
// 좀 무식한 방법이지만, 글목록 가져오자고 API를 팔 수도 없는 노릇이고.. 그냥 티스토리에서 날짜별 글 목록 HTML을 반환하는 API를 끌어다 썼다. 때문에 필요한 데이터만 가져오기위해 정규식으로 파싱을 한다.
// 정규식때문에 고생을 많이했다. 정규식은 해도해도 헷갈린다..
아직 최근 3개월 날짜를 가져오는 로직은 작성중
깃허브처럼 예쁘게 보여줄 방법도 고민중...
(function(){
var utils = {
nowYear : 2021,
getRecent3Month : function (baseMonth){
if(!(baseMonth <= 12 && baseMonth >= 1)) return
var month = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
var resultArr = []
var monthIndex = baseMonth - 1 // index는 0부터 시작하니 달에 맞추기 위해 index보정 -1
for(var loopCount = 0; loopCount < 3; loopCount++, monthIndex--){
if(monthIndex == -1) monthIndex = 11
resultArr.push(month[monthIndex])
}
return resultArr
},
getPost : function(index, month, result){
if(!month) return
var post = "";
$.ajax({
url: "/archive/" + utils.nowYear + month,
method: "GET",
success: function(response){
result[index]['status'] = true
result[index]['post'] = response
result[index]['month'] = month
}
})
},
ControlPost : function (){
this.status = false
this.post = ''
this.month = 0
},
PostListData : function(month, postingList){
this.month = month
this.postingList = postingList
},
getPostInfo : function(postData){
if(!postData) return
return postData.match(/<td class=" cal_day [\s|\S]*?">([\s|\S]*?)<\/td>/g)
},
getPostingDay : function(postList){
if(!postList) return
var resultArr = []
var reg = /<td class=" cal_day [a-z|0-9|_].*">[0-9]{1,2}<\/td>/
for(var i = 0; i < postList.length; i++){
//console.log(postList[i])
resultArr.push(!(reg.test(postList[i])))
}
return resultArr
}
}
// 공통로직
// ajax로 비동기로 쏜다.
var recentMonth = utils.getRecent3Month(new Date().getMonth() + 1)
var result = [new utils.ControlPost(), new utils.ControlPost(), new utils.ControlPost()] //비동기로 쏜거 전부 왔는지 확인.
for(var index = 0; index < 3; index++){
utils.getPost(index, recentMonth[index], result)
}
// 3개월치가 전부 올 때까지 기다린다. interval로 체크하며 기다린다.
var postListInfo = [] //최종적으로 최근 3개월의 포스팅여부를 가져올 배열입니다! PostListData배열입니다.
var ckGaInterval = setInterval(function(){
// 3개월치가 전부 왔당!
if(result[0]['status'] && result[1]['status'] && result[2]['status']){
for(var index = 0; index < 3; index++){
var rawPost = utils.getPostInfo(result[index]['post'])
postListInfo.push(new utils.PostListData(result[index]['month'], utils.getPostingDay(rawPost)))
}
/* 결과를 가지고 처리할 로직*/
console.log(postListInfo)
/* 결과를 가지고 처리할 로직*/
clearInterval(ckGaInterval)
}
}, 1000);
//10초동안 안끝나면 그냥 얼레벌레 끝..
setTimeout(function(){
clearInterval(ckGaInterval);
}, 10000);
})()
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.line{
float: left;
display: inline-block;
display: grid;
grid-template-rows: 7;
grid-template-columns: 1;
margin-right: 5px
}
.line span{
display: inline-block;
width: 15px;
height: 15px;
margin-bottom: 5px;
border:1px solid #eaeaea;
}
</style>
</head>
<body>
<div class=lineWrap>
<div class="line">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="line">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script>
</script>
</html>'Today I learned' 카테고리의 다른 글
| 2021 05 04 - 이슈 수정을 위한 infinite scroll 연구 (1) | 2021.05.04 |
|---|---|
| 2021 05 03 - openssl_conf 환경변수는 openssl.cnf파일명까지 작성해 줘야 한다. (0) | 2021.05.03 |
| 2021 학습목록 (0) | 2021.04.29 |
| 2021 04 28 - 비동기로 외부 라이브러리가 올라올때까지 기다린후, 최초 1회 실행하기 (0) | 2021.04.28 |
| 2021 04 23 - sqlBooster JOIN JOIN JOIN (0) | 2021.04.23 |
댓글