Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
미티어로 개발하는 웹 어플리케이션
부제 : 자바에서 미티어로 갈아타기
나는야 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....
Browser / Mobile
Server
$curl https://install.meteor.com/ | sh
우선 설치부터 좀 하고 ..
Download and Install
Meteor 윈도우는 exe 파일로…
O...
Browser / Mobile
Server
$meteor create myProject
프로젝트 생성 하기 ..
Meteor mongoDB
Folder
- myProject.html
- myProject.js
- myP...
Browser / Mobile
Server
개발은 어디에서 ?
Meteor mongoDB
요기에 코딩을 해서 넣어요 ..
폴더를 잘 맞춰요 ...
Folder
- client
- server
- lib
- public
Browser / Mobile
Server
$meteor add twbs:bootstrap
패키지를 설치해봅니다 .
Meteor mongoDB
Folder
- client
- server
- lib
- public
패키...
Browser / Mobile
Server
$meteor run
이제 구동을 해봅니다 .
Meteor mongoDB
Folder
- client
- server
- lib
- public
빌드되서 실제로 돌아가는 소스입...
mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor add
1. polling
2. oplog scanning
mini mongo
publish
s...
mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor deploy meteor add
collection API
(CRUD)
1. polling
2....
mongoDBMeteor
package
Folder
- client
- server
- lib
- public
meteor deploy meteor add
collection API
(CRUD)
1. polling
2....
더 자세한 내용은 meteorschool.com 에 있어요 ~!
기초반 !
자바에서 미티어로
갈아타기
한참 전에는… 아니 지금도
아마…
DB
데이터
서버브라우저
<html>
<div>
<p> 박승현 </p>
<p>psh@email.com</p>
<p>Seoul,Korea</p>
</div>
</html>
HTML , J...
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...
그후로 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 Serve...
요구사항 변경 . 딱딱
한 RDB
스키마 바뀔때 마다
table alter
그리고 .. 데이터 마이
그레이션
RDB 지겨워 미
다 ..
그래도 남
은건…
스키마리스 ! 몽
고디비를쓰자 !
핫 !! 몽고에서
들었나 ?
JavaScript
(jQuery)
RDBMS -> NoSql (Mongodb)
ServerBrowser
RDBMS
(Oracle, MSSQL, …)
DataBase
ajax mybatis
오… 몽고디비 일단 alter...
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...
public
Meteor
Java
(Spring on Tomcat)
client
server
Html
JavaScript
CSS
REST Service
with Java
Html
JavaScript
CSS
Copy an...
public
Meteor
Java
(Spring on Tomcat)
client
server
Html
JavaScript
CSS
REST Service
with Java
Html
JavaScript
CSS
Copy an...
고객 동의 하에 작성된 화면 입
데이터는… . 안보일껄요 . .
보이면 눈감으세요 . .
결국은 완성 !!!
그럼 다른 프로젝트요 ?
어제 또 완료보고 했어요 .
고 공부 해야 하나요 ? 지금까지 설명은 좀
미티어를 쉽게할 수 있는 방법
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
Upcoming SlideShare
Loading in …5
×

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

2,726 views

Published on

미티어로 개발한 프로젝트의 실제 사례를 소개 합니다. 또한, 미티어를 쉽게 접하기 위한 방법에 대하여 안내합니다.

