54
HTML5 API를 활용한 “실시간 대전 테트리스 게임” 개발 NHN Technology Services 프론트엔드개발팀 이진권

[D2 오픈세미나]5.html5 api 테트리스게임_이진권

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

HTML5����������� ������������������  API를����������� ������������������  활용한����������� ������������������   “실시간����������� ������������������  대전����������� ������������������  테트리스����������� ������������������  게임”����������� ������������������  개발

NHN����������� ������������������  Technology����������� ������������������  Services프론트엔드개발팀����������� ������������������  이진권

Page 2: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

NHN����������� ������������������  Technology����������� ������������������  Services����������� ������������������  !Front-End����������� ������������������  ����������� ������������������  Development����������� ������������������  Team

이진권

PHP개발자,����������� ������������������  

Javascript����������� ������������������  의����������� ������������������  매력에����������� ������������������  빠지다Naver����������� ������������������  고객센터����������� ������������������  Javascript����������� ������������������  개발����������� ������������������  

Naver����������� ������������������  자동차����������� ������������������  서비스����������� ������������������  Javascript����������� ������������������  개발Line����������� ������������������  Messanger����������� ������������������  for����������� ������������������  Firefox����������� ������������������  OS����������� ������������������  

사내����������� ������������������  웹����������� ������������������  메신저����������� ������������������  개발����������� ������������������  참여

코드����������� ������������������  농사꾼����������� ������������������  Code����������� ������������������  Farmer

Page 3: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Agenda

Tetris로����������� ������������������  개발하기까지����������� ������������������  

Game����������� ������������������  UI����������� ������������������  Design����������� ������������������  

ArchitectureFront-EndBackground-End����������� ������������������  

Start����������� ������������������  Development����������� ������������������  

Play����������� ������������������  with����������� ������������������  Full����������� ������������������  Stack����������� ������������������  JS

Page 4: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Tetris

Page 5: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

네개의����������� ������������������  사각형으로����������� ������������������  이뤄진����������� ������������������  테트리스����������� ������������������  블록����������� ������������������  오리지널의����������� ������������������  경우, 블록����������� ������������������  종류는����������� ������������������  총����������� ������������������  7가지

테트리스����������� ������������������  with����������� ������������������  테트리미노

Page 6: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Tetris����������� ������������������  를����������� ������������������  ����������� ������������������  주제로����������� ������������������  선택한����������� ������������������  이유

• 게임����������� ������������������  로직이����������� ������������������  단순����������� ������������������  심플(개발����������� ������������������  용이)����������� ������������������  

• 개인����������� ������������������  프로젝트로����������� ������������������  재밌는����������� ������������������  개발을����������� ������������������  해보자����������� ������������������  

• 프론트엔드����������� ������������������  개발����������� ������������������  중심서버����������� ������������������  개발까지����������� ������������������  

• 이왕����������� ������������������  하는거����������� ������������������  1:100(멀티����������� ������������������  게임)

Page 7: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Game����������� ������������������  UI����������� ������������������  Design

Page 8: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

게임����������� ������������������  인트로����������� ������������������  화면이자����������� ������������������  사용자와����������� ������������������  첫����������� ������������������  접합점����������� ������������������  사용자����������� ������������������  분별을����������� ������������������  위한����������� ������������������  로그인,����������� ������������������  로그인과����������� ������������������  가입을����������� ������������������  하나의����������� ������������������  스크린으로!

INTRO����������� ������������������  &����������� ������������������  LOGIN

Page 9: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

화면����������� ������������������  간����������� ������������������  이동을����������� ������������������  위한����������� ������������������  대시보드����������� ������������������  메뉴����������� ������������������  이동이����������� ������������������  직관적이면����������� ������������������  좋겠다

DASHBOARD

Page 10: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

게임����������� ������������������  스테이지����������� ������������������  인터페이스����������� ������������������  디자인네트워크����������� ������������������  게임과����������� ������������������  싱글����������� ������������������  게임을����������� ������������������  공용으로!(코드����������� ������������������  분산����������� ������������������  최소화)

