7. mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor deploy meteor add
collection API
(CRUD)
1. polling
2. oplog scanning
mini mongo
collection API
(CRUD)
publish
subscribe
method
meteor run
(build)
.meteor
(client source) Hot Code Reload
page
Accounts package
(Signup/Signin)
Browser / Mobile
Server
! 복잡해 ! 그러나 ... 한개씩 보면 어렵지 않아
page
Blaze Angular
React WUW
렛폼이라며 .. 전체를 좀 봅시다 ..
Meteor.call
Returned data
8. Browser / Mobile
Server
$curl https://install.meteor.com/ | sh
우선 설치부터 좀 하고 ..
Download and Install
Meteor 윈도우는 exe 파일로…
OS 는 64BIT 를 준비합니다
9. Browser / Mobile
Server
$meteor create myProject
프로젝트 생성 하기 ..
Meteor mongoDB
Folder
- myProject.html
- myProject.js
- myProject.css
10. Browser / Mobile
Server
개발은 어디에서 ?
Meteor mongoDB
요기에 코딩을 해서 넣어요 ..
폴더를 잘 맞춰요 ...
Folder
- client
- server
- lib
- public
11. Browser / Mobile
Server
$meteor add twbs:bootstrap
패키지를 설치해봅니다 .
Meteor mongoDB
Folder
- client
- server
- lib
- public
패키지가 다운로드 되서 들어 갑니다
( 배포할 수도 있어요 )
package
meteor add
Node.js 의 npm 같은 애 이지요 ..
12. Browser / Mobile
Server
$meteor run
이제 구동을 해봅니다 .
Meteor mongoDB
Folder
- client
- server
- lib
- public
빌드되서 실제로 돌아가는 소스입니다 .
서버는 순수 node.js 소스에요 .
package
meteor add
meteor run
(build)
.meteor
(client source) Hot Code Reload
pagepage
Blaze Angular
React WUW
13. mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor add
1. polling
2. oplog scanning
mini mongo
publish
subscribe
Meteor.call
method
meteor run
(build)
.meteor
(client source) Hot Code Reload
page
Browser / Mobile
Server
발행 / 구독 , 메소드콜 , 컬렉션 AP
page
Blaze Angular
React WUW
데이터 주고받기 ..
collection API
(CRUD)
Returned data
collection API
(CRUD)
문법이
서버랑
거의 같아요
14. mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor deploy meteor add
collection API
(CRUD)
1. polling
2. oplog scanning
mini mongo
collection API
(CRUD)
publish
subscribe
method
meteor run
(build)
.meteor
(client source) Hot Code Reload
page
Browser / Mobile
Server
$meteor deply myProject
page
Blaze Angular
React WUW
미티어로 디플로이할 수 있어요
Meteor.call
Returned data
15. mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor deploy meteor add
collection API
(CRUD)
1. polling
2. oplog scanning
mini mongo
collection API
(CRUD)
publish
subscribe
method
meteor run
(build)
.meteor
(client source) Hot Code Reload
page
Accounts package
(Signup/Signin)
Browser / Mobile
Server
페이스북 , 구글 , 트위터 , 깃헙 ... 각종 sns
page
Blaze Angular
React WUW
Accounts 패키지로 로그인도 ..
Meteor.call
Returned data
18. 한참 전에는… 아니 지금도
아마…
DB
데이터
서버브라우저
<html>
<div>
<p> 박승현 </p>
<p>psh@email.com</p>
<p>Seoul,Korea</p>
</div>
</html>
HTML , JS …
Page
Html 만드는애
심지어는 JavaScript 코드도 서버생
스파게티가 먹고 싶은 코드 ..
URL 요청
서버사이드 에서 서블릿 JSP , JSTL
로 HTML 만들기 ..
서블릿
,JSP
19. jQuery 로됨
7~8 년전쯤 ..
jstl 이나 <% 이런거 막 써야 할까 ?
JavaScript 만 가지고 ui 를 만들수 없을까
서버에서 json 만 주면 ..
서버가 머든 브라우저는 똑같지 않아 ?
Ajax 가 답 !!!
20. jQuery with AJAX
nt 처리 뿐 아니라 UI 도 jQuery 로 그리자 .
버는 데이터 (json) + 보안에 좀더 신경쓰자
이언트 ( 브라우저 ) 도 어플리케이션이다
21. 서버브라우저
[
{ name : “ 박승현”
,email : “ppillip@mail.com”
,addr : “Seoul,Korea” }
…
]
Pages
기본 html,js
Html 만드는애
대부분 $.appendTo
URL 요청
데이터 요청 (json)
그래서 만들어 쓰기 시작한 ..
jQuery
,CSS
File
DB
클라이언트 -> Json -> 해시맵 -> 디비
클라이언트 <- json 변환 <- ArrayList <-
38. 1 단계
일단 기존 client(angularjs) 소스는 돌아가게 하자 .
2 단계
차차 기존 client 소스를 blaze 로 변환 하자 !!
풀스텍 미티어의 길 !!
그래 미티어로
한번 해보자 !
39. . 기존 소스 돌아가게 하기 – 클라이언트 소스편
public
Meteor
Java
(Spring on Tomcat)
client
server
Html
JavaScript
CSS
REST Service
with Java
Html
JavaScript
CSS
Copy and Paste
( 최소의 수정 )