이번 개인프로젝트를 웹으로 새로 공부해볼겸 해서 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
