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 으로 만드는 만화 사이트 #6

일단 이 만화세상이라는 부분을 바꾸고 싶다. 이부분이 현재 페이지에 맞게 동적으로 바뀌었으면 좋겠다. 이걸 하기 위해서는 Angular 의 scope 범위에 대해서 알아야 한다. 현재 우리들은 이런 식의 scope범위가 설정 되어 었다. RootScope는 언제나 모든 scope의 제일 최상위에 있는 scope이다. 우리는 항상 App이라는 controller 곳에서 사이드바나 fab이 사라지고 지워지는 작업을 해왔다. 이 AppController은 index.html의 body부분에 설정되어 있다….

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

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

Google Inbox Design #8

이미 다 한뒤에 쓰는 #8 입니다. 일단 #8 에서는 하면서 제가 못했던것이나 그 외에 하고 싶었던 말들을 쓰겠습니다. Bootstrap에 대해서 이번에 저는 Bootstrap을 사용하지 않았는데요. 일단 여러가지 이유가 있습니다. 그전에 Bootstrap이 정확하게 무엇인지 부터 알아야 하는데요. Bootstrap은 간단하게 디자인 라이브러리 입니다. 이 부트스트랩은 css와 jquey로 이루어져 있지요. 일단 전에도 말했지만 angular을 쓰면서 jquery 쓰는것 좋지 않습니다….

Google Inbox Design 만들기 #7

이번에는 반응형 웹 디자인을 하도록 하자. 깃헙 google Inbox도 웹에서 핸드폰크기까지의 반응형디자인을 구현하지 않았다.(핸드폰에서 google inbox자체가 안들어 가진다. 바로 앱스토어나 플레이 스토어 등으로 넘어가서 어플설치를 권유한다. 물론 이게 맞는거다 / 여러 이유가 잇지만 어플이 있다면 무조건 어플로 넘어가게 하는게 좋다. 대부분의 이용자는 어플을 설치하라고 할 시 대부분 설치하며 또한 어플을 설치하면 훨씬더 이용률이 높게 된다….

Google Inbox Design 만들기 #6

github 이번에는 사진으로 보여주기에는 바뀐것이 없어서 그냥 쓴다. 6에서는 애니메이션과 html코드를 모듈화 하였다. 일단 index.html를 저렇게 수정하였다. 보면 헤더부분, 메인부분, 별을 누르면 나오는 별창(?) 부분, 그리고 fab부분으로 나누었다. 이렇게 그리고 각각을 다시 html 파일로 만들었다. 이렇게 정리해 놓으면 나중에 어느 부분을 수정할 때 훨씬더 찾기 쉽고 또한 만약 ng-include main.html 부분을 ng-view로 수정하여 SPA(single page applicaton)을…

Google Inbox Design 만들기 #5

#5에서 가장 어려웠던 점은 메일을 클릭시 그 메일을 보여주는 부분이였다. 이걸 Modal이나 새창등으로 보여주어도 되지만 Inbox에서는 메일 리스트 안에서 그걸 보여준다. 이런식으로 말이다. 이부분을 위해서 일단 컨텐츠는 3부분으로 다시 나뉘어 져야 한다는걸 알수있다. 클릭시 남은위 의 부분의 메일박스, 클릭했을때 보이는 메일내용박스, 그리고 밑의 메일 박스이다. 지금까지는 메일박스를 1개 사용하였지만 이부분에서는 최소 2개를 사용해야한다.(물론 1개로 할수있는…

Google Inbox Design 만들기 #4

사이드부분을 바꾸었다. 기본적으로 icon들도 좀 추고 하고 마테리얼 아이콘 여기서 다운 받을수 있다. svg파일은 수정하면 색깔들도 쉽게 바꿀수 있다.  그리고 사이드바의 버튼의 마진을 0로 하여 버튼들사이에 공백이 없도록 만들었다. 전체적으로 폰트도 바꾸니 제법 inbox다워졌다. 헤더부분을 바꾸었다. 돋보기 아이콘을 추가 하고 적당히 패딩을 주어서 나머지 부분은 검색인풋으로 주었다.  #5 부터는 angular를 적당히 추가하여 페이지에 생기를 불어넣어 보겠다.

Google Inbox Design 만들기 #3

툴바부분의 버튼과 찾기창을 추가하였다. 그리고 mail-box클래스의 div에 flex를 삭제함과 md-list의 padding을 0로 함으로서 메일박스의 높이가 컨텐츠 크기에 맞추어졌다. 슬슬이제 제법 inbox에 꽤 가까운 모습을 보이고 있다. #4에서는 사이드바에 버튼을 추가하고 content 부분에 좀더 디테일을 살리겠다.

Google Inbox Design 만들기 #2

#2에서는 배경색을 바꾸고 그럴듯하게 카드형태를 만들고 깊이감을 주었다. html에서는 list-item을 추가하고 전체 contents를 mailbox로 만들었다. #3에서 mailbox를 여러개 만든다면 좀더 카드느낌이 잘 나고 컨텐츠 분할이 잘될 것으로 생각된다. md-whiteframe은 z축의 깊이감을 준다.  또한 md-list-item은 동그란 아이콘 사진을 지원한다. 그리고 emails의 테스트 데이터를 만들어서 html에서 ng-repeat으로 반복하였다. 테스트를 해보자. 그리고 nav사이드는 200px로 width를 고정하였다.또한 content와 nav의…

Google Inbox Design 만들기 #1

일단 angular material 을 공부하기 위해 material 디자인을 잘 따라한 Inbox을 따라해 보기로 한다. 인박스는 대략 이런 형태로 크게 3부분으로 나눌수 있다. 위의 헤더바, 사이드바, 그리고 컨텐츠 부분이다. 그러면 대충 이러한 형태를 만들도록 해보자. 기본적으로 디자인은 크게 만들고 점점 세분화 되게 만드는게 편하다. 일단 대충 3부분으로 나누었다. (여기까지가 divide-setion commit) 여기까지는 단순히 헤더를 만들고, 나타나고…

material Angular flex

bootstrap의 grid 시스템과 달리 material angular 는 flex box라는 것으로 grid를 한다. bootstrap은 12개의 박스로 나누어서 gridsystem을 만들지만 material angular는 percent로 박스를 나누어서 움직인다. 마테리얼 홈페이지  마테리얼 그리드 홈페이지 여기서 이리저리 움직이면 어떠한 방식으로 움직이는지 바로 감이 올것이다. 또한 sm, gt-sm, md, gt-md, lg, gt-lg로 나누어서 하기 때문에 bootstrap보다 좀더 세분화된 반응형 디자인을 만들수 있다. 그리고…