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

Mean Stack으로 뭐 만들까 하다가 그냥 다른 만화사이트에서 크롤링해서 그걸 보여주는 만화 사이트를 만들기로 결정.

크롤링 연습을 위해서 만드는 사이트 이기 때문에 크롤링을 제대로 해보자는 의미에서 만화블로그 3개를 크롤링해서 저장한 다음 보여주는 사이트를 하기로 한다. 첫번째는 그냥 크롤링하면 되는사이트. 2번째는 회원에게만 보여주는 사이트(크롤링을 위해 세션함께 보내주는 요청이 필요하다) 3번째는 JS로 페이지가 만들어 지는 사이트(즉 일반적인 크롤링에선 js로 인한 요청을 실행하지 않기때문에 no-js가 나오게 된다. 결국 seleminum같은 test도구나 phantomJS등을 사용해야 하지만 어떻게 해야 할지 잘 모르지만 일단 해보기로 하자.)

암튼 이제 무슨기능이 필요할지 생각해 보자.

  1. 다른 사이트에서 만화를 긁어와서 저장하는 기능 (이게 전부다. 이걸 어케 만들수 있을지만 생각하자)
  2. 유저 기능

정도 일려나? 혹시 더 필요한 기능이 잇으면 그때 그때 추가하도록 하자. 그러면 일단 디자인을 생각해 보자. 디자인은 우리가 만들어 놨던 Inbox 디자인을 차용 변형 하도록 하자. 적당히 header에는 유저쪽 기능? sidebar에는 목록. main부분에서 서브목록뷰나 만화를 보이게 하자.

일단 DB모델을 생각해 보자. 일단 나중에 추가해도 좋으니 대충만 생각하자 뭐가 필요할까?

  1. 업데이트 날짜(Date)
  2. 타이틀(String)
  3. 내용(아마 사진파일의 url의 string Array가 될것이라고 예상)
  4. Comments(Object Array가 될것이라고 예상, Object 1개가 comment)
  5. index(Number) 필요한 이유는 나중에 말하겠다.

정도가 될것같다. 사실 node가 크롤링에 적합한 언어는 아니다. node의 특징 중 가장 중요한 특징인 asynchronous(비동기식)이다. 혹시 node크롤링을 한번 해본사람은 알겟지만 일반적인 언어는

파일을 1개 불러옴 -> 파일 저장 -> 다음파일 불러옴 -> 저장 -> 그다음파일 ->… 이지만

node는

모든것이 비동기식이기 때문에

모든파일 불러옴 -> 빨리 불러오는순대로 저장. 으로 저장이 됩니다. 즉 이걸 막기 위해서는 파일을 불러오는것을 1개끝나면 다시 불러오는 synchronous으로 억지로 만들던지(promise나 재귀등을 사용) 또는 파일을 불러올때 callback함수에 불렀을때의 index를 넘겨주어서 저장되는 순서는 달라도 나중에 index로 재배열 했을때는 알맞게 불러오는 방법이 있습니다. 이부분에 대해서는 나중에 크롤링을 할 때 다시 한번 짚고 넘어가도록 합시다.

일단 모델을 만들고, 디자인은 대충 잡고, 어떤식으로 굴러갈까를 대충 예상했으면 다음편에는 실전으로 넘어갑시다.

Advertisements

One Comment Add yours

답글 남기기

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

WordPress.com 로고

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

Google+ photo

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중