SINGLE����������� ������������������  STAGE

Page 11: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

게임����������� ������������������  스테이지����������� ������������������  인터페이스����������� ������������������  디자인네트워크����������� ������������������  게임과����������� ������������������  싱글����������� ������������������  게임을����������� ������������������  공용으로!(코드����������� ������������������  분산����������� ������������������  최소화)

MULTI����������� ������������������  STAGE

Page 12: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

게임����������� ������������������  중간의����������� ������������������  옵션����������� ������������������  메뉴����������� ������������������  게임����������� ������������������  상태를����������� ������������������  전달하기����������� ������������������  위한����������� ������������������  인포����������� ������������������  스크린����������� ������������������  (Ex.����������� ������������������  Game����������� ������������������  Over)

OPTION����������� ������������������  MENU

Page 13: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

화면 전환 효과의 예시를 위한 기본 예제 스크린

CREDIT

Page 14: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

사용자����������� ������������������  목록����������� ������������������  보기

Dashboard����������� ������������������  for����������� ������������������  ADMIN

Page 15: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

What����������� ������������������  technology����������� ������������������  needs?

스크린����������� ������������������  라우팅����������� ������������������  

멀티����������� ������������������  플레이를����������� ������������������  위한����������� ������������������  소켓����������� ������������������  네트워크����������� ������������������  

효과음을����������� ������������������  추가를����������� ������������������  위한����������� ������������������  사운드����������� ������������������  제어����������� ������������������  

게임����������� ������������������  화면을����������� ������������������  위한����������� ������������������  캔버스����������� ������������������  스테이지����������� ������������������  

UI����������� ������������������  인터페이스의����������� ������������������  이펙트

Page 16: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

What����������� ������������������  more?

Git����������� ������������������  레파지토리와����������� ������������������  ����������� ������������������  

WebStorm����������� ������������������  IDE만����������� ������������������  있으면?

개발����������� ������������������  준비����������� ������������������  끝!

Page 17: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Architecture

Page 18: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

프론트엔드에서����������� ������������������  ����������� ������������������  서버를����������� ������������������  넘어����������� ������������������  ����������� ������������������  DB까지

with����������� ������������������  Javascript

Page 19: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Web Socketsocket.io

Server

MongoDBMongoose.js

Node.jsExpress.js socket.io

Node-webkit (for Mac, windows) Phonegap (for Android, iOS, ETC)

Build with Grunt

Client MVC FrameworkBackbone.js

UI Effect Animate.css

NetworkSocket.io-client

Game Stage Canvas & WebGL

Page 20: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Front-End

Page 21: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

SPA?

Single����������� ������������������  Page����������� ������������������  Application하나의����������� ������������������  html����������� ������������������  로����������� ������������������  구성된����������� ������������������  어플리케이션����������� ������������������  

페이지����������� ������������������  이동이����������� ������������������  발생하지����������� ������������������  않음����������� ������������������  

페이지는����������� ������������������  오직����������� ������������������  하나! Inner����������� ������������������  Content만����������� ������������������  바꿔서����������� ������������������  화면을����������� ������������������  갱신����������� ������������������  

Google����������� ������������������  Map,����������� ������������������  Facebook����������� ������������������  Main,����������� ������������������  ETC.

Page 22: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

SPA를����������� ������������������  도입한����������� ������������������  이유

게임의����������� ������������������  Status를����������� ������������������  계속����������� ������������������  가지고����������� ������������������  있어야����������� ������������������  하는데����������� ������������������  페이지가����������� ������������������  바뀌면����������� ������������������  값이����������� ������������������  모두����������� ������������������  사라짐����������� ������������������  

서버에����������� ������������������  매번����������� ������������������  요청할����������� ������������������  수도����������� ������������������  있지만,����������� ������������������  그러기에는����������� ������������������  리소스����������� ������������������  부담이����������� ������������������  커짐����������� ������������������  

