Meteor를 통해서 개발하는 웹어플리케이션 서비스

미티어로 개발하는 웹 어플리케이션
부제 : 자바에서 미티어로 갈아타기

나는야 SI 개발자 =
+jQuery 떡칠 er
자바개발자 (SQL 도 잘함ㅎ )
+ …
생계형 개발자
- 박승현
- ppillip@gmail.com
- http://digveloper.ppillip.com
미티어코리아 오가나이져
몽고디비코리아 운영자
미티어 스쿨 운영자

미티어를 파헤처 봅시다
자바에서 미티어로 갈아 타기
미티어를 쉽게할 수 있는 방법
오늘 발표 순서

미티어를 파헤처 봅시다

안헝그리 오픈소스
서버 / 클라이언트 / 데이터 베이스
풀스택 자바스크립트
프레임워크
아니아니 플랫폼

폼이라 .. 좋아 그럼 본격적으로

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

Browser / Mobile
Server
$curl https://install.meteor.com/ | sh
우선 설치부터 좀 하고 ..
Download and Install
Meteor 윈도우는 exe 파일로…
OS 는 64BIT 를 준비합니다

Browser / Mobile
Server
$meteor create myProject
프로젝트 생성 하기 ..
Meteor mongoDB
Folder
- myProject.html
- myProject.js
- myProject.css

Browser / Mobile
Server
개발은 어디에서 ?
Meteor mongoDB
요기에 코딩을 해서 넣어요 ..
폴더를 잘 맞춰요 ...
Folder
- client
- server
- lib
- public

Browser / Mobile
Server
$meteor add twbs:bootstrap
패키지를 설치해봅니다 .
Meteor mongoDB
Folder
- client
- server
- lib
- public
패키지가 다운로드 되서 들어 갑니다
( 배포할 수도 있어요 )
package
meteor add
Node.js 의 npm 같은 애 이지요 ..

Browser / Mobile
Server
$meteor run
이제 구동을 해봅니다 .
Meteor mongoDB
Folder
- client
- server
- lib
- public
빌드되서 실제로 돌아가는 소스입니다 .
서버는 순수 node.js 소스에요 .
package
meteor add
meteor run
(build)
.meteor
pagepage
Blaze Angular
React WUW

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
page
Browser / Mobile
Server
발행 / 구독 , 메소드콜 , 컬렉션 AP
page
Blaze Angular
React WUW
데이터 주고받기 ..
collection API
(CRUD)
Returned data
collection API
(CRUD)
문법이
서버랑
거의 같아요

mongoDBMeteor
package
Folder
- client
- server
- lib
- public
collection API
(CRUD)
1. polling
2. oplog scanning
mini mongo
collection API
(CRUD)
publish
subscribe
method
meteor run
(build)
.meteor
page
Browser / Mobile
Server
$meteor deply myProject
page
Blaze Angular
React WUW
미티어로 디플로이할 수 있어요
Meteor.call
Returned data

mongoDBMeteor
package
Folder
- client
- server
- lib
- public
collection API
(CRUD)
1. polling
2. oplog scanning
mini mongo
collection API
(CRUD)
publish
subscribe
method
meteor run
(build)
.meteor
page
Accounts package
(Signup/Signin)
Browser / Mobile
Server
페이스북 , 구글 , 트위터 , 깃헙 ... 각종 sns
page
Blaze Angular
React WUW
Accounts 패키지로 로그인도 ..
Meteor.call
Returned data

더 자세한 내용은 meteorschool.com 에 있어요 ~!
기초반 !

자바에서 미티어로
갈아타기

한참 전에는… 아니 지금도
아마…
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

jQuery 로됨
7~8 년전쯤 ..
jstl 이나 <% 이런거 막 써야 할까 ?
JavaScript 만 가지고 ui 를 만들수 없을까
서버에서 json 만 주면 ..
서버가 머든 브라우저는 똑같지 않아 ?
Ajax 가 답 !!!

jQuery with AJAX
nt 처리 뿐 아니라 UI 도 jQuery 로 그리자 .
버는 데이터 (json) + 보안에 좀더 신경쓰자
이언트 ( 브라우저 ) 도 어플리케이션이다

서버브라우저
[
{ name : “ 박승현”
,email : “ppillip@mail.com”
,addr : “Seoul,Korea” }
…
]
Pages
기본 html,js
Html 만드는애
대부분 $.appendTo
URL 요청
데이터 요청 (json)
그래서 만들어 쓰기 시작한 ..
jQuery
,CSS
File
DB
클라이언트 -> Json -> 해시맵 -> 디비
클라이언트 <- json 변환 <- ArrayList <-

그후로 5~6 년동안 …
JavaScript
(jQuery)
Browser Server
JAVA
(Spring/Struts)
RDBMS
(Oracle, MSSQL, …)
DataBase
ajax mybatis
5~6 년동안 주 ~ 욱 하던일 .. 다시봐도 지겹네 ......

그러던중 .. 프로젝트에 투입 ..

자바 + 알디비 + jQuery
떡칠 ..
이제 지겹다 . 머 다른거
는 그냥 막 .. 재미있게 일 ( 코딩 ) 하고 싶다 .
프로젝트
집단에너지사업 분석 강화를 위한 표준화방안 연구
- 한국지역난방기술

