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

일단 aws의 ID를 만들고 ubuntu 인스턴스를 만듭니다(이것들에 대한 설명은 다른곳에도 잘 나와있으니 검색하여 주시길 바랍니다) 그다음 nginx 설정. 세큐리티 설정을 해주시면 열립니다. 이런거나 , 이런글 , 특히 이글 을 참조하시면 위의 과정을 쉽게 할 수 있습니다. 그후 git을 설치후 git clone을 통해 우리의 소스코드를 가져옵니다(혹시 git을 사용하지 않았다면 지금이라도 설치하고 실행하세요. 버전관리가 편해집니다) 이제 업데이트가 있을때는 git pull을 통해 업데이트를…

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

이번에는 지속적인 업데이트를 하도록 만들겠습니다. 현재는 우리가 서버를 한번 킬때마다 1번 업데이트가 되는 모습입니다. 하지만 우리가 실제로 크롤링 사이트를 만들기 위해서는 지속적으로 크롤링을 하도록 만들어야 합니다. 지속적으로 크롤링을 하지만 또 무작정 너무 많이 하다보면 서버자원도 많이 들고 좋지 않기때문에 적당하게 일정주기 마다 하도록 하면 될 것 같습니다. 그러면 그러기 위한 함수 setInterval을 사용하도록 하겠습니다. 일단…

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