페이지����������� ������������������  전환시����������� ������������������  깜빡이는����������� ������������������  현상을����������� ������������������  보고����������� ������������������  싶지����������� ������������������  않음

Page 23: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

SPA의����������� ������������������  의문점

화면����������� ������������������  전환(라우팅)����������� ������������������  

URL����������� ������������������  접근에����������� ������������������  따른����������� ������������������  뷰����������� ������������������  노출����������� ������������������  

모든����������� ������������������  라이브러리를����������� ������������������  모두����������� ������������������  처음부터����������� ������������������  로드?����������� ������������������  

검색엔진����������� ������������������  최적화

Page 24: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

화면����������� ������������������  전환은����������� ������������������  어떻게����������� ������������������  할����������� ������������������  것인가?

메인이����������� ������������������  아닌����������� ������������������  특정����������� ������������������  URL을����������� ������������������  통해����������� ������������������  들어왔을����������� ������������������  때����������� ������������������  해당����������� ������������������  view를����������� ������������������  어떻게����������� ������������������  갱신����������� ������������������  시킬지에����������� ������������������  대한����������� ������������������  고민 URL����������� ������������������  Segmenthttp://{domain}/{class}/{method}/{seq}http://helloworld.com/board/freeboard/29

Page 25: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Backbone.js wayRouter

유저가����������� ������������������  http://game.com/#login을����������� ������������������  접속하면����������� ������������������  moveToStart����������� ������������������  메서드를����������� ������������������  자동����������� ������������������  호출 (Hash����������� ������������������  Tag����������� ������������������  이용����������� ������������������  방식)moveToStart����������� ������������������  메서드에는, login����������� ������������������  관련����������� ������������������  View����������� ������������������  호출����������� ������������������  로직이����������� ������������������  포함되어����������� ������������������  있음����������� ������������������  

Page 26: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

SPA의����������� ������������������  화면����������� ������������������  간����������� ������������������  전환����������� ������������������  방식

템플릿����������� ������������������  엔진들을����������� ������������������  사용하여����������� ������������������  컨테이너를����������� ������������������  교체해����������� ������������������  주는����������� ������������������  방식 로직이����������� ������������������  가능한����������� ������������������  엔진과����������� ������������������  로직����������� ������������������  less인����������� ������������������  엔진이����������� ������������������  있음����������� ������������������  (if,����������� ������������������  for����������� ������������������  등)(Mustache,����������� ������������������  Handlebars,����������� ������������������  Jade,����������� ������������������  ejs)

Page 27: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Source����������� ������������������  Load����������� ������������������  문제?

대용량����������� ������������������  자바스크립트의����������� ������������������  시대가����������� ������������������  도래 -����������� ������������������  관리����������� ������������������  할����������� ������������������  파일들이����������� ������������������  너무����������� ������������������  많음 -����������� ������������������  테트리스����������� ������������������  js����������� ������������������  loc����������� ������������������  :����������� ������������������  4000����������� ������������������  Line,����������� ������������������  소스����������� ������������������  파일만����������� ������������������  30개-����������� ������������������  라이브러리는?����������� ������������������  

require.js를����������� ������������������  이용한����������� ������������������  파일����������� ������������������  의존성����������� ������������������  관리����������� ������������������  

이제����������� ������������������  js도����������� ������������������  필요할����������� ������������������  때����������� ������������������  불러서����������� ������������������  쓴다.

Page 28: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

JS Load with Original way

Page 29: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

JS Loadwith Require.js

Page 30: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Spaghetti JS Code

뷰를����������� ������������������  위한����������� ������������������  로직과����������� ������������������  모델����������� ������������������  등이����������� ������������������  혼재����������� ������������������  되기����������� ������������������  쉬운����������� ������������������  javascript

