Node.js, HTML5, MVVM 프레임워크를 이용해서 실시간 ... - README

eatablesurveyorInternet and Web Development

Dec 14, 2013 (3 years and 4 months ago)

178 views

Node.js, HTML5,


MVVM
프레임워크를 이용해서

실시간 협업 태스크보드 만들기
כּ益
[
회사 로고
]

Building Collaborative Task Board
with Node.js, HTML5 and MVVM framework

Who I am

Page    
2
 

כּ益



/)/
ӝ啕ﱱ



履ﳑ欄

O'03(&

ѐߊﱱ
驪ﰃﰫﱟ



0DUPCFS4LZ+T
OPEFKTDPNNVOJUZ

؊



杻卑оח
CMPHEPPSUUTDPN

Today's topic is…

Page    
3
 


ﴈ隸ﰕ欄ﯼ樂ѱחߑ




)5.-%SBHBOE%SPQ


.77.'SBNFXPSL


4PDLFUJP



TIPWFMJOHFYQFSJFODF
Page    
4
 
협업 태스크 보드 만들기
v

6TBHF


ﳡ社ҙ



缾рҊﭓ



ﱱ隸ѱ臘ﱸ

v

%FWFMPQNFOUHPBM


FBTZUPVTF


DPMMBCPSBUJWFGVODUJPOT


JOUVJUJWF

BOEQSFUUZ6*


VTJOHBQQSPQSJBUFUFDIOPMPHZ

Page    
5
 
now working…


/5BTL#PBSE
ח爫藍

Page    
6
 
required tech stack
v

XFOFFEj


%SBH%SPQ


7JFX

%BUB.PEFM


3FBM5JNFEBUBFYDIBOHFCFUXFFONVMUJVTFST

Drag & Drop

Page    
7
 
Page    
8
 
Web application Drag n Drop
v

ﰖ𣏕



K2VFSZ
1MVHJO
K2VFSZ
6*



)5.-



Page    
9
 
Web application Drag n Drop
v

)5.-%SBH%SPQ
WT

K2VFSZ
6*


TQFD
WT
MJCSBSZ


OBUJWF
WT
OPOOBUJWF


#BDLXBSEDPNQBUJCJMJUZ
Page    
10
 
HTML5 Drag & Drop
v

оמﳠ糖



5FYU


-JOLT


)5.-BOE9.-


'JMFT


*NBHFT


%PDVNFOU/PEFT

Page    
11
 
HTML5 Drag & Drop
v

%SBHHBCMF



ESBHHBCMF
USVF
v

%SBHFWFOUT


ESBHTUBSU



ESBHFOUFS



ESBHPWFS



ESBHMFBWF



ESBH


ESPQ


ESBHFOE

v

%BUB5SBOTGFS


FEBUB5SBOTGFSTFU%BUB



FEBUB5SBOTGFSHFU%BUB

v

$BVUJPO


FQSFWFOU%FGBVMU




FTUPQ1SPQBHBUJPO



Page    
12
 
HTML5 Drag & Drop
enter
leaver
over
start
drop

see demo..

Page    
13
 
Page    
14
 
HTML5 Drag & Drop
v

JNQMFNFOUBUJPO
Page    
15
 
HTML5 Drag & Drop
v

1SPT


見ﳞӝ樂



殺؊


v

$POT


悔見爫朗



IUNMTPSUBCMF


廓勺ҳﴅبо



律炙Ҋﯬ
*&
Page    
16
 
TaskBoard

v

XFOFFENPEFMOPU%0.

View Model

Page    
17
 
Page    
18
 
MVC Model
v

.7$
؛梅



.PEFM


7JFX


$POUSPMMFS

Page    
19
 
MVC Model
v

8FC
爫ﴱ梅҅



.PEFM


7JFX


$POUSPMMFS

Page    
20
 
MVVM

v

TPNFQSPCMFNT


WJFXJTNPSFBOENPSFDPNQMJDBUFE


POFQBHFBQQMJDBUJPOJODSFBTFE


OFFETPMVUJPOT
v

.77.
梅١謁



.PEFM


7JFX


7JFX.PEFM

Page    
21
 
MVVM

v

TP8IBUJT.77. 


PSJHJOQSFTFOUBUJPONPEFMEFTJHOQBUUFSO
 



+PIO
(PTTNBO



)5.- 81' 8JOEPXT1SFTFOUBUJPO'PVOEBUJPO
4JMWFSMJH
IU
溺э嘆爫߮ﱟӝ߈ӝ߈梅
6*
ѐߊﳒﲬ器ﰋӥ卑ﳞח
驪ﰃﰫתּﲁﰢ





/&5'SBNFXPSL
җﳣԋѺ١謁



