JSON 파싱으로 그날나온 웹툰 모움 및 즐겨찾기

미니 프로젝트/나만의 웹툰 목록 만들기

JSON 파싱으로 그날나온 웹툰 모움 및 즐겨찾기

벌게진눈 2016. 2. 5. 09:19

이번 웹페이지 기획은 네이버, 다음, 카카오페이지 등의 그날 나온 웹툰들을 모두 모아 한꺼번에 보고자 시작하였다. 그런데 하다보니 다음과 카카오페이지는 자바스크립트를 통해 각각의 객체를 불러오는거 같았다. 그래서 소스를 긁어오지 못하였다. 이부분은 버전 2 나 추후 추가할 예정이다.

이렇게 네이버만 새로운것이 나오니 허전하여서 내가 자주보는 목록을 추가하여 바로바로 볼 수 있게 하자는 생각이 들었다. 하지만 여기서도 문제점이 지정한 목록들을 저장 할 수 있는 곳이 없어서 새로고침을 하면 목록이 다 없어졌다. 이를 위해서 쿠키나 세선, 데이터베이스등을 이용할 예정이다. 이것도 버전 2 부터 진행 할 것이다.

전체적인 틀을보면 node.js를 통해 네이버의 전체웹툰 목록과 그날 나온 웹툰들을 목록을 JSON포맷의 파일로 만들어낸다. 그러면 Jquery를 이용하여 json 파싱을 하여 화면에 보여지게된다.

1. 그날 나온 웹툰을 JSON 파일로 만들어주는 main.js

var request = require('request');

var cheerio = require('cheerio');

var fs = require('fs');

var days = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];

function choiceDay(){

var today = new Date();

var naverTime = today.getHours()+1;

today.setHours(naverTime);

var day = days[today.getDay()];

return day;

}

var dayUrl = choiceDay();

var totalWebtoon = '{ "webtoonJson":[';

var naverUrl = "http://comic.naver.com/webtoon/weekdayList.nhn?week=" + dayUrl;

//var duamUrl = "http://webtoon.daum.net/#day=fri&tab=day";

request(naverUrl, function(err, res, html){

if(!err){

var $ = cheerio.load(html);

$(".thumb").has('.ico_updt').each(function(i) {

var hrefTitleLink = $(this).children();

var srcLink = $(this).children().children().first();

var artistLink = $(this).next().children().eq(1).children();

var addr = hrefTitleLink.attr('href');

var title = hrefTitleLink.attr("title");

var img = srcLink.attr('src');

var artist = artistLink.text();

var webtoonObj = {

title : title,

artist : artist,

imgUrl : img,

url : 'http://comic.naver.com'+addr

};

var webtoonStr = JSON.stringify(webtoonObj);

if(i!=0)

totalWebtoon +=',';

totalWebtoon += webtoonStr;

});

totalWebtoon += '] }'

console.log(totalWebtoon);

fs.writeFile('./results.json', totalWebtoon, function(err) {

if(err) throw err;

console.log('File write completed');

});

}

});

2. 웹툰의 전체 목록을 json파일로 만들어주는 totalListGet.js

var request = require('request');

var cheerio = require('cheerio');

var fs = require('fs');

var totalWebtoon = '{ "webtoonListJson":[';

var naverUrl = "http://comic.naver.com/webtoon/creation.nhn";

request(naverUrl, function(err, res, html){

if(!err){

var $ = cheerio.load(html);

$('.section .thumb').each(function(i) {

var hrefTitleLink = $(this).children();

var srcLink = $(this).children().children().first();

var addr = hrefTitleLink.attr('href');

var title = hrefTitleLink.attr("title");

var img = srcLink.attr('src');

var webtoonObj = {

title : title,

imgUrl : img,

url : 'http://comic.naver.com'+addr

};

var webtoonStr = JSON.stringify(webtoonObj);

if(i!=0)

totalWebtoon +=',';

totalWebtoon += webtoonStr;

});

totalWebtoon += '] }'

console.log(totalWebtoon);

fs.writeFile('./webtoonList.json', totalWebtoon, function(err) {

if(err) throw err;

console.log('File write completed');

});

}

});

3. 화면에 보여주는 HTML 및 JQuery

<!DOCTYPE html>

<html>

<head>

<style>

.select {

width: 200px;

}

.tableTd {

width: 141;

height: 24;

border: 1px solid #ccc;

}

.txc-table {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

width: 80%;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

margin: 20px 10px;

}

#copyTag {

visibility: hidden;

}

</style>

<title>Insert title here</title>

var f_selbox = [ '네이버웹툰', '다음웹툰', '카카오페이지웹툰' ];

var s_selbox = [ [],

[ '트레이스', '레드스톰', '무장' ], [ '카카오페이지1', '카카오페이지2', '카카오페이지3' ],

];

//새로나온 신작을 올리기 위한 임시 객체

var temp = {

"title" : "",

"artist" : "",

"imgUrl" : "",

"url" : ""

}

//즐겨찾기한 작품을 올리기 위한 임시 객체

var tempT = {

"title" : "",

"imgUrl" : "",

"url" : ""

}