Published in: Software

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

  1. 1. 미티어로 개발하는 웹 어플리케이션 부제 : 자바에서 미티어로 갈아타기
  2. 2. 나는야 SI 개발자 = +jQuery 떡칠 er 자바개발자 (SQL 도 잘함ㅎ ) + … 생계형 개발자 - 박승현 - ppillip@gmail.com - http://digveloper.ppillip.com 미티어코리아 오가나이져 몽고디비코리아 운영자 미티어 스쿨 운영자
  3. 3. 미티어를 파헤처 봅시다 자바에서 미티어로 갈아 타기 미티어를 쉽게할 수 있는 방법 오늘 발표 순서
  4. 4. 미티어를 파헤처 봅시다
  5. 5. 안헝그리 오픈소스 서버 / 클라이언트 / 데이터 베이스 풀스택 자바스크립트 프레임워크 아니아니 플랫폼
  6. 6. 폼이라 .. 좋아 그럼 본격적으로
  7. 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. 8. Browser / Mobile Server $curl https://install.meteor.com/ | sh 우선 설치부터 좀 하고 .. Download and Install Meteor 윈도우는 exe 파일로… OS 는 64BIT 를 준비합니다
  9. 9. Browser / Mobile Server $meteor create myProject 프로젝트 생성 하기 .. Meteor mongoDB Folder - myProject.html - myProject.js - myProject.css
  10. 10. Browser / Mobile Server 개발은 어디에서 ? Meteor mongoDB 요기에 코딩을 해서 넣어요 .. 폴더를 잘 맞춰요 ... Folder - client - server - lib - public
  11. 11. Browser / Mobile Server $meteor add twbs:bootstrap 패키지를 설치해봅니다 . Meteor mongoDB Folder - client - server - lib - public 패키지가 다운로드 되서 들어 갑니다 ( 배포할 수도 있어요 ) package meteor add Node.js 의 npm 같은 애 이지요 ..
  12. 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. 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. 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. 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
  16. 16. 더 자세한 내용은 meteorschool.com 에 있어요 ~! 기초반 !
  17. 17. 자바에서 미티어로 갈아타기
  18. 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. 19. jQuery 로됨 7~8 년전쯤 .. jstl 이나 <% 이런거 막 써야 할까 ? JavaScript 만 가지고 ui 를 만들수 없을까 서버에서 json 만 주면 .. 서버가 머든 브라우저는 똑같지 않아 ? Ajax 가 답 !!!
  20. 20. jQuery with AJAX nt 처리 뿐 아니라 UI 도 jQuery 로 그리자 . 버는 데이터 (json) + 보안에 좀더 신경쓰자 이언트 ( 브라우저 ) 도 어플리케이션이다
  21. 21. 서버브라우저 [ { name : “ 박승현” ,email : “ppillip@mail.com” ,addr : “Seoul,Korea” } … ] Pages 기본 html,js Html 만드는애 대부분 $.appendTo URL 요청 데이터 요청 (json) 그래서 만들어 쓰기 시작한 .. jQuery ,CSS File DB 클라이언트 -> Json -> 해시맵 -> 디비 클라이언트 <- json 변환 <- ArrayList <-
  22. 22. 그후로 5~6 년동안 … JavaScript (jQuery) Browser Server JAVA (Spring/Struts) RDBMS (Oracle, MSSQL, …) DataBase ajax mybatis 5~6 년동안 주 ~ 욱 하던일 .. 다시봐도 지겹네 ......
  23. 23. 그러던중 .. 프로젝트에 투입 ..
  24. 24. 자바 + 알디비 + jQuery 떡칠 .. 이제 지겹다 . 머 다른거 는 그냥 막 .. 재미있게 일 ( 코딩 ) 하고 싶다 . 프로젝트 집단에너지사업 분석 강화를 위한 표준화방안 연구 - 한국지역난방기술
  25. 25. 그래 앵귤러를 써보자 ! 와 .. 구글 ..
  26. 26. Query 에서 AngularJS 로 갈아타기 앵귤러 진짜 재밌다 ! jQuery 랑 달라 . 쓸때는 앵귤러웨이로 jQuery 를 잊어야해 .. 안그러면 다침 JavaScript (jQuery) Browser Server JAVA (Spring/Struts) RDBMS (Oracle, MSSQL, …) DataBase ajax mybatis 돔 셀렉터가 없다 !! 투웨이 만 역시 코딩은 UI 맛 ~!!
  27. 27. 요구사항 변경 . 딱딱 한 RDB 스키마 바뀔때 마다 table alter 그리고 .. 데이터 마이 그레이션 RDB 지겨워 미 다 .. 그래도 남 은건…
  28. 28. 스키마리스 ! 몽 고디비를쓰자 ! 핫 !! 몽고에서 들었나 ?
  29. 29. JavaScript (jQuery) RDBMS -> NoSql (Mongodb) ServerBrowser RDBMS (Oracle, MSSQL, …) DataBase ajax mybatis 오… 몽고디비 일단 alter 가 없네 .... (schemaless) 우저 json 을 디비까지 셔틀만 하면 되니 자바도 아좋다 … 완 비의 json 이 그냥 프론트까지 ! ( 착한 , java 셔틀덕분 사항 막 ? 변경하셔도 좋아요 " -> 고객 신뢰도업 , 퇴 JAVA (Spring/Struts)
  30. 30. Join 은 어 자바에서 데이터 코딩할 일이 발생 . Json 은 역시 JavaScript 로 다루는 게 제일 편해 ! 그런 데… JavaScript Object Notation
  31. 31. 서버도 JavaScript! 풀스텍 으로가자 !!! 풀스텍은 첨인데 .. ServerBrowser DataBase json 은 JavaScript 가 제맛
  32. 32. 프로젝트를 자바스크립 트로 하기로 했음 ! 박승현 calling 이재호 원래 자바스크립트 하지 않 음 ? 그거 없이 웹이됨 ?
  33. 33. 박승현 calling 이재호프론트 뿐 아니라 웹쪽 백엔드도 node 로 갈아 치울라 고함 . 먼소리 .. 걍 미티어 하셈 ㅋㅋ
  34. 34. 박승현 calling 이재호내가 컨트롤러만 만들까 .. 걍 Mean 으로 갈까 고민중 인데 .. 풀스텍도 첨인데 , 미티어까 지는 좀 오바인데 .. 엥 ? 디비도 몽고 .. 서버도 node.. meteor 를 안할 이유가 없잖 아요 .( 버럭 !)
  35. 35. 박승현 calling 이재호앵귤러로 짜놓건 우짜구요 .. 버리고 다시 짜요 .. 고민되네 ...
  36. 36. 헉 ;; 다시 ? 미친거 아냐 ..... 방법이 없나 ? 아 ... 내소스 .. 하다보면 답이 나 오겠지 ..
  37. 37. 서버도 JavaScript! 풀스텍 으로가자 !!!
  38. 38. 1 단계 일단 기존 client(angularjs) 소스는 돌아가게 하자 . 2 단계 차차 기존 client 소스를 blaze 로 변환 하자 !! 풀스텍 미티어의 길 !! 그래 미티어로 한번 해보자 !
  39. 39. . 기존 소스 돌아가게 하기 – 클라이언트 소스편 public Meteor Java (Spring on Tomcat) client server Html JavaScript CSS REST Service with Java Html JavaScript CSS Copy and Paste ( 최소의 수정 )
  40. 40. 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 계 .. 기존 소스 돌아가게 하기 – 서버 소스편
  41. 41. 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 .. 기존 소스 돌아가게 하기 – 미티어로 변환하기
  42. 42. 고객 동의 하에 작성된 화면 입 데이터는… . 안보일껄요 . . 보이면 눈감으세요 . . 결국은 완성 !!!
  43. 43. 그럼 다른 프로젝트요 ? 어제 또 완료보고 했어요 .
  44. 44. 고 공부 해야 하나요 ? 지금까지 설명은 좀 미티어를 쉽게할 수 있는 방법
  45. 45. http://meteorschool.comhttp://webframeworks.kr/getstarted/meteorjs/ http://kr.discovermeteor.com/ 한글자료
  46. 46. http://docs.meteor.com/#/full/quickstart 영문자료 https://www.discovermeteor.com/ http://meteorpedia.com/read/Main_Page
  47. 47. 커뮤니티 http://www.meteorjs.kr/ http://www.meetup.com/Meteor-Seoul https://www.facebook.com/groups/meteorschool / 내년에 또 무료교육 합니다 ;)
  48. 48. 끝으로 We’re hiring meteor developers~ 미티어 모른다고 .. 교육은 걱정마 연락 하세용 ;)
  49. 49. 감사합니다
  50. 50. Q & A

×