어떻게����������� ������������������  역할을����������� ������������������  분담해서����������� ������������������  효과적으로����������� ������������������  프로그래밍����������� ������������������  할����������� ������������������  수����������� ������������������  있을까?

Page 31: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

구조를����������� ������������������  잡아주는����������� ������������������  Framework를����������� ������������������  쓰자

MVC����������� ������������������  프레임워크가����������� ������������������  필요����������� ������������������  

Model과����������� ������������������  View와����������� ������������������  Controller의����������� ������������������  역할을����������� ������������������  분리����������� ������������������  

모델이����������� ������������������  바뀌면����������� ������������������  UI도����������� ������������������  편하게����������� ������������������   갱신할����������� ������������������  수����������� ������������������  있으면����������� ������������������  좋겠다����������� ������������������  

여러사람이����������� ������������������  함께����������� ������������������  개발할����������� ������������������  수����������� ������������������  있게����������� ������������������   구조를����������� ������������������  잘����������� ������������������  잡아줬으면����������� ������������������  좋겠다

Page 32: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Backbone.js

가벼운����������� ������������������  js����������� ������������������  MVC����������� ������������������  프레임워크(6.5kb,����������� ������������������  Packed����������� ������������������  and����������� ������������������  gzipped)����������� ������������������  

js에서도����������� ������������������  클래스들에게����������� ������������������  역할을����������� ������������������  분담시키자����������� ������������������  

이벤트����������� ������������������  방식의����������� ������������������  “모델����������� ������������������  변화����������� ������������������  감지”는����������� ������������������  보너스(Pub/Sub)����������� ������������������  

• Router����������� ������������������  • View����������� ������������������  • Model����������� ������������������  • Collection

Page 33: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

2����������� ������������������  Way����������� ������������������  data����������� ������������������  binding

모델����������� ������������������  변화시����������� ������������������  뷰����������� ������������������  갱신,����������� ������������������  뷰����������� ������������������  변화시����������� ������������������  모델����������� ������������������  갱신 (Angular.js는����������� ������������������  2way����������� ������������������  binding이����������� ������������������  기본)����������� ������������������  

Backbone.js����������� ������������������  는����������� ������������������  기본적으로����������� ������������������   1Way����������� ������������������  Data����������� ������������������  binding만을����������� ������������������  지원����������� ������������������  

외부����������� ������������������  라이브러리를����������� ������������������  이용하면? 2����������� ������������������  Way����������� ������������������  Binding도����������� ������������������  가능(Backbone.ModelBinder)

Page 34: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

게임����������� ������������������  인터페이스는����������� ������������������  어떻게?

Canvas에����������� ������������������  UI����������� ������������������  전부����������� ������������������  그리기는����������� ������������������  너무����������� ������������������  어렵다����������� ������������������  

Input등의����������� ������������������  UI는����������� ������������������  어떻게����������� ������������������  할����������� ������������������  것인가?����������� ������������������  

그렇다면,UI는����������� ������������������  DOM으로����������� ������������������  만들고,게임����������� ������������������  스테이지만����������� ������������������  Canvas����������� ������������������  Draw! (혹은����������� ������������������  WebGL을����������� ������������������  이용)

Page 35: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

HTML5����������� ������������������  기반����������� ������������������  Painter����������� ������������������  어플리케이션 프로토타이핑����������� ������������������  

Canvas에����������� ������������������  input을����������� ������������������  구현해본����������� ������������������  경험

결과는?input����������� ������������������  제어는����������� ������������������  진짜����������� ������������������  너무����������� ������������������  힘듬모바일이����������� ������������������  정말����������� ������������������  힘듬

Page 36: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

메뉴����������� ������������������  인터페이스에����������� ������������������  활기를����������� ������������������  불어넣자

• animate.css����������� ������������������  http://daneden.github.io/animate.css����������� ������������������  

