이 팁을 작성하게 된 이유는 최근 제 글들 읽어보시면....
api에서 데이터 가져오는 동안 컨텐츠 로딩이 느려지는 것과 데이터 갱신의 간격을 조금 짧게 하여 최신 커밋이 있는지 궁금한 경우에 최신 정보를 제공하기 위해 js 방식으로 적용해 보았습니다.
그런데 단순히 ajax로 데이터 처리만 했을 경우로 해결이 안되는 이유 하나가
api 요청 횟수 제한이 클라이언트 당 시간당 60회 입니다.
따라서 한번 받아온 데이터를 저장해서 재활용하지 않으면 경우에 따라서 방문자가 의도치 않게 정보 제공을 받지 못하는 경우가 생겨 계산상 1분의 간격으로 가져온다면 한시간에 60회를 만족 할 수 있습니다.
js에 추가로 쿠키를 적용해서 쿠키가 있다면 그 값을 사용해 보도록 해봤습니다.
참고로 전 개발자가 아니라서 오류나 잘못된 점이 있을 지도 모르니 발견되면 수정하겠습니다.
https://xetown.com/point_contents/1436352
위 자료 이야기 입니다.
해당 자료의 php 파일에서 api 에 요청하는 부분을 모두 제거합니다.
스킨을 처리하는 부분만 남게 될 것 입니다.
첨부된 파일을 skin/default 경로에 업로드 합니다.
스킨 파일 index.html 파일에서 첨부한 js를 로드해주는 코드를 넣어줍니다.
<load target="api.js" />
이렇게 하면 js에 의해 데이터가 처리 됩니다.
jQuery(function($){
var getGit_latestDate_master = function () {
if(getCookie('lasttime_master')){
var lasttime_master = getCookie('lasttime_master');
$('#download > #master > a > time').text(lasttime_master);
}
else {
$.ajax({
url : 'https://api.github.com/repos/rhymix/rhymix/git/refs/heads/master',
dataType : "json",
success : function ( data1 ) {
$.ajax({
url : data1.object.url,
dataType : "json",
success : function ( data2 ) {
var date = new Date(data2.committer.date);
var month = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
var day = (date.getDate() < 10 ? '0' : '') + date.getDate();
var hour = (date.getHours() < 10 ? '0' : '') + date.getHours();
var minute = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
var lasttime_master =(date.getFullYear() + '/' + month + '/' + day + ' ' + hour + ':' + minute);
setCookie('lasttime_master', lasttime_master, new Date(Date.now() + 259200));
$('#download > #master > a > time').text(lasttime_master);
}
});
}
});
};
};
var getGit_latestDate_develop = function () {
if(getCookie('lasttime_develop')){
var lasttime_develop = getCookie('lasttime_develop');
$('#download > #develop > a > time').text(lasttime_develop);
}
else {
$.ajax({
url : 'https://api.github.com/repos/rhymix/rhymix/git/refs/heads/develop',
dataType : "json",
success : function ( data3 ) {
$.ajax({
url : data3.object.url,
dataType : "json",
success : function ( data4 ) {
var date = new Date(data4.committer.date);
var month = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
var day = (date.getDate() < 10 ? '0' : '') + date.getDate();
var hour = (date.getHours() < 10 ? '0' : '') + date.getHours();
var minute = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
var lasttime_develop =(date.getFullYear() + '/' + month + '/' + day + ' ' + hour + ':' + minute);
setCookie('lasttime_develop', lasttime_develop, new Date(Date.now() + 259200));
$('#download > #develop > a > time').text(lasttime_develop);
}
});
}
});
};
};
var getGit_latestTag = function () {
if(getCookie('lastver')){
var lastver = getCookie('lastver');
$('#download > #master > a > .version').text(lastver);
}
else {
$.ajax({
url : 'https://api.github.com/repos/rhymix/rhymix/tags',
dataType : "json",
success : function ( data ) {
var lastver =('v' + data[0].name);
setCookie('lastver', lastver, new Date(Date.now() + 259200));
$('#download > #master > a > .version').text(lastver);
}
});
};
};
$( document ).ready(function() {
getGit_latestTag();
getGit_latestDate_master();
getGit_latestDate_develop();
});
});
쿠키유지시간이 3분 정도 될 겁니다.
