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

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

나는야 SI 개발자 =

+ jQuery 떡칠 er

자바개발자 (SQL 도 잘함ㅎ )+ …

생계형 개발자- 박승현

- [email protected]

- http://digveloper.ppillip.com

미티어코리아 오가나이져

몽고디비코리아 운영자

미티어 스쿨 운영자

미티어를 파헤처 봅시다

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

미티어를 쉽게할 수 있는 방법

오늘 발표 순서

미티어를 파헤처 봅시다

안헝그리 오픈소스

서버 / 클라이언트 / 데이터 베이스풀스택 자바스크립트

프레임워크아니아니 플랫폼

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

mongoDBMeteorpackage

Folder - client - server - lib - public

meteor deploy meteor add

collection API (CRUD)

1. polling2. oplog scanning

mini mongo


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

요기에 코딩을 해서 넣어요 ..폴더를 잘 맞춰요 ...


Browser / Mobile

Server

$meteor add twbs:bootstrap

패키지를 설치해봅니다 .

Meteor mongoDB


패키지가 다운로드 되서 들어 갑니다( 배포할 수도 있어요 )

package

meteor add

Node.js 의 npm 같은 애 이지요 ..

Browser / Mobile

Server

$meteor run

이제 구동을 해봅니다 .

Meteor mongoDB


빌드되서 실제로 돌아가는 소스입니다 .서버는 순수 node.js 소스에요 .

package

meteor add

meteor run(build)

.meteor


page page

Blaze Angular

React WUW



meteor add


mini mongo

publishsubscribe

Meteor.callmethod

meteor run(build)

.meteor


page

Browser / Mobile

Server

발행 /구독 , 메소드콜 , 컬렉션 API

page

Blaze Angular

React WUW

데이터 주고받기 ..


Returned data


문법이 서버랑

거의 같아요






mini mongo


publishsubscribe

method

meteor run(build)

.meteor


page

Browser / Mobile

Server

$meteor deply myProject

page

Blaze Angular

React WUW

미티어로 디플로이할 수 있어요







mini mongo


publishsubscribe

method

meteor run(build)

.meteor


page

Accounts package(Signup/Signin)

Browser / Mobile

Server

페이스북 , 구글 , 트위터 , 깃헙 ... 각종 sns 로그인

page

Blaze Angular

React WUW

Accounts 패키지로 로그인도 ..


더 자세한 내용은 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 <- 디비

mailto:[email protected]

그후로 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 이재호

원래 자바스크립트 하지 않음 ? 그거 없이 웹이됨 ?


프론트 뿐 아니라 웹쪽 백엔드도 node 로 갈아 치울라고함 .

먼소리 .. 걍 미티어 하셈 ㅋㅋ


내가 컨트롤러만 만들까 .. 걍 Mean 으로 갈까 고민중인데 ..풀스텍도 첨인데 , 미티어까지는 좀 오바인데 ..

엥 ? 디비도 몽고 ..

서버도 node.. meteor 를 안할 이유가

없잖아요 .( 버럭 !)


앵귤러로 짜놓건 우짜구요 ..

버리고 다시짜요 ..

고민되네 ...

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

서버도 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


client

server

HtmlJavaScript

CSS


HtmlJavaScript

CSS


지못미ㅠ . ㅠ REST with Iron-router

1단계 .. 기존 소스 돌아가게 하기 – 서버 소스편

public


client

server

HtmlJavaScript

CSS


HtmlJavaScript

CSS


지못미ㅠ . ㅠ 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

Software

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