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

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

이번 웹페이지 기획은 네이버, 다음, 카카오페이지 등의 그날 나온 웹툰들을 모두 모아 한꺼번에 보고자 시작하였다. 그런데 하다보니 다음과 카카오페이지는 자바스크립트를 통해 각각의 객체를 불러오는거 같았다. 그래서 소스를 긁어오지 못하였다. 이부분은 버전 2 나 추후 추가할 예정이다. 이렇게 네이버만 새로운것이 나오니 허전하여서 내가 자주보는 목록을 추가하여 바로바로 볼 수 있게 하자는 생각이 들었다. 하지만 여기서도 문제점이 지정한 목록들을 저장 할 수 있는 곳이 없어서 새로고침을 하면 목록이 다 없어졌다. 이를 위해서 쿠키나 세선, 데이터베이스등을 이용할 예정이다. 이것도 버전 2 부터 진행 할 것이다. 전체적인 틀을보면 node.js를 통해 네이버의 전체웹툰 목록과 그날 나온 웹툰들을 목록을 JSON..

HTML 포맷 만들기

이런 느낌으로 만들고자 한다. 맨위에는 내가 보고싶은 웹툰들을 선택하는 곳이다. 처음 중식이 있는 부분은 네이버, 다음, 카카오페이지 등 홈페이지를 선택하고 뒤에 선택부분에 각각의 웹툰을 선택한다. 클릭부분에서 웹툰을 하나씩 추가한다. 삭제버튼도 하나 만들 예정이다. 한식 중식 일식 양식 위의 소스는 맨 윗부분 웹툰을 선택하는 select부분이다.예제는 한식,중식 을 예제로 만들었다. 지금까지 한것은 json포맷으로 업데이트 된것 받아오기, html틀 약간을 하였고이제 json 포맷과 html을 연결하는 부분을 해보자 한다.

웹툰 스크래핑 2

저번에 한것을 기준으로 몇가지 기능을 추가하였다.첫번째로 시간을 입력받아서 요일별 페이지로 들어가 업데이트 된 목록들을 불러왔다.네이버 같은 경우는 전날 밤 11시부터 올라오기 시작하므로 기준시간에서 1시간을 더하였다. 그리고 다음이나 카카오페이지의 웹툰같은경우는 소스코드 보기에서 목록들의 내용이 나오질 않았다. 그래서 이부분은 좀더 고민해봐야 할것 같다. 그리고 데이터를 JSON포맷에 맞게 출력하도록 하였다. console.log를 통하여 출력을 되지만 많이 부족한 점이 많아서 이부분또한 앞으로 고쳐갈 것이다. ///////////// 요일 전체에서 받아오는 것 var request = require('request');var cheerio = require('cheerio'); var days = [..

네이버 웹툰 업데이트 된것 제목 긁어오기

이번에는 앞의 예제를 통하여 네이버 웹툰에 업데이트된것들 제목을 긁어보았다. 일단 업데이트 이미지의 테그를 확인하였다. 이 테그가 업데이트 이다. 클래스 네임이 ico_updt를 포함하는 thumb클래스의 다음 태그에 제목과 링크가 있어서 그걸 사용하였다. ///////////// 요일 전체에서 받아오는 것 var request = require('request');var cheerio = require('cheerio'); var url = "http://comic.naver.com/webtoon/weekday.nhn"; request(url, function(err, res, html){ if(!err){ var $ = cheerio.load(html); $(".thumb").has('.ico_upd..

cheerio, request를 활용한 스크래핑 맛보기

이번에는 간단한 예제로 제 블로그의 전체보기에서 제목을 받아오는 예제를 해보았습니다. 1,2 번째줄은 request와 cheerio를 사용하겠다고 선언해주는 부분입니다.C로치면 include와 비슷한 부분입니다. 그리고 원하는 사이트의 url주소를 변수에 저장해놓고 request() 로 소스코드를 받습니다. 뒤에 html 변수에 소스코드가 저장되게 됩니다. 중간 .each부분은 jQuery와 비슷한데 클래스네임 tit의 자식 태그 a 를 각각 하나씩 돌아다니는 것입니다. link.text는 내용을 리턴해주고 .attr('href')는 값을 리턴합니다. 이 사진은 결과 출력 화면입니다. console.log를 이용하여 확인하였습니다.

JSON 포맷 형식

JSON 은 데이터 교환을 손쉽고 통합된 방법으로 하기위한 포맷 형식이다. 서로 다른 시스템간에 객체를 교환하기 좋다. 기존에는 XML이 대부분 사용되었지만 더 간편하고 직관적인라는 이유로 JSON을 선호하고있다. 속성:값 형식으로 이루어져있다. 자료형으로는 수, 문자열, Boolean, 배열, 객체, null이 있다. 수는 정수(1,-4,0,26 ...) 와 실수 고정소수점 표기법(3.14, -22.85...)와 실수 부동소수점 표기법(1.4e-8, 866.55E+10 ...)이 존재한다. 문자열은 항상 큰 따음표로 묶어야하고 유니코드 문자들이 나열된다. 배열은 대괄호로 나타낸다. 배열의 각 소요는 기본자료형이나 객체, 배열이 올 수 있다. 각 요소들은 쉼표로 구분된다. 객체는 이름:값 쌍의 집합으로 ..

Node.js 설치

일단 Node.js를 설치해보자 개발환경은 window7 64비트이다. https://nodejs.org/en/공식 홈페이지에 들어가면 바로 다운로드 할 수있다. 안정적인 버전인 4.2.6을 다운받았다. 넥스트 쭉 누르면서 설치하면된다. npm까지 동시에 설치된다.스크래핑을 위해서는 request와 cheerio 라이브러리가 많이 도움되므로 그것을 설치한다. 윈도우+r 을 눌러 cmd 를 입력하면 명령어 프롬프트 창을 바로 띄울수 있다.npm install request cheerio를 하면 바로 설치된다.

프로젝트 소개

이번에 6개월간 교육을 들으면서 조금만한 프로젝트들을 해보려고한다. 첫번째로 네이버나 다음에서 내가보는 웹툰들을 들고와서 나만의 웹툰 목록을 만드는 것이다. 웹페이지 내용을 긁어오는 스크래핑 기술과 html을 간단히 만들 수 잇는 기술만 있으면 쉽게 완성 할 수 있을것 같다. Node.js로 스크래핑을 하고 JSON포맷으로 변경 후 HTML에서 JSON포맷을 이용하여 목록을 출력하고자 한다.