슬슬 이 강좌도 막바지로 가고 있네요. 적당히 routes/api에 maru_api.js를 추가합니다. mini_api.js를 복사한뒤 url과 find부분만 수정하면 됩니다. 이렇게 말이죠. 그 뒤 public/view 안에 있는 mini를 maru라는 폴더를 만들어서 복사합니다.(어차피 똑같기 때문이죠)그뒤 모듈명을 maru로 바꾸고, angularApp에 maru모듈을 추가, index.html에 maru.js를 추가합니다. 그뒤 mini부분을 maru로 적당히 수정. 그 다음 update부분도 적당히 수정하면 완성입니다.(링크부분도 다 적당히 바꿔주세요. 잘모르겠으면 github을…

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

하하하하하하하하하하하하하하…… git commit 9-1까지 썻는데 지워졌네요 하하…. 워드프레스 자동저장은 슬슬 믿을 수가 없네요…. 하…. 다시 처음 부터 쓰고 싶은데 기억이 안나요. 적당히 기억나는 것만 쓰겠습니다. 혹시 이상한 점이 있으면 말씀해주세요. 일단 우리는 marumaru.in이라는 사이트를 크롤링 하고 싶습니다.  이 만화사이트는 목록은 marumaru.in 이라는 사이트에 실제 만화를 보는 창은 http://www.mangaumaru.com/ 에 있습니다. 그런데 이 mangaumaru.com 이라는 사이트는 noscript…

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

나는 업데이트를 추가 할려구 한다. 물론 이미 업데이트를 볼수 있지만 무언가 접근성이 별로 인듯 하다. 접근성을 편하게 해보자. 어떻게 하면 좋을까? Material Tab 이게 괜찮아 보인다. 이걸 이용해 보자. 이걸로 zangsisi, minitoon, 마루마루(나중 추가) 3개의 만화 사이트의 업데이트를 돌아다니면 되게 좋게 될거 같다. 한번 적용해 보자. 우리는 이미 update들만의 json을 돌려주는 url을 만들었다. 그러면 일단 시도를…

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

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

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

오늘은 정말 뭔가 쓰기 싫지만 1일 1포스팅과 1커밋을 위해 씁니다요. 이거라도 해야지. 그러면 일단 sidebar의 버튼들을 바꾸자. 적당히 이름들을 바꾸었다. 이제 저장할때 현재 시간을 저장하기로 하자. 그러면 언제 업데이트가 됬는지 쉽게 알수 있을것 같다. 현재 시간을 저장하는 방법은 2개가 있다. 저장할때 현재 시간을 넣는 방법과, mongoose의 date의 default값을 현재시간으로 설정 하는 방법이다. 이번에는 default값으로 넣어보겠다….

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

벌써 #4다. 내가 이시간에 전공공부를 했으면 아마 못해도 A는 받지 않았을까 싶다. 슬슬 모든글에 헛소리가 들어가는것 같다. 착각이다. 포스팅을 다시 시작하자. 우리가 지금 가지고 있는 데이터가 무엇인지. 무엇을 만들지 다시 한번 확인하도록 하자. 현재 우리는 ManhwaList와 Manhwa를 가지고 있다. 우리가 무엇을 해야하나. 전체 ManhwaList를 보여주는 창. 특정 ManhwaList안에 있는 Manhwa들을 보여주는 창. 특정 Manhwa안에 들어있는…

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

이제 우리는 핵심기능인 크롤링을 어떻게 할수 있을지 알아보자. 전체적인 코드는 깃헙을 참고하자 기본적으로 가장 유명한 cheerio를 사용할려고 한다. cheerio가 무엇인지는 검색하여 보자. 하지만 실제로 크롤링을 하면 cheerio뿐만이 아니라 request, jschardet등을 사용하여야 한다. 하지만 cheerio-httpcli 라는 라이브러리가 있다. 이 라이브러리는 전체적으로 파싱에 필요한 모든것을 알아서 처리해 준다. 그렇기 때문에cheerio-httpcli를 사용하도록 한다. 사용법은 어렵지 않다. 라고 쓴다면…

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

Mean Stack으로 뭐 만들까 하다가 그냥 다른 만화사이트에서 크롤링해서 그걸 보여주는 만화 사이트를 만들기로 결정. 크롤링 연습을 위해서 만드는 사이트 이기 때문에 크롤링을 제대로 해보자는 의미에서 만화블로그 3개를 크롤링해서 저장한 다음 보여주는 사이트를 하기로 한다. 첫번째는 그냥 크롤링하면 되는사이트. 2번째는 회원에게만 보여주는 사이트(크롤링을 위해 세션함께 보내주는 요청이 필요하다) 3번째는 JS로 페이지가 만들어 지는 사이트(즉 일반적인…

고배 해커톤 #4

일단 처음에 app.js 를 보면 위에 모듈을 추가하는 줄이 있습니다. 우리는 angular-routing을 위해 ngRoute,  이미지를 자르기 위해 ngImgCrop, 그리고 material디자인을 사용하기 위해ngMaterial을 사용하였습니다. 아마 나머지는 처음에 쓸려고 했다가 안쓴거 같지만, 혹시모르니 지우지는 말아주세요 ㅠㅠ. 그뒤에는 service가 2개 있습니다. 여기있는 서비스는 되게 기본적인 서비스인데, 서비스는 간단하게 controller에 추가할수 있는 객체라고 생각하면 편하실거 같습니다. 일단 우리는 새…

고베 해커톤 #3

프론트 엔드 route.js 파일을 보시면 알겟지만 우리는 html 파일을 1번만 서버에서 보내줍니다. 그 경우는 ‘/’ 경우 res.sendFile(index.html) 즉 index.html 파일에 웹의 모든 정보가 담겨있습니다. 그러면 index.html 파일을 봅시다. index.html은 크게 4개의 구조로 이루어져 있습니다. header부분 : 이곳은 여러 설정파일이나 라이브러리를 불러드립니다. 위부터 보시면 bootstrap, angular.js, angular-ng-crop, angular-material, custom js/css 등이 있습니다. 물론 빠른속도를 위해 이러한…

고베 해커톤 #2

이제는 이미 만들어진것을 바탕으로 한개한개 분해하여 알아보겠습니다. 그전에 모든 코드는 여기 에 있으니 자유롭게 보시길 바랍니다.   일단 #1에 비해 전체코드소스가 많아졌습니다만 한개한개 잘 보면 절대 어렵지 않으니 잘 보고 따라와 주시길 바랍니다. 로그인 서버쪽을 보시면(server.js) 그리고 config/passport.js var morgan = require(‘morgan’); var cookieParser = require(‘cookie-parser’); var session = require(‘express-session’); var passport = require(‘passport’); require(‘./config/passport’)(passport); . 라는…

고베 해커톤 #1

Mean stack 은 MongoDB, Express, Angular, Node 웹을 만드는 스택을 말합니다. 여기서 Node, Express 는 백엔드를 Angular는 FrontEnd를 담당합니다. 이런 맨처음 파일 구조는  app은 backend를 담당하는 부분 config는 여러 설정, node_module은 node의 라이브러리, public에는 static파일등이 들어가게됩니다. app의 model에는 데이터구조가 들어가게 됩니다. 현재는 post와 user만을 생각했기 때문에 2개밖에 없지만 계속 추가 할수 있습니다. post.js 에는 post데이터에…