그래 앵귤러를
써보자 !
와 .. 구글
..

Query 에서 AngularJS 로 갈아타기
앵귤러 진짜 재밌다 ! jQuery 랑 달라 .
쓸때는 앵귤러웨이로 jQuery 를 잊어야해 .. 안그러면 다침
JavaScript
(jQuery)
Browser Server
JAVA
(Spring/Struts)
RDBMS
DataBase
ajax mybatis
돔 셀렉터가 없다 !! 투웨이 만
역시 코딩은 UI 맛 ~!!

요구사항 변경 . 딱딱
한 RDB
스키마 바뀔때 마다
table alter
그리고 .. 데이터 마이
그레이션
RDB 지겨워 미
다 ..
그래도 남
은건…

스키마리스 ! 몽
고디비를쓰자 !
핫 !! 몽고에서
들었나 ?

JavaScript
(jQuery)
RDBMS -> NoSql (Mongodb)
ServerBrowser
RDBMS
DataBase
ajax mybatis
오… 몽고디비 일단 alter 가 없네 .... (schemaless)
우저 json 을 디비까지 셔틀만 하면 되니 자바도
아좋다 … 완
비의 json 이 그냥 프론트까지 ! ( 착한 , java 셔틀덕분
사항 막 ? 변경하셔도 좋아요 " -> 고객 신뢰도업 , 퇴
JAVA
(Spring/Struts)

Join 은 어
자바에서 데이터 코딩할
일이 발생 .
Json 은 역시 JavaScript 로 다루는
게 제일 편해 !
그런
데…
JavaScript Object Notation

서버도 JavaScript! 풀스텍
으로가자 !!!
풀스텍은 첨인데 ..
ServerBrowser DataBase
json 은
JavaScript 가 제맛

프로젝트를 자바스크립
트로 하기로 했음 !
박승현 calling
이재호
원래 자바스크립트 하지 않
음 ? 그거 없이 웹이됨 ?

박승현 calling
이재호프론트 뿐 아니라
웹쪽 백엔드도
node 로 갈아 치울라
고함 .
먼소리 .. 걍 미티어
하셈 ㅋㅋ

박승현 calling
이재호내가 컨트롤러만 만들까 ..
걍 Mean 으로 갈까 고민중
인데 ..
풀스텍도 첨인데 , 미티어까
지는 좀 오바인데 ..
엥 ?
디비도 몽고 ..
서버도 node..
meteor 를 안할 이유가 없잖
아요 .( 버럭 !)

박승현 calling
이재호앵귤러로 짜놓건
우짜구요 ..
버리고 다시
짜요 ..
고민되네 ...

헉 ;; 다시 ? 미친거
아냐 .....
방법이 없나 ?
아 ... 내소스 ..
하다보면 답이 나
오겠지 ..

서버도 JavaScript! 풀스텍
으로가자 !!!

1 단계
일단 기존 client(angularjs) 소스는 돌아가게 하자 .
2 단계
차차 기존 client 소스를 blaze 로 변환 하자 !!
풀스텍 미티어의 길 !!
그래 미티어로
한번 해보자 !

. 기존 소스 돌아가게 하기 – 클라이언트 소스편
public
Meteor
Java
(Spring on Tomcat)
client
server
Html
JavaScript
CSS
REST Service
with Java
Html
JavaScript
CSS
Copy and Paste
( 최소의 수정 )

public
Meteor
Java
(Spring on Tomcat)
client
server
Html
JavaScript
CSS
REST Service
with Java
Html
JavaScript
CSS
Copy and Paste
지못미ㅠ . ㅠ REST
with Iron-router
계 .. 기존 소스 돌아가게 하기 – 서버 소스편

public
Meteor
Java
(Spring on Tomcat)
client
server
Html
JavaScript
CSS
REST Service
with Java
Html
JavaScript
CSS
Copy and Paste
지못미ㅠ . ㅠ REST
with Iron-router
Blaze
.. 기존 소스 돌아가게 하기 – 미티어로 변환하기

고객 동의 하에 작성된 화면 입
데이터는… . 안보일껄요 . .
보이면 눈감으세요 . .
결국은 완성 !!!

그럼 다른 프로젝트요 ?
어제 또 완료보고 했어요 .

고 공부 해야 하나요 ? 지금까지 설명은 좀
미티어를 쉽게할 수 있는 방법

http://meteorschool.comhttp://webframeworks.kr/getstarted/meteorjs/
http://kr.discovermeteor.com/
한글자료

http://docs.meteor.com/#/full/quickstart
영문자료
https://www.discovermeteor.com/
http://meteorpedia.com/read/Main_Page

커뮤니티
http://www.meteorjs.kr/ http://www.meetup.com/Meteor-Seoul
https://www.facebook.com/groups/meteorschool
/
내년에 또 무료교육 합니다 ;)

끝으로
We’re hiring meteor developers~
미티어 모른다고 .. 교육은 걱정마
연락
하세용
;)

Meteor를 통해서 개발하는 웹어플리케이션 서비스

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Meteor를 통해서 개발하는 웹어플리케이션 서비스

Similar to Meteor를 통해서 개발하는 웹어플리케이션 서비스 (20)

More from WebFrameworks

More from WebFrameworks (9)

Meteor를 통해서 개발하는 웹어플리케이션 서비스

Editor's Notes