meteor를 통해서 개발하는 웹어플리케이션 서비스
TRANSCRIPT
미티어로 개발하는 웹 어플리케이션 부제 : 자바에서 미티어로 갈아타기
나는야 SI 개발자 =
+ jQuery 떡칠 er
자바개발자 (SQL 도 잘함ㅎ )+ …
생계형 개발자- 박승현
- http://digveloper.ppillip.com
미티어코리아 오가나이져
몽고디비코리아 운영자
미티어 스쿨 운영자
미티어를 파헤처 봅시다
자바에서 미티어로 갈아 타기
미티어를 쉽게할 수 있는 방법
오늘 발표 순서
미티어를 파헤처 봅시다
안헝그리 오픈소스
서버 / 클라이언트 / 데이터 베이스풀스택 자바스크립트
프레임워크아니아니 플랫폼
플랫폼이라 .. 좋아 그럼 본격적으로 ..
mongoDBMeteorpackage
Folder - client - server - lib - public
meteor deploy meteor add
collection API (CRUD)
1. polling2. oplog scanning
mini mongo
collection API (CRUD)
publishsubscribe
method
meteor run(build)
.meteor
(client source) Hot Code Reload
page
Accounts package(Signup/Signin)
Browser / Mobile
Server
헉 ! 복잡해 ! 그러나 ... 한개씩 보면 어렵지 않아요 ~!
page
Blaze Angular
React WUW
플렛폼이라며 .. 전체를 좀 봅시다 ..
Meteor.callReturned 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
(client source) Hot Code Reload
page page
Blaze Angular
React WUW
mongoDBMeteorpackage
Folder - client - server - lib - public
meteor add
1. polling2. oplog scanning
mini mongo
publishsubscribe
Meteor.callmethod
meteor run(build)
.meteor
(client source) Hot Code Reload
page
Browser / Mobile
Server
발행 /구독 , 메소드콜 , 컬렉션 API
page
Blaze Angular
React WUW
데이터 주고받기 ..
collection API (CRUD)
Returned data
collection API (CRUD)
문법이 서버랑
거의 같아요
mongoDBMeteorpackage
Folder - client - server - lib - public
meteor deploy meteor add
collection API (CRUD)
1. polling2. oplog scanning
mini mongo
collection API (CRUD)
publishsubscribe
method
meteor run(build)
.meteor
(client source) Hot Code Reload
page
Browser / Mobile
Server
$meteor deply myProject
page
Blaze Angular
React WUW
미티어로 디플로이할 수 있어요
Meteor.callReturned data
mongoDBMeteorpackage
Folder - client - server - lib - public
meteor deploy meteor add
collection API (CRUD)
1. polling2. oplog scanning
mini mongo
collection API (CRUD)
publishsubscribe
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.callReturned data
더 자세한 내용은 meteorschool.com 에 있어요 ~! 기초반 !
자바에서 미티어로 갈아타기
한참 전에는… 아니 지금도 아마…
DB데이터
서버브라우저
<html><div><p> 박승현 </p><p>[email protected]</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
Event 처리 뿐 아니라 UI 도 jQuery 로 그리자 .
서버는 데이터 (json) + 보안에 좀더 신경쓰자
클라이언트 ( 브라우저 ) 도 어플리케이션이다
서버브라우저
[ { name : “ 박승현” ,email : “[email protected]” ,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 떡칠 ..
이제 지겹다 . 머 다른거
없나 ?
이번에는 그냥 막 .. 재미있게 일 ( 코딩 ) 하고 싶다 .
프로젝트
집단에너지사업 분석 강화를 위한 표준화방안 연구
- 한국지역난방기술
그래 앵귤러를 써보자 !
와 .. 구글이래 ..
jQuery 에서 AngularJS 로 갈아타기
앵귤러 진짜 재밌다 ! jQuery 랑 달라 . 앵귤러 쓸때는 앵귤러웨이로 jQuery 를 잊어야해 .. 안그러면 다침 ..
JavaScript (jQuery)
Browser Server
JAVA(Spring/Struts) RDBMS
(Oracle, MSSQL, …)
DataBase
ajax mybatis
돔 셀렉터가 없다 !! 투웨이 만세 !!
역시 코딩은 UI 맛~!!
요구사항 변경 . 딱딱한 RDB 스키마 바뀔때 마다 table alter 그리고 .. 데이터 마이그레이션
RDB 지겨워
미치겠다 ..
그래도 남은건…
스키마리스 ! 몽고디비를쓰자 !
핫 !! 몽고에서
만들었나 ?
JavaScript (jQuery)
RDBMS -> NoSql (Mongodb)ServerBrowser
RDBMS(Oracle, MSSQL, …)
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 로 변환 하자 !!
풀스텍 미티어의 길 !!
그래 미티어로 한번 해보자 !
1단계 .. 기존 소스 돌아가게 하기 – 클라이언트 소스편
public
MeteorJava (Spring on Tomcat)
client
server
HtmlJavaScript
CSS
REST Servicewith Java
HtmlJavaScript
CSS
Copy and Paste( 최소의 수정 )
public
MeteorJava (Spring on Tomcat)
client
server
HtmlJavaScript
CSS
REST Servicewith Java
HtmlJavaScript
CSS
Copy and Paste( 최소의 수정 )
지못미ㅠ . ㅠ REST with Iron-router
1단계 .. 기존 소스 돌아가게 하기 – 서버 소스편
public
MeteorJava (Spring on Tomcat)
client
server
HtmlJavaScript
CSS
REST Servicewith Java
HtmlJavaScript
CSS
Copy and Paste( 최소의 수정 )
지못미ㅠ . ㅠ REST with Iron-router
Blaze
1단계 .. 기존 소스 돌아가게 하기 – 미티어로 변환하기
고객 동의 하에 작성된 화면 입니다데이터는… . 안보일껄요 .. 보이면 눈감으세요 .. 결국은 완성 !!!
Q : 그럼 다른 프로젝트요 ?A : 어제 또 완료보고 했어요 .
그럼 멀보고 공부 해야 하나요 ? 지금까지 설명은 좀 어려운데 ??
미티어를 쉽게할 수 있는 방법
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~!!
미티어 모른다고 .. 교육은 걱정
마시고
일단 연락 하세용 ;)
감사합니다
Q & A