Easy to Use클래스를����������� ������������������  추가����������� ������������������  하는����������� ������������������  것����������� ������������������  만으로����������� ������������������  괜찮은����������� ������������������  애니메이션����������� ������������������  효과를����������� ������������������   얻을����������� ������������������  수����������� ������������������  있음

Page 37: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Sound����������� ������������������  재생은?

html5의����������� ������������������  sound����������� ������������������  API를����������� ������������������  이용한����������� ������������������   라이브러리로����������� ������������������  효과음����������� ������������������  재생����������� ������������������  

howler.js https://github.com/goldfire/howler.js

Page 38: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Network

http통신만으로����������� ������������������  실시간����������� ������������������  게임을����������� ������������������  만들기는����������� ������������������  무리����������� ������������������  

Web-Socket을����������� ������������������  이용한����������� ������������������  socket����������� ������������������  통신����������� ������������������  

훌륭한����������� ������������������  Web-socket����������� ������������������  라이브러리 socket.io를����������� ������������������  이용하기로����������� ������������������  결정����������� ������������������  

채널링����������� ������������������  (방����������� ������������������  관리)은����������� ������������������  보너스

Page 39: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Back-End

Page 40: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Node.js����������� ������������������  with����������� ������������������  Express.js

Node.js는����������� ������������������  구글의����������� ������������������  크롬����������� ������������������  V8����������� ������������������  자바스크립트����������� ������������������  엔진을����������� ������������������  기반으로����������� ������������������  한,����������� ������������������  고성능����������� ������������������  네트워크����������� ������������������  서버����������� ������������������  

Single����������� ������������������  Thread����������� ������������������  기반의����������� ������������������  Event����������� ������������������  Loop����������� ������������������  방식����������� ������������������   서버����������� ������������������  미들웨어����������� ������������������  

Express.jsNode.js����������� ������������������  기반의����������� ������������������  Http����������� ������������������  server����������� ������������������  Framework쉬운����������� ������������������  설치와����������� ������������������  빠른����������� ������������������  개발

Page 41: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

MongoDB����������� ������������������  with����������� ������������������  mongoose.js

• NoSQL����������� ������������������  Document����������� ������������������  Database����������� ������������������  

• Mongoose는����������� ������������������  비동기����������� ������������������  환경에서����������� ������������������  작동하게����������� ������������������  설계된����������� ������������������  MongoDB����������� ������������������  객체����������� ������������������  모델링����������� ������������������  도구����������� ������������������  (클라이언트����������� ������������������  도구)����������� ������������������  

• MongoDB는����������� ������������������  기본적으로����������� ������������������  Schema����������� ������������������  LessMongoose����������� ������������������  를����������� ������������������  이용해����������� ������������������  schema를����������� ������������������  이용할����������� ������������������  수����������� ������������������  있음

Page 42: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Start����������� ������������������  Development

Page 43: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

서버와����������� ������������������  클라이언트를����������� ������������������  한����������� ������������������  IDE에서,����������� ������������������  한����������� ������������������  언어로����������� ������������������  개발하는����������� ������������������  기이한����������� ������������������  현상

Page 44: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Easy����������� ������������������  JS����������� ������������������  Library����������� ������������������  ManagerBower

커맨드에서����������� ������������������  쉽게����������� ������������������  자바스크립트����������� ������������������  라이브러리를����������� ������������������  ����������� ������������������  관리할����������� ������������������  수����������� ������������������  있음����������� ������������������  

bower����������� ������������������  install����������� ������������������  jquerybower����������� ������������������  search����������� ������������������  underscore����������� ������������������  

< File result >bower_components/jquerybower_components/underscore

Page 45: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Bower DEMO

Page 46: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

JS����������� ������������������  Build����������� ������������������  withTask����������� ������������������  Runner����������� ������������������  Tool,����������� ������������������  Grunt

javascript도����������� ������������������  프로젝트����������� ������������������  규모가����������� ������������������  커짐에����������� ������������������  따라����������� ������������������   build를����������� ������������������  해야����������� ������������������  되는����������� ������������������  상황이����������� ������������������  왔음����������� ������������������  ����������� ������������������  

