HTML5����������� ������������������ API를����������� ������������������ 활용한����������� ������������������ “실시간����������� ������������������ 대전����������� ������������������ 테트리스����������� ������������������ 게임”����������� ������������������ 개발
NHN����������� ������������������ Technology����������� ������������������ Services프론트엔드개발팀����������� ������������������ 이진권
NHN����������� ������������������ Technology����������� ������������������ Services����������� ������������������ !Front-End����������� ������������������ ����������� ������������������ Development����������� ������������������ Team
이진권
PHP개발자,����������� ������������������
Javascript����������� ������������������ 의����������� ������������������ 매력에����������� ������������������ 빠지다Naver����������� ������������������ 고객센터����������� ������������������ Javascript����������� ������������������ 개발����������� ������������������
Naver����������� ������������������ 자동차����������� ������������������ 서비스����������� ������������������ Javascript����������� ������������������ 개발Line����������� ������������������ Messanger����������� ������������������ for����������� ������������������ Firefox����������� ������������������ OS����������� ������������������
사내����������� ������������������ 웹����������� ������������������ 메신저����������� ������������������ 개발����������� ������������������ 참여
코드����������� ������������������ 농사꾼����������� ������������������ Code����������� ������������������ Farmer
Agenda
Tetris로����������� ������������������ 개발하기까지����������� ������������������
Game����������� ������������������ UI����������� ������������������ Design����������� ������������������
ArchitectureFront-EndBackground-End����������� ������������������
Start����������� ������������������ Development����������� ������������������
Play����������� ������������������ with����������� ������������������ Full����������� ������������������ Stack����������� ������������������ JS
Tetris
네개의����������� ������������������ 사각형으로����������� ������������������ 이뤄진����������� ������������������ 테트리스����������� ������������������ 블록����������� ������������������ 오리지널의����������� ������������������ 경우, 블록����������� ������������������ 종류는����������� ������������������ 총����������� ������������������ 7가지
테트리스����������� ������������������ with����������� ������������������ 테트리미노
Tetris����������� ������������������ 를����������� ������������������ ����������� ������������������ 주제로����������� ������������������ 선택한����������� ������������������ 이유
• 게임����������� ������������������ 로직이����������� ������������������ 단순����������� ������������������ 심플(개발����������� ������������������ 용이)����������� ������������������
• 개인����������� ������������������ 프로젝트로����������� ������������������ 재밌는����������� ������������������ 개발을����������� ������������������ 해보자����������� ������������������
• 프론트엔드����������� ������������������ 개발����������� ������������������ 중심서버����������� ������������������ 개발까지����������� ������������������
• 이왕����������� ������������������ 하는거����������� ������������������ 1:100(멀티����������� ������������������ 게임)
Game����������� ������������������ UI����������� ������������������ Design
게임����������� ������������������ 인트로����������� ������������������ 화면이자����������� ������������������ 사용자와����������� ������������������ 첫����������� ������������������ 접합점����������� ������������������ 사용자����������� ������������������ 분별을����������� ������������������ 위한����������� ������������������ 로그인,����������� ������������������ 로그인과����������� ������������������ 가입을����������� ������������������ 하나의����������� ������������������ 스크린으로!
INTRO����������� ������������������ &����������� ������������������ LOGIN
화면����������� ������������������ 간����������� ������������������ 이동을����������� ������������������ 위한����������� ������������������ 대시보드����������� ������������������ 메뉴����������� ������������������ 이동이����������� ������������������ 직관적이면����������� ������������������ 좋겠다
DASHBOARD
게임����������� ������������������ 스테이지����������� ������������������ 인터페이스����������� ������������������ 디자인네트워크����������� ������������������ 게임과����������� ������������������ 싱글����������� ������������������ 게임을����������� ������������������ 공용으로!(코드����������� ������������������ 분산����������� ������������������ 최소화)
SINGLE����������� ������������������ STAGE
게임����������� ������������������ 스테이지����������� ������������������ 인터페이스����������� ������������������ 디자인네트워크����������� ������������������ 게임과����������� ������������������ 싱글����������� ������������������ 게임을����������� ������������������ 공용으로!(코드����������� ������������������ 분산����������� ������������������ 최소화)
MULTI����������� ������������������ STAGE
게임����������� ������������������ 중간의����������� ������������������ 옵션����������� ������������������ 메뉴����������� ������������������ 게임����������� ������������������ 상태를����������� ������������������ 전달하기����������� ������������������ 위한����������� ������������������ 인포����������� ������������������ 스크린����������� ������������������ (Ex.����������� ������������������ Game����������� ������������������ Over)
OPTION����������� ������������������ MENU
화면 전환 효과의 예시를 위한 기본 예제 스크린
CREDIT
사용자����������� ������������������ 목록����������� ������������������ 보기
Dashboard����������� ������������������ for����������� ������������������ ADMIN
What����������� ������������������ technology����������� ������������������ needs?
스크린����������� ������������������ 라우팅����������� ������������������
멀티����������� ������������������ 플레이를����������� ������������������ 위한����������� ������������������ 소켓����������� ������������������ 네트워크����������� ������������������
효과음을����������� ������������������ 추가를����������� ������������������ 위한����������� ������������������ 사운드����������� ������������������ 제어����������� ������������������
게임����������� ������������������ 화면을����������� ������������������ 위한����������� ������������������ 캔버스����������� ������������������ 스테이지����������� ������������������
UI����������� ������������������ 인터페이스의����������� ������������������ 이펙트
What����������� ������������������ more?
Git����������� ������������������ 레파지토리와����������� ������������������ ����������� ������������������
WebStorm����������� ������������������ IDE만����������� ������������������ 있으면?
개발����������� ������������������ 준비����������� ������������������ 끝!
Architecture
프론트엔드에서����������� ������������������ ����������� ������������������ 서버를����������� ������������������ 넘어����������� ������������������ ����������� ������������������ DB까지
with����������� ������������������ Javascript
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
Front-End
SPA?
Single����������� ������������������ Page����������� ������������������ Application하나의����������� ������������������ html����������� ������������������ 로����������� ������������������ 구성된����������� ������������������ 어플리케이션����������� ������������������
페이지����������� ������������������ 이동이����������� ������������������ 발생하지����������� ������������������ 않음����������� ������������������
페이지는����������� ������������������ 오직����������� ������������������ 하나! Inner����������� ������������������ Content만����������� ������������������ 바꿔서����������� ������������������ 화면을����������� ������������������ 갱신����������� ������������������
Google����������� ������������������ Map,����������� ������������������ Facebook����������� ������������������ Main,����������� ������������������ ETC.
SPA를����������� ������������������ 도입한����������� ������������������ 이유
게임의����������� ������������������ Status를����������� ������������������ 계속����������� ������������������ 가지고����������� ������������������ 있어야����������� ������������������ 하는데����������� ������������������ 페이지가����������� ������������������ 바뀌면����������� ������������������ 값이����������� ������������������ 모두����������� ������������������ 사라짐����������� ������������������
서버에����������� ������������������ 매번����������� ������������������ 요청할����������� ������������������ 수도����������� ������������������ 있지만,����������� ������������������ 그러기에는����������� ������������������ 리소스����������� ������������������ 부담이����������� ������������������ 커짐����������� ������������������
페이지����������� ������������������ 전환시����������� ������������������ 깜빡이는����������� ������������������ 현상을����������� ������������������ 보고����������� ������������������ 싶지����������� ������������������ 않음
SPA의����������� ������������������ 의문점
화면����������� ������������������ 전환(라우팅)����������� ������������������
URL����������� ������������������ 접근에����������� ������������������ 따른����������� ������������������ 뷰����������� ������������������ 노출����������� ������������������
모든����������� ������������������ 라이브러리를����������� ������������������ 모두����������� ������������������ 처음부터����������� ������������������ 로드?����������� ������������������
검색엔진����������� ������������������ 최적화
화면����������� ������������������ 전환은����������� ������������������ 어떻게����������� ������������������ 할����������� ������������������ 것인가?
메인이����������� ������������������ 아닌����������� ������������������ 특정����������� ������������������ URL을����������� ������������������ 통해����������� ������������������ 들어왔을����������� ������������������ 때����������� ������������������ 해당����������� ������������������ view를����������� ������������������ 어떻게����������� ������������������ 갱신����������� ������������������ 시킬지에����������� ������������������ 대한����������� ������������������ 고민 URL����������� ������������������ Segmenthttp://{domain}/{class}/{method}/{seq}http://helloworld.com/board/freeboard/29
Backbone.js wayRouter
유저가����������� ������������������ http://game.com/#login을����������� ������������������ 접속하면����������� ������������������ moveToStart����������� ������������������ 메서드를����������� ������������������ 자동����������� ������������������ 호출 (Hash����������� ������������������ Tag����������� ������������������ 이용����������� ������������������ 방식)moveToStart����������� ������������������ 메서드에는, login����������� ������������������ 관련����������� ������������������ View����������� ������������������ 호출����������� ������������������ 로직이����������� ������������������ 포함되어����������� ������������������ 있음����������� ������������������
SPA의����������� ������������������ 화면����������� ������������������ 간����������� ������������������ 전환����������� ������������������ 방식
템플릿����������� ������������������ 엔진들을����������� ������������������ 사용하여����������� ������������������ 컨테이너를����������� ������������������ 교체해����������� ������������������ 주는����������� ������������������ 방식 로직이����������� ������������������ 가능한����������� ������������������ 엔진과����������� ������������������ 로직����������� ������������������ less인����������� ������������������ 엔진이����������� ������������������ 있음����������� ������������������ (if,����������� ������������������ for����������� ������������������ 등)(Mustache,����������� ������������������ Handlebars,����������� ������������������ Jade,����������� ������������������ ejs)
Source����������� ������������������ Load����������� ������������������ 문제?
대용량����������� ������������������ 자바스크립트의����������� ������������������ 시대가����������� ������������������ 도래 -����������� ������������������ 관리����������� ������������������ 할����������� ������������������ 파일들이����������� ������������������ 너무����������� ������������������ 많음 -����������� ������������������ 테트리스����������� ������������������ js����������� ������������������ loc����������� ������������������ :����������� ������������������ 4000����������� ������������������ Line,����������� ������������������ 소스����������� ������������������ 파일만����������� ������������������ 30개-����������� ������������������ 라이브러리는?����������� ������������������
require.js를����������� ������������������ 이용한����������� ������������������ 파일����������� ������������������ 의존성����������� ������������������ 관리����������� ������������������
이제����������� ������������������ js도����������� ������������������ 필요할����������� ������������������ 때����������� ������������������ 불러서����������� ������������������ 쓴다.
JS Load with Original way
JS Loadwith Require.js
Spaghetti JS Code
뷰를����������� ������������������ 위한����������� ������������������ 로직과����������� ������������������ 모델����������� ������������������ 등이����������� ������������������ 혼재����������� ������������������ 되기����������� ������������������ 쉬운����������� ������������������ javascript
어떻게����������� ������������������ 역할을����������� ������������������ 분담해서����������� ������������������ 효과적으로����������� ������������������ 프로그래밍����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있을까?
구조를����������� ������������������ 잡아주는����������� ������������������ Framework를����������� ������������������ 쓰자
MVC����������� ������������������ 프레임워크가����������� ������������������ 필요����������� ������������������
Model과����������� ������������������ View와����������� ������������������ Controller의����������� ������������������ 역할을����������� ������������������ 분리����������� ������������������
모델이����������� ������������������ 바뀌면����������� ������������������ UI도����������� ������������������ 편하게����������� ������������������ 갱신할����������� ������������������ 수����������� ������������������ 있으면����������� ������������������ 좋겠다����������� ������������������
여러사람이����������� ������������������ 함께����������� ������������������ 개발할����������� ������������������ 수����������� ������������������ 있게����������� ������������������ 구조를����������� ������������������ 잘����������� ������������������ 잡아줬으면����������� ������������������ 좋겠다
Backbone.js
가벼운����������� ������������������ js����������� ������������������ MVC����������� ������������������ 프레임워크(6.5kb,����������� ������������������ Packed����������� ������������������ and����������� ������������������ gzipped)����������� ������������������
js에서도����������� ������������������ 클래스들에게����������� ������������������ 역할을����������� ������������������ 분담시키자����������� ������������������
이벤트����������� ������������������ 방식의����������� ������������������ “모델����������� ������������������ 변화����������� ������������������ 감지”는����������� ������������������ 보너스(Pub/Sub)����������� ������������������
• Router����������� ������������������ • View����������� ������������������ • Model����������� ������������������ • Collection
2����������� ������������������ Way����������� ������������������ data����������� ������������������ binding
모델����������� ������������������ 변화시����������� ������������������ 뷰����������� ������������������ 갱신,����������� ������������������ 뷰����������� ������������������ 변화시����������� ������������������ 모델����������� ������������������ 갱신 (Angular.js는����������� ������������������ 2way����������� ������������������ binding이����������� ������������������ 기본)����������� ������������������
Backbone.js����������� ������������������ 는����������� ������������������ 기본적으로����������� ������������������ 1Way����������� ������������������ Data����������� ������������������ binding만을����������� ������������������ 지원����������� ������������������
외부����������� ������������������ 라이브러리를����������� ������������������ 이용하면? 2����������� ������������������ Way����������� ������������������ Binding도����������� ������������������ 가능(Backbone.ModelBinder)
게임����������� ������������������ 인터페이스는����������� ������������������ 어떻게?
Canvas에����������� ������������������ UI����������� ������������������ 전부����������� ������������������ 그리기는����������� ������������������ 너무����������� ������������������ 어렵다����������� ������������������
Input등의����������� ������������������ UI는����������� ������������������ 어떻게����������� ������������������ 할����������� ������������������ 것인가?����������� ������������������
그렇다면,UI는����������� ������������������ DOM으로����������� ������������������ 만들고,게임����������� ������������������ 스테이지만����������� ������������������ Canvas����������� ������������������ Draw! (혹은����������� ������������������ WebGL을����������� ������������������ 이용)
HTML5����������� ������������������ 기반����������� ������������������ Painter����������� ������������������ 어플리케이션 프로토타이핑����������� ������������������
Canvas에����������� ������������������ input을����������� ������������������ 구현해본����������� ������������������ 경험
결과는?input����������� ������������������ 제어는����������� ������������������ 진짜����������� ������������������ 너무����������� ������������������ 힘듬모바일이����������� ������������������ 정말����������� ������������������ 힘듬
메뉴����������� ������������������ 인터페이스에����������� ������������������ 활기를����������� ������������������ 불어넣자
• animate.css����������� ������������������ http://daneden.github.io/animate.css����������� ������������������
Easy to Use클래스를����������� ������������������ 추가����������� ������������������ 하는����������� ������������������ 것����������� ������������������ 만으로����������� ������������������ 괜찮은����������� ������������������ 애니메이션����������� ������������������ 효과를����������� ������������������ 얻을����������� ������������������ 수����������� ������������������ 있음
Sound����������� ������������������ 재생은?
html5의����������� ������������������ sound����������� ������������������ API를����������� ������������������ 이용한����������� ������������������ 라이브러리로����������� ������������������ 효과음����������� ������������������ 재생����������� ������������������
howler.js https://github.com/goldfire/howler.js
Network
http통신만으로����������� ������������������ 실시간����������� ������������������ 게임을����������� ������������������ 만들기는����������� ������������������ 무리����������� ������������������
Web-Socket을����������� ������������������ 이용한����������� ������������������ socket����������� ������������������ 통신����������� ������������������
훌륭한����������� ������������������ Web-socket����������� ������������������ 라이브러리 socket.io를����������� ������������������ 이용하기로����������� ������������������ 결정����������� ������������������
채널링����������� ������������������ (방����������� ������������������ 관리)은����������� ������������������ 보너스
Back-End
Node.js����������� ������������������ with����������� ������������������ Express.js
Node.js는����������� ������������������ 구글의����������� ������������������ 크롬����������� ������������������ V8����������� ������������������ 자바스크립트����������� ������������������ 엔진을����������� ������������������ 기반으로����������� ������������������ 한,����������� ������������������ 고성능����������� ������������������ 네트워크����������� ������������������ 서버����������� ������������������
Single����������� ������������������ Thread����������� ������������������ 기반의����������� ������������������ Event����������� ������������������ Loop����������� ������������������ 방식����������� ������������������ 서버����������� ������������������ 미들웨어����������� ������������������
Express.jsNode.js����������� ������������������ 기반의����������� ������������������ Http����������� ������������������ server����������� ������������������ Framework쉬운����������� ������������������ 설치와����������� ������������������ 빠른����������� ������������������ 개발
MongoDB����������� ������������������ with����������� ������������������ mongoose.js
• NoSQL����������� ������������������ Document����������� ������������������ Database����������� ������������������
• Mongoose는����������� ������������������ 비동기����������� ������������������ 환경에서����������� ������������������ 작동하게����������� ������������������ 설계된����������� ������������������ MongoDB����������� ������������������ 객체����������� ������������������ 모델링����������� ������������������ 도구����������� ������������������ (클라이언트����������� ������������������ 도구)����������� ������������������
• MongoDB는����������� ������������������ 기본적으로����������� ������������������ Schema����������� ������������������ LessMongoose����������� ������������������ 를����������� ������������������ 이용해����������� ������������������ schema를����������� ������������������ 이용할����������� ������������������ 수����������� ������������������ 있음
Start����������� ������������������ Development
서버와����������� ������������������ 클라이언트를����������� ������������������ 한����������� ������������������ IDE에서,����������� ������������������ 한����������� ������������������ 언어로����������� ������������������ 개발하는����������� ������������������ 기이한����������� ������������������ 현상
Easy����������� ������������������ JS����������� ������������������ Library����������� ������������������ ManagerBower
커맨드에서����������� ������������������ 쉽게����������� ������������������ 자바스크립트����������� ������������������ 라이브러리를����������� ������������������ ����������� ������������������ 관리할����������� ������������������ 수����������� ������������������ 있음����������� ������������������
bower����������� ������������������ install����������� ������������������ jquerybower����������� ������������������ search����������� ������������������ underscore����������� ������������������
< File result >bower_components/jquerybower_components/underscore
Bower DEMO
JS����������� ������������������ Build����������� ������������������ withTask����������� ������������������ Runner����������� ������������������ Tool,����������� ������������������ Grunt
javascript도����������� ������������������ 프로젝트����������� ������������������ 규모가����������� ������������������ 커짐에����������� ������������������ 따라����������� ������������������ build를����������� ������������������ 해야����������� ������������������ 되는����������� ������������������ 상황이����������� ������������������ 왔음����������� ������������������ ����������� ������������������
테트리스도����������� ������������������ 파일����������� ������������������ 30개,����������� ������������������ loc����������� ������������������ 3000����������� ������������������ 라인 빌드는����������� ������������������ 자동화����������� ������������������ 하기로����������� ������������������ 결정js����������� ������������������ minification,js����������� ������������������ file����������� ������������������ merge,Unit����������� ������������������ Test����������� ������������������ Runner,And����������� ������������������ packaging …⋯
Save����������� ������������������ your����������� ������������������ times����������� ������������������ with����������� ������������������ Grunt.js
개발시에는����������� ������������������ console.log����������� ������������������ 를����������� ������������������ 추가하고����������� ������������������ 빌드시에는����������� ������������������ 자동으로����������� ������������������ 제거개발이����������� ������������������ 완료후����������� ������������������ uglify를����������� ������������������ 이용해����������� ������������������ 파일����������� ������������������ 난독화����������� ������������������ 및����������� ������������������ 압축용량����������� ������������������ 절감����������� ������������������ 효과30개의����������� ������������������ 파일을����������� ������������������ 하나로!����������� ������������������ ����������� ������������������ (리퀘스트����������� ������������������ 비용����������� ������������������ 최소화)node-webkit����������� ������������������ plugin을이용하여����������� ������������������ nw����������� ������������������ 자동����������� ������������������ 빌드(mac에서도����������� ������������������ window����������� ������������������ pack����������� ������������������ 생성����������� ������������������ 가능
What����������� ������������������ is����������� ������������������ Node-Webkit?
Front-Side에서도����������� ������������������ node.js가����������� ������������������ 동작하게����������� ������������������ 랩핑한����������� ������������������ 일종의����������� ������������������ 브라우저����������� ������������������
Node-Webkit으로����������� ������������������ 웹����������� ������������������ 리소스를����������� ������������������ 랩핑하면����������� ������������������ 크로스플랫폼����������� ������������������ 데스크탑����������� ������������������ 어플리케이션이����������� ������������������ 됨 (독립����������� ������������������ 실행����������� ������������������ 가능한����������� ������������������ exe����������� ������������������ 혹은����������� ������������������ dmg����������� ������������������ 파일로����������� ������������������ 산출)
What’s����������� ������������������ Next?Play����������� ������������������ with����������� ������������������ Full����������� ������������������ Stack����������� ������������������ Javascript
자����������� ������������������ 이제����������� ������������������ 무엇을����������� ������������������ 만들까요?
빠른����������� ������������������ 프로토타이핑이����������� ������������������ 가능한“동작하는����������� ������������������ 서비스”����������� ������������������
만능이라고는����������� ������������������ 할����������� ������������������ 수����������� ������������������ 없지만,서비스����������� ������������������ 개발을����������� ������������������ 위한����������� ������������������ 개발����������� ������������������ 퍼포먼스는����������� ������������������ 쓸만함����������� ������������������
JS의����������� ������������������ 탄탄한����������� ������������������ Echo����������� ������������������ System(Third����������� ������������������ party����������� ������������������ modules)����������� ������������������
최근����������� ������������������ 해외에서는����������� ������������������ MEAN����������� ������������������ 이����������� ������������������ 각광받고����������� ������������������ 있음 (여기서����������� ������������������ Backbone.js����������� ������������������ 를����������� ������������������ Angular.js����������� ������������������ 로����������� ������������������ 바꾸면)
Javascript Full Stack
Front-End부터 Back-End까지 Javascript 만으로 만들어 내는 서비스!단일 언어로 처음부터 끝까지 개발할 수 있다는 것은?
Play����������� ������������������ Time
http://goo.gl/HZaqzZ
User Dashboard : http://goo.gl/SksUrk