인스타그램,트위터 크롤러 :: 1 MEAN stack

MEAN stack/SNS Crawler App 2016. 11. 29. 00:58

이번 개인프로젝트를 웹으로 새로 공부해볼겸 해서 MEAN stack 을 이용해서 간단하게 만들어볼까한다 



우선 MEAN stack 이란 





자세한 설명은 생략 하겠습니다 구글에 검색해보면 무궁무진하게 나와서....


대략적인 구상은 


angular2 를 이용해 원하는 키워드입력을 받아 수집하는 화면UI 를 작성하고 


node,express를 이용해 mongodb 에 저장하는  그림으로 갈예정이다






#Angular2


가장 기본적인 Angular2 의 Hello Angular2 을 찍어볼까한다  hello world가아니라니....


app.component.ts

1
2
3
4
5
6
7
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
 
cs


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
    </style>
 
    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 
    <script> window.autoBootstrap = true; </script>
 
    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
 
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
 
</html>
 
cs


참조 : https://angular.io/docs/ts/latest/quickstart.html


간단한 Hello Angular 를 찍어보는 예제 이다 


공부를 하다보니 특이하게 동작을 하더라 


app.component.ts  

 

안의 내용을 확인해보면  import component 를 통해 componenet 를 불러오고 


1
2
3
4
5
6
 
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
 
cs


@Component를 살펴보면 


selector : 'my-app' 이 보이고 template 내용이보였다


처음에 'my-app' 은 또 어서나온거야 하고 당황했는데  찾아보니 


 index.html 


1
2
3
4
 
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
cs


이쪽에 있더라 


대강 눈치밥으로 돌아가는 것을 보니


index.html 의 <my-app> 부분이 app.component.ts 를 호출하는것으로 보인다


실행결과는 http://plnkr.co/edit/ZYvdJiYxwhdZMx8MmJYj?p=preview&open=app%2Fapp.component.ts 






다음포스팅은 기능의 한부분인 페이지를만들어볼 예정이다


대략적인 구성은 



사용자가 원하는 키워드 입력시 수집내용을 입력하고 등록을 누르고 그후 목록을 보여주고 엑셀로 출력까지 해주는  페이지를 만드려한다

'MEAN stack > SNS Crawler App' 카테고리의 다른 글

CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
인스타그램,트위터 크롤러 :: 2 UI  (4) 2016.11.29
인스타그램,트위터 크롤러 :: 0 시작  (0) 2016.11.27
WRITTEN BY
내가달이다
,