테트리스도����������� ������������������  파일����������� ������������������  30개,����������� ������������������  loc����������� ������������������  3000����������� ������������������  라인 빌드는����������� ������������������  자동화����������� ������������������  하기로����������� ������������������  결정js����������� ������������������  minification,js����������� ������������������  file����������� ������������������  merge,Unit����������� ������������������  Test����������� ������������������  Runner,And����������� ������������������  packaging …⋯

Page 47: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Save����������� ������������������  your����������� ������������������  times����������� ������������������  with����������� ������������������  Grunt.js

개발시에는����������� ������������������  console.log����������� ������������������  를����������� ������������������  추가하고����������� ������������������  빌드시에는����������� ������������������  자동으로����������� ������������������  제거개발이����������� ������������������  완료후����������� ������������������  uglify를����������� ������������������  이용해����������� ������������������  파일����������� ������������������  난독화����������� ������������������  및����������� ������������������  압축용량����������� ������������������  절감����������� ������������������  효과30개의����������� ������������������  파일을����������� ������������������  하나로!����������� ������������������  ����������� ������������������  (리퀘스트����������� ������������������  비용����������� ������������������  최소화)node-webkit����������� ������������������  plugin을이용하여����������� ������������������  nw����������� ������������������  자동����������� ������������������  빌드(mac에서도����������� ������������������  window����������� ������������������  pack����������� ������������������  생성����������� ������������������  가능

Page 48: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

What����������� ������������������  is����������� ������������������  Node-Webkit?

Front-Side에서도����������� ������������������  node.js가����������� ������������������  동작하게����������� ������������������  랩핑한����������� ������������������   일종의����������� ������������������  브라우저����������� ������������������  

Node-Webkit으로����������� ������������������  웹����������� ������������������  리소스를����������� ������������������  랩핑하면����������� ������������������   크로스플랫폼����������� ������������������  데스크탑����������� ������������������  어플리케이션이����������� ������������������  됨 (독립����������� ������������������  실행����������� ������������������  가능한����������� ������������������  exe����������� ������������������  혹은����������� ������������������  dmg����������� ������������������  파일로����������� ������������������  산출)

Page 49: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

What’s����������� ������������������  Next?Play����������� ������������������  with����������� ������������������  Full����������� ������������������  Stack����������� ������������������  Javascript

Page 50: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

자����������� ������������������  이제����������� ������������������  무엇을����������� ������������������  만들까요?

빠른����������� ������������������  프로토타이핑이����������� ������������������  가능한“동작하는����������� ������������������  서비스”����������� ������������������  

만능이라고는����������� ������������������  할����������� ������������������  수����������� ������������������  없지만,서비스����������� ������������������  개발을����������� ������������������  위한����������� ������������������  개발����������� ������������������  퍼포먼스는����������� ������������������  쓸만함����������� ������������������  

JS의����������� ������������������  탄탄한����������� ������������������  Echo����������� ������������������  System(Third����������� ������������������  party����������� ������������������  modules)����������� ������������������  

최근����������� ������������������  해외에서는����������� ������������������  MEAN����������� ������������������  이����������� ������������������  각광받고����������� ������������������  있음 (여기서����������� ������������������  Backbone.js����������� ������������������  를����������� ������������������  Angular.js����������� ������������������  로����������� ������������������  바꾸면)

Page 51: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Javascript Full Stack

Front-End부터 Back-End까지 Javascript 만으로 만들어 내는 서비스!단일 언어로 처음부터 끝까지 개발할 수 있다는 것은?

Page 52: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

Play����������� ������������������  Time

Page 53: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

http://goo.gl/HZaqzZ

User Dashboard : http://goo.gl/SksUrk

Page 54: [D2 오픈세미나]5.html5 api 테트리스게임_이진권

감사합니다!!����������� ������������������  

[email protected]