Mean Stack 으로 만드는 만화 사이트 #7

#7 에서는 minitoon.net 이라는 사이트의 만화를 크롤링 해보겠다.

스크린샷 2015-12-09 오후 10.21.02.png

일반적으로 사이트의 로그인 유지는 쿠키or 세션을 쓴다. 이 부분에 대한 원리는 좋은 글들이 많으니 검색하여 알아보도록 하자. 이 사이트에서 로그인을 유지 시키는 세션은 PHPSESSID라는 쿠키이다. 이 쿠키를 지우고 새로고침을 하면 로그아웃이 되어 버린다.(쿠키를 확인하는 방법은 웹브라우저에서 개발자 도구를 켜서 resource를 보거나 또는 크롬 확장기능 중에서 editthiscookie 라는 것을 깔아서 이용하는 방법등 여러 방법이 있지만 나는 editthiscookie라는 확장기능을 깔아서 사용하였다.)

그……그……그….. 그런데 문제가 생겼다. 무슨 문제가 생겼을까…… 그렇다 스크린샷 2015-12-09 오후 10.30.53.png

라고 적어놔서 내가 이 사이트를 고른것인데 로그인 안해도 만화가 잘만 보인다….. 음… 이러니 지금 로그인을 해서 크롤링을 하는지 안하고 크롤링을 하는지 확인이 안된다…. 그냥 이번엔 로그인을 안하고 아까와 전과 같은 방식으로 크롤링을 하자… 미안하다. 내가 상상도 못한 상황이였다. 사실 로그인 한 다음에 크롤링 하는건 그렇게 중요한게 아니다. 별로 쓸모 없는기술이다. 미쳐서 헛소리를 자꾸하는 것 같다.  이 부분은 나중에 다른 기회가 생기면 하도록 하자. 그러면 일단 전과 같은 방식으로 해보자. 스크린샷 2015-12-09 오후 10.42.18

여기는 만화 리스트에 분류가 나와있다. (개그, 요리, 스포츠 ….) 이런 좋은 정보를 안쓸 수 없다. 잘 써보자. 이건 manhwaList 에 추가할 요소 일 것 같다. tag 라는 요소를 추가해보자. 그러면 이제 적당히 만들어 보자. 그리고 thumbnail도 있다. 이것은 photo라는 것으로 추가하자.

이번에는 가져와야 될 정보가 단순히 a 태그만의 정보가 아니다. 여러가지 정보들이 필요하다. 이 정보들을 어떻게 가져와야 할까?

#gall_ul ul.gall_con

라는 선택자들에 값이 1개씩 들어있다. 하지만 여기에 여러 정보들이 들어있다. 이제 어떻게 정보들을 나눌까?

스크린샷 2015-12-09 오후 11.40.04

testCode를 만들었다. 이렇게 만들어 두고 이 파일을 node로 실행한다. 서버는 보통 debug가 잘 안되지만 일반적인 node 라면 debug를 간편하게 할 수 있다.(atom 이나 brackets 등은 debug를 지원한다. 좋은 툴을 쓰면 개발시간이 단축된다)

스크린샷 2015-12-09 오후 11.40.20

크롤링은 결국 노가다 이다. 이렇게 한개한개 잘 분해하면서 찾아보면 내가 원하는 값을 찾을 수 있다.

스크린샷 2015-12-10 오전 12.26.07.png

되었다. 우리는 urlToJsonList_Mini를 완성했다. 이제 이 정보로 list들을 저장하고 다시 list의 정보를 바탕으로 post를 저장하면 된다.

git 7-1

이제 urlToJsonPost을 만들어 보자. 같은 방식으로 하면 되지만 지금까지는 cheerio-httpcli만 쓴거 같으니 정석적으로 request와 cheerio를 써보자. 간단하다. 방법은 똑같으니 보면 알것이다. 다만 request를 따로 주고 cheerio를 따로 설정하는 것이다. 이 방법의 장점은 request를 쓴다는 것이다. request는 공식홈페이지를 보면 알 수 있지만 많은 설정을 줄 수 있다.