$(function() {

var selectBrand = $('#brand');

var trCount = -1;

var tdCount = 0;

var currentTr;

var currentTd;

var webtoonBookmark = [];

var webtoonBookmarkCount = -1;

var makeBookmarkTable = 1;

//네이버 제목 리스트 받아오기

$.get('webtoonList.json', function(data){

var webtoonTotalList = data.webtoonListJson; //전체웹툰 JSON파일을 webtoonTotalList에 저장

for(var i = 0; i<webtoonTotalList.length; i++ ){

var webtoonTotal = webtoonTotalList[i]; // 순서별로 하나씩 꺼내와서webtoonTotal에 저장

s_selbox[0][i] = webtoonTotal.title; //각 객체의 제목을 네이버웹툰 목록으로 저장

}

//두번재 셀렉트 초기화

for(var i = 0; i < s_selbox[0].length ; i++){

$('#sub_brand').append('<option value="'+ s_selbox[0][i] +'">' + s_selbox[0][i] + '</option>')

}

//select 2중 설정

selectBrand.change(function() {

var selectValue = $('#brand').val();

var subSelectValue = $('#sub_brand');

subSelectValue.children().remove();

subSelectValue.append('<option value="1">선택</option>');

for (var j = 0; j < f_selbox.length; j++) {

if (selectValue == f_selbox[j]) {

for (var i = 0; i < s_selbox[j].length; i++)

subSelectValue.append('<option value="1">' + s_selbox[j][i] + '</option>');

}

});

//추가버튼

$('#inputBtn').click(function(){

tdCount = 0;

trCount = 0;

webtoonBookmarkCount++;

webtoonBookmark[webtoonBookmarkCount] = $('#sub_brand').val();

if (webtoonBookmarkCount % 3 == 0) {

$('#bookmarkWebtoontbody').append(

$('#copyTag').children().children().clone());

}

var webtoonTotalList = data.webtoonListJson;

for(var k = 0; k<webtoonBookmark.length; k++){ //즐겨찾기한 웹툰의 수만큼 반복

for(var i = 0; i<webtoonTotalList.length; i++ ){ //웹툰 전체 리스트 반복

var webtoonTotal = webtoonTotalList[i]; //각 객체를 webtoonTotal 에 저장

if(webtoonBookmark[k] == webtoonTotal.title){

for ( var j in webtoonTotal) {

tempT[j] = webtoonTotal[j];

}

if (tdCount % 3 == 0) {

if(tdCount!=0)

trCount++;

tdCount = 0;

}

currentTr = $('#bookmarkWebtoontbody > tr').eq(trCount).css('visibility',

'visible');

currentTd = currentTr.children().eq(tdCount);

//적용

currentTd.find('.mainImgHref').attr('href', tempT.url);

currentTd.find('.mainImg').attr('src', tempT.imgUrl)

currentTd.find('.mainTitle').text(tempT.title);

currentTd.find('.mainTitle').attr('href', tempT.url);

console.log(tempT);

tdCount++;

}

});

//Json 받아오기

$.get('results.json', function(data) {

var webtoonList = data.webtoonJson;

for (var i = 0; i < webtoonList.length; i++) {

var webtoon = webtoonList[i];

for ( var j in webtoon) {

temp[j] = webtoon[j];

}

if (tdCount % 3 == 0) {

tdCount = 0;

trCount++;

$('#newWebtoonTbody').append(

$('#copyTag').children().children().clone());

}

currentTr = $('#newWebtoonTbody > tr').eq(trCount).css('visibility',

'visible');

currentTd = currentTr.children().eq(tdCount);

//적용

currentTd.find('.mainImgHref').attr('href', temp.url);

currentTd.find('.mainImg').attr('src', temp.imgUrl)

currentTd.find('.mainTitle').text(temp.title);

currentTd.find('.mainTitle').attr('href', temp.url);

currentTd.find('.mainArtist').text(temp.artist);

tdCount++;

}

})

});

</script>

</head>

<body>

<div>

<option value="네이버웹툰">네이버웹툰</option>

<option value="카카오페이지웹툰">카카오페이지웹툰</option>

</select>

</select> <input type="button" value="추가" id="inputBtn"/>

</div>

<div>

즐겨찾기

</div>

</tbody>

</table>

<div>

오늘 나온 웹툰

</div>

</tbody>

</table>

<tbody>

<a href="" class="mainImgHref"><img src="" width="83"

height="90" class="mainImg"> <span class="mask"></span> </a>

</div>

<dl>

<dt>

</dt>

</dd>

</dl>

</td>

<a href="" class="mainImgHref"><img src="" width="83"

height="90" class="mainImg"> <span class="mask"></span> </a>

</div>

<dl>

<dt>

</dt>

</dd>

</dl>

</td>

<a href="" class="mainImgHref"><img src="" width="83"

height="90" class="mainImg"> <span class="mask"></span> </a>

</div>

<dl>

<dt>

</dt>

</dd>

</dl>

</td>

</tr>

</tbody>

</table>

</body>

</html>

4.결과화면

전체 소스 및 네이버 html 소스.zip

저작자표시 비영리 변경금지

'미니 프로젝트 > 나만의 웹툰 목록 만들기' 카테고리의 다른 글

HTML 포맷 만들기 (0)	2016.02.02
웹툰 스크래핑 2 (0)	2016.02.01
네이버 웹툰 업데이트 된것 제목 긁어오기 (0)	2016.01.29
cheerio, request를 활용한 스크래핑 맛보기 (0)	2016.01.28
JSON 포맷 형식 (0)	2016.01.28

현재글JSON 파싱으로 그날나온 웹툰 모움 및 즐겨찾기

레드아이