7JFX
﨤ﳠ
%BUB#JOEJOH
爫ﳨ郎
Page    
22
 
back to web application development

Page    
23
 
Javascript
MV* Framework Evaluation
v

+BWBTDSJQU
.7'SBNFXPSL


؊著ﳠ
7JFX
؊ױﳠﴋﰕѐߊﳞӝ﨤ﳧ

v

'SBNFXPSL&WBMVBUJPO


#BDLCPOFKT


&NCFSKT
4QSPVU$PSF




"OHVMBS+T

Page    
24
 
AngularJs

v

"OHVMBS+T



.78GSBNFXPSL


EFWFMPQFECZ(PPHMF
v

8IZUIJT 


FBTZUPVTF


UXPXBZCJOEJOH


EFDMBSBUJWFFYQSFTTJPO


XFMMEPDVNFOUFE


UFTUPSJFOUFE


VOJUUFTUJOH


FFUFTUJOH
Page    
25
 
AngularJs

v

"OHVMBS+T



OH
BQQ


OH
NPEFM


TDPQF


GJMUFS

see demo..

hello.html

Page    
26
 
TaskBoard

v

8BJU
-FUsTUIJOLBCPVUJU$POTJTUFODZDIPJDF


r7JFX.PEFMs
WT
r.PEFM7JFXs

a n o t h e r d e m o..

Page    
27
 
board.html

Page    
28
 
AngularJs

v

1SPT


見ﳞӝ樂



ﴚо臭غ羚禎



ﰪ欄ﱟо҅ﭡӝﰠ臭Ҋ۰غ羚禎



EFQFOEFODZJOKFDUJPO
ߑ蠟梅ٕﴚ𣏕益



ҳӖ爫

v

$POT


FBTZUPMFBSOCVUIBSEUPNBTUFS


驪㮝嘆۹о朗



CBDLCPOFKT
 


ҳӖ爫

Page    
29
 
TaskBoard
- tricks
v

QMBDFIPMEFS

Real Time data exchange

Page    
30
 
Page    
31
 
TaskBoard

v

JGNPEFMJTDIBOHFE CSPBEDBTUFNJUT
Page    
32
 
WebSocket

v

3FBMUJNFDPNNVOJDBUJPOJOXFCBQQ


QPMMJOH


DPNFU


8FC4PDLFU
 )5.-



#J%JSFDUJPOBM
PS4FSWFS*OJUJBUFE)551
)Z#J

XPSLJOHHSPVQ
 

v

QSPGJUT


GVMMEVQMFYDPNNVOJDBUJPOTDIBOOFMTPWFSBTJOHMF5$1D
POOFDUJPO


5$1QPSU


DBOCFVTFCPUITJEFTTFSWFSTJEF DMJFOUTJEF

Page    
33
 
socket.io
v

CFOFGJU


8FC4PDLFU
JNQMFNFOUBUJPO


FYUSFNFMZ
FBTZUPVTF


CSPXTFSDPNQBUJCJMJUZ


OPEFKT

Page    
34
 
TaskBoard

v

CSPBEDBTUFNJU
Page    
35
 
TaskBoard
- tricks
v

CSPBEDBTUFNJU
Page    
36
 
socket.io
v

JNQMFNFOUBUJPO
Page    
37
 
socket.io

v

1SPT


見ﳞӝ樂



練߄欄ﯼﱟ

v

$POT


OPEFKT
見ﳧ裂ﳠ



ҳﴅﭓ爫١謁ﳞҊ禎墨

WFSUY

١




練߄欄ﯼﱟ

TR;DL

Page    
38
 
ﴈ隸ﰕ欄ﯼ樂ѱחߑ


Page    
39
 
Resources
v

)5.-%SBH%SPQ
"DDFTTJCMFESBHBOEESPQVTJOH8"*"3*"


IUUQEFWPQFSBDPNBSUJDMFTWJFXBDDFTTJCMFESBHBOEESPQ
8$)5.-&EJUPST%SBGU/PWFNCFS %SBHBOEESPQ


IUUQEFWXPSHIUNMTQFDTJOHMFQBHFIUNMEOE
%FW0QFSB
)5.-%SBHBOE%SPQ


IUUQEFWPQFSBDPNBSUJDMFTWJFXESBHBOEESPQ
)5.-"OPUIFS1PTUDBSEGSPNUIF5SFODIFT


IUUQXXXTUBOGPSEFEVHSPVQBDDFTTJCJMJUZDHJCJOQSFTFOUBUJPOTQPTUD
BSE
v

"OHVMBS+T

PGGJDJBMTJUF


BOHVMBSKTPSH
BOHVMBS
VJ



IUUQBOHVMBSVJHJUIVCDPN


Q & A

Page    
40
 
감사합니다