스크린샷 2015-12-11 오후 3.16.47.png

일단 이렇게 하면 완료이다. 이제 이걸 바탕으로 저장을 해보자.

postSave다

스크린샷 2015-12-11 오후 3.18.10.png

listSave다

스크린샷 2015-12-11 오후 3.18.38.png

이제 이걸 app.js에서 테스트를 해보자

스크린샷 2015-12-11 오후 3.22.31.png

module.exports = app; 전에 이 코드를 넣으면 리스트들이 들어가고 나루토와 블리치가 들어갈 것이다. 그뒤에 전과 같이 list 와 view 페이지와 controller을 만들어서 적당히 실행시켜 주면 보여질 것이다.

일단 그전에 나는 코드가 복잡해 지는 것 같아서 angular부분과 api부분을 모듈화 하였다.

일단 route의 api의 부분을 스크린샷 2015-12-11 오후 4.11.53.png

이렇게 바꾸었다.  그 뒤에 zang_api.js 파일을 이렇게 해주면 모듈화가완료된다. mini_api.js도 같은 방법으로 하면된다.

스크린샷 2015-12-11 오후 4.12.14.png

angular부분의 모듈화를 하기 위해 일단 html 부분부터 이렇게 만들었다.

스크린샷 2015-12-11 오후 3.24.51.png

이번 포스팅이 끝나면 되어있는 상태이다. 나는 mini라는 폴더를 만들고 zang이라는 폴더를 만들었다. 그뒤에 각각의 list와 sublist, view가 들어 있게 하였다. 그리고

스크린샷 2015-12-11 오후 3.25.57.png

js 폴더도 angularApp이라는 main이 있고 각각의 부분을 담당하는 mini.js zang.js을 만들었다.

스크린샷 2015-12-11 오후 3.26.48.png

angularApp.js에는 전체적인 설정등만 남고 zang, mini 만화등에 대한 컨트롤러나 route 설정부분은 각각의 파일에서 하도록 만들었다. 첫째줄의 module부분에서 ‘MeanManhwa’다음의 배열을 보면 ‘zang’과 ‘mini’가 들어있다. 이건 zang과 mini라는 모듈에 대해 의존하겠다는 의미이다. 그러면 우리는 zang.js라는 파일에 zang이라는 모듈을 만들어서 그곳에서 처리나 설정을 하도록 만들면 된다.

스크린샷 2015-12-11 오후 3.29.24.png스크린샷 2015-12-11 오후 3.29.37.png

이런식으로 zang.js을 만들었다. 처음에 모듈명을 zang으로 하였다. 그뒤에 우리가 만들었던 controller나 설정등을 이쪽파일로 옮겼다. 마찬가지로 mini라는 파일을 만들고 똑같이 하였다.  그리고 이 파일들을 불러들이기 위해 index.html에서는 스크린샷 2015-12-11 오후 3.31.18.png

이파일들을 추가해 주었다. 이러면 모듈화가 된다. 전체적으로 어느 부분에 문제가 생겼을시 더욱 찾기 편하고, 또는 나중에 이것을 다른곳에 추가할경우(이번엔 없지만 혹시 자신이 library등을 만든다면) 더욱 쉽게 추가할 수 있을 것이다. 그뒤에 사이드바의 아이콘을 바꾸는 자잘한 디자인을 변경하였다.  이제 준비는 끝났다. 이제 실행을 해보자. 제대로 2사이트의 만화들이 나올것이다. 무언가 부족하다. 그렇다. minitoon의 만화 리스트는 사진이 있었다. 우리는 그것을 추가시키지 않은것 같다. sublist들에서 한것처럼 잘 추가해 보자. 그러면 만족스러운 사이트가 나올것이다.

이제 우리는 zangsisi.net 이라는 사이트와 minitoon.net 이라는 사이트의 미러 사이트를 만들었다. #8에서는 update 부분등 디자인을 좀 더 하도록 하겠다. (이 포스팅은 도대체 뭘 하느라 2일 이나 걸렸는지 모르겠다. ㅠㅠ 하루 1포스팅이 깨진것 같다. ㅠㅠ)

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중