[Korea Linux Forum] Implementing web based online multiplayer tetris with OpenSource

JinKwon Lee
JinKwon LeeFront-End Developer à NAVER
Implementing 
web based 
online multiplayer 
Tetris with 
Open 
Source 
Jin Kwon Lee 
NHN Technology Services
Speaker 
NHN Technology Services 
Jin-Kwon Lee 
Front-End Developer
Without JavaScript
Without JavaScript
Who is 
Front-End Developer? 
• Markup(HTML, CSS), JavaScript 등을 이용해 
사용자가 접하는 웹 사이트 영역을 개발하는 개발자 
• 최근에는 웹 접근성, UX/UI, 웹 사이트 최적화 
등의 업무를 같이 수행
Who is 
Front-End Developer? 
HTML코더 
Markup 
Developer 
UI 
Developer 
Front-End 
Developer 
HTML ⊙ ⊙ ● ⊙ 
CSS ● ⊙ ● ⊙ 
웹 접근성 ⊙ ● ⊙ 
웹 표준 준수 ⊙ ● ⊙ 
Javascript ● ⊙ ⊙ 
프론트 성능 최적화 ● ⊙ 
UI/UX ● ⊙
자바스크립트의 시작 
모자이크(당시의 1위 브라우저)를 이길려면 뭔가 
괜찮은 것이 필요해! 
웹페이지에 넣을 간단한 프로그래밍 언어를 
고안해보자. 
Netscape Communications 
Brendan Eich 
1995.8.19 
최초로 JS가 포함된 Netscape 브라우저 발표
이름을 지어야 하는데, 
인기있는 Java이름을 붙여서 지으면 
같이 인기가 오르지 않을까? 
빌조이! 제가 언어 하나 만들었는데 
여기에 Java를 붙여 JavaScript 
라고 해도 될까요? 
응. 
너 맘대로해~!! 
Sun MicroSystems 
Bill Joy
그래서 자바와는 관계도 없이 
이름만 JavaScript 
훗날 Java이름을 허용한 Bill Joy는 
“잘못된 결정” 이었다는 발언을 함
마우스 우클릭만으로, 
이미 오픈되어 있는 JavaScript 소스코드 
태생부터 OPEN
JS 발전 과정 
2 
글로벌 IT기업들이 
본격적으로 JS를 사용 시작 
3 
다양한 UX를 가진 
웹 어플리케이션 등장 
혁신적인 Google Map 
5 
iOS Web Browser 
Flash 미지원, 대안으로 JS 
4 
웹 2.0, HTML5와 더불어 
JS도 발전 
수많은 선수 입장 
6 
Android Web Browser 
도 따라서 Flash 미지원 
1 
출시 후 오랜 시간동안 
Toy Language 취급
JS 
입장한 선수들로부터 
쏟아져 나오는 Open Source 
383,185 
Github JavaScript repository
입장한 선수들은 뭐든지 만들고, 
. (dot) JS 를 붙여서 공개하기 시작 
Whatever _____ . JS
JavaScript 원정대 
Browser 
Library 
Desktop 
Server-Side 
JavaScript 
Application 
JS in Device, 
IoT 
Database with 
JSON 
여러가지 분야로 발전
Browser Library 
Browser 
Library 
ServerSide 
JavaScript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
간단한 Util 성격의 라이브러리부터, 
jQuery, Underscore, Zepto 
HTML5 고도화 라이브러리, 
Three.js, Socket.io, Raphael 
그리고, MVC 프레임워크를 넘어, 
Backbone.js, Angular.js, Ember.js 
Complie Javascript까지 다양한 발전 
CoffeeScript, TypeScript, Dart, JSX 
이제 Web도 어플리케이션이라는 
수준에 이르렀음
Server Side Javascript 
Browser 
Library 
ServerSide 
JavaScript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
서버에서도 자바스크립트를 
돌릴 수 있지 않을까? 
구글 v8 JS 엔진을 포함하는 
서버 사이드 JavaScript 플랫폼 탄생 
서드파티 패키지 at NPM 
Total : 104,651
서버에서 JS를 돌려서 뭘하죠? 
Spring 
Framework 
Node.js PHP on 
기존 플랫폼및 언어와 같은 레벨에서 
서비스를 개발할 수 있게 되었음 
Browser 
Library 
ServerSide 
JavaScript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
Linux 
Apache 
Java on 
Tomcat 
Lalavel 
Framework 
express.js 
Framework
Desktop App 
Browser 
Library 
ServerSide 
JavaScript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
데스크탑 어플리케이션도 웹기술로 만들 
수 있지 않을까? 
웹은 브라우저를 벗어날 수 없기 때문에 
밖으로 나갈 방법을 찾기 시작 
Web App Desktop App
Desktop App 
Browser 
Library 
ServerSide 
JavaScript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
Node-Webkit 
클라이언트인 기술인 웹킷에, 
앞서 설명한 서버 기술인 Node.js를 포함 
Node.js 가 할 수 있는 것들을 프론트에서 
쓸 수 있게 됨
Database with JSON 
Browser 
Library 
ServerSide 
Javascript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
NoSQL 데이터베이스 mongoDB 
도큐먼트 지향 데이터베이스 시스템 
JSON 스타일의 문서를 저장 
(JavaScript Object Notation)
JS in Device, IoT 
Browser 
Library 
ServerSide 
Javascript 
Desktop 
Application 
Database 
with JSON 
JS in 
Device, IoT 
Raspberry Pi 
Node.js 플랫폼 
설치가능 
Device 제어를 
JS Code로 할 수 있음 
with pi.js
이제야 무언가 
개발 해 볼만 하다 싶었습니다 
이왕이면 재밌는 걸로!
Let’s make GAMES
개발 주제 선정은? 
주제 선정의 목적은, 
Full Stack JS를 이용한 제품 개발 
단순한 주제로 시작해 보기 
프론트엔드 개발 중심으로 서버까지! 
멀티 유저 게임으로 
비교적 단순한 로직의 테트리스?
프론트엔드 개발 프로세스 
요구사항 
분석 
라이브러리 
선정 
개발환경 
구축 
프레임워크 
선정 
설계 
개발/ 
테스트 
배포환경 
구축 
1 2 3 4 5 6 7 
8 
성능 
최적화 
배포 
9
요구사항 분석 
‣네개의 사각형으로 이뤄진 블록 
‣위에서 천천히 블록이 내려옴 
‣한줄을 채우면 점수 획득 
‣ 시간이 지날수록 속도는 빨라짐 
‣블럭이 최상단까지 쌓이면 게임 종료
기술적 요구 사항 
‣ Multi Play를 하려면 소켓 연결이 필요함 
(WebSocket) 
‣ Game Status 는 유지되어야 함 
(Do not replace URL) 
‣ 사용자간 데이터 통신 필요 
‣ 게임은 높은 프레임으로 화면을 갱신해야 함
Framework & Library 
선정
프레임워크 선정 
JS에서의 프레임워크는? 
중복 코드 제거, 생산성 향상, 코드 일관성 유지 
특정 프레임워크가 만능이 아니기 때문에 
필요에 따라 골라서 사용
JavaScript Full Stack 
모두 JavaScript관련 기술만으로 선정 
Client MVC Framework 
Server Platform 
Server MVC Framework 
NoSQL DB
라이브러리 선정 
There are too many libraries 
프로젝트에 적합한 라이브러리를 잘 
선택하는 것도 업무중 하나! 
프레임워크와는 다르게 라이브러리는 독립성이 있음 
(유틸리티 성격이 강함)
개발환경 구축
개발환경 구축 
더이상 Notepad에서 개발하지 않아요 
똑똑한 IDE, WebStorm 9 
코드 정적 분석, 실시간 코드 유효성 체크, ETC.
Project Scaffolding 
예전처럼 파일 복사해서 개발하지 않음 
Scaffolding 유틸리티를 이용하여 개발 환경 세팅 
YEOMAN, GRUNT-INIT 
단일 커맨드 실행으로 프로젝트 폴더 설정
커맨드로 라이브러리 복사 
쉬운 라이브러리 관리 
Bower 유틸리티를 활용해서 커맨드에서 쉽게 
자바스크립트 라이브러리를 관리할 수 있음 
bower install jquery 
bower search underscore 
< File result > 
bower_components/jquery 
bower_components/underscore
Chrome Debugger 
진보된 자바스크립트 디버깅 환경 
watch runtime 
scope variables
설계
UI/UX 설계 
최고의 UX설계 도구는 역시 손 그림
화면 설계 
Login Dashboard 
Single 
Game 
Multi 
Robby 
Option 
Score 
Board 
Multi 
Game
사용 기술 
Web Socket 
Server 
Node.js 
express.js 
socket.io 
MongoDB 
Mongoose.js 
Client 
MVC Framework 
Backbone.js 
UI Effect 
Animate.css 
Network 
Socket.io-client 
Game Stage 
Canvas & WebGL 
Build with Grunt 
Node-webkit (for Mac, windows) 
Phonegap (for Android, iOS, ETC)
Modeling 
설계한 DB모델은, 
서버와 클라이언트 양쪽에서 그대로 사용됨 
Server 
JSON 
DB 
JSON 
Client 
JSON
Model Schema 
유저정보 객체. 세션정보와 인증 정보 저장
Model Schema 
멀티게임 방 정보 객체. 
방에 join 한 사용자 정보는 users로 명시된 
서브 컬렉션에 Push 
방을 생성한 owner는 게임을 시작할 수 있다
Model Schema 
멀티게임에 접속한 유저 정보 객체 
테트리스 화면의 배열과 스코어 정보
Model Schema 
개인별로 최신 점수를 획득시, 
Score 콜렉션에 기록 
ScoreBoard 에서 순위별 점수 확인
Client Architecture 
뷰와 모델의 로직이 혼재되기 쉬운 JavaScript 
JavaScript의 개발 규모가 커지면서, 
다른 언어에서 사용된 개발 패턴들이 도입됨 
(MVC, Facade, Singleton, ETC…) 
각 클래스에도 각자 역할 분담 필요!
Client Architecture 
이제 JavaScript에도 MVC 패턴이 이용됨 
단일 페이지에서 서버와 API 통신을 하면서 
화면 갱신 
Client Side MV* Framework
Server Architecture 
Server Platform, Node.js 
Server MVC Framework, express.js 
NoSQL Database, mongoDB
Server Architecture 
– Account Manager : 가입과 로그인을 담당
Server Architecture 
Game Manager : 멀티 게임 관리
개발/테스트
테트리스 로직 구현 
2차원배열 : matrix[x][x] 
Event Tick이 지날때마다 
블록 이동 
틱마다 충돌 및 스코어 체크 
움직였을 때 블록이 충돌하면 
배열에 추가 
한줄이 차면 제거/스코어 추가
테트리스 스테이지 초기화 
2차원 배열을 
화면으로 그리면
테트리스 블록 모델 
회전 각도 설정 
이 안에 블록 
충돌 체크 
블록 회전
Stage Canvas 
셀의 Flag가 1이면 
drawBlock 
drawBlock안에는 해당 값으로 
canvas에 그림을 그리는 로직이 있음
Draw Game Stage 
2D Stage in Canvas 3D Stage in WebGL
WebGL Now 
Global Coverage 48.27% + 26.37% = 74.64%
Data Handling 
클라이언트에서 생성한 JavaScript Object가 
서버까지 변환없이 그대로 전달. (ORM 필요 없음) 
Create Object 
from Client (Browser) 
Web 
Server 
NoSQL 
Database 
Pass-thru without converting!!
Cli/Server Network 
Socket Communication 
on과 emit의 마법 
Client Code 
socket.emit(‘sendMessage’, data); 
socket.on(‘receive’, function(){ 
alert(‘Server received Message’); 
}); 
socket.on(‘sendMessage’, function(data){ 
socket.broadcast.emit(‘receive’); 
}); 
Server Code
빌드 및 배포환경 구축
JS Build Environment 
with Grunt.js 
자바스크립트 태스크 러너 
여러가지 귀찮은 작업들을 커맨드 한번에 실행 
> js 파일 압축, css 최적화 등 
gruntfile.js 생성 
(설정 파일) 
GRUNT 실행 
(with ONE Command) 
최종 산출물 파일 
생성 완료
JavaScript Deploy 
Deploy 용 환경 구축후, git push가 발생하면 
(git hook 이용) 개발 서버에 자동으로 Deploy 
Deploy는? grunt.js 태스크 러너를 이용함
Packaging N Device 
Web’s good parts, can run everywhere 
MOBILE APP 
DESKTOP APP 
Web Product 
HTML, CSS, JS 
Tizen
Phonegap 환경 
WebView를 포함하는 
네이티브 앱 구조 
네이티브 API도 JS레벨에서 
사용할 수 있음 (Bridge) 
WebView 
Native App 
OS
Node-Webkit 환경 
데스크탑 어플리케이션 플랫폼. 
윈도우, OSX, Ubuntu 지원 
DESKTOP APP 
Build 
Build 
Build
Package 배포 
OS별로, 
실행 가능한, 
독립 어플리케이션 
빌드 완료
Code is Open at Github 
https://github.com/Jinkwon/tetris.js
Play Game! 
http://srv.bdyne.net/dn
What do you want to do? 
Front-End 부터 Back-End까지 하나의 언어 
이전에 PHP가 쉬운 접근의 언어 역할을 했다면, 
빠른 개발 퍼포먼스로 그 역할을 대체할만한 
JavaScript Full Stack 
It’s for StartUp!!!!
Let's Make 
something nice! 
Thanks!!! 
lee.jinkwon@nhn.com
1 sur 70

Recommandé

Logcat과 함께 하는 모바일 웹 디버깅 par
Logcat과 함께 하는 모바일 웹 디버깅Logcat과 함께 하는 모바일 웹 디버깅
Logcat과 함께 하는 모바일 웹 디버깅JinKwon Lee
1.2K vues10 diapositives
[D2 오픈세미나]5.html5 api 테트리스게임_이진권 par
[D2 오픈세미나]5.html5 api 테트리스게임_이진권[D2 오픈세미나]5.html5 api 테트리스게임_이진권
[D2 오픈세미나]5.html5 api 테트리스게임_이진권NAVER D2
9.5K vues54 diapositives
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit) par
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)JinKwon Lee
12K vues31 diapositives
Cooking jquery par
Cooking jqueryCooking jquery
Cooking jqueryJinKwon Lee
834 vues14 diapositives
실시간으로 안드로이드 프론트엔드 작업하기 par
실시간으로 안드로이드 프론트엔드 작업하기실시간으로 안드로이드 프론트엔드 작업하기
실시간으로 안드로이드 프론트엔드 작업하기Haze Lee
475 vues8 diapositives
최전방 생존법 - 프론트엔드 개발자로 살아가기 par
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기Hyeonjin Cho
11.5K vues35 diapositives

Contenu connexe

Tendances

도구를 활용한 더 나은 웹 개발: Yeoman par
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
5.9K vues16 diapositives
웹 Front-End 실무 이야기 par
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
54.3K vues83 diapositives
[124] 하이브리드 앱 개발기 김한솔 par
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
28.2K vues79 diapositives
JavaScript로 오픈소스를 해보자. bsJS par
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSNAVER D2
19K vues43 diapositives
Next Javascript ES2015 시작하기 par
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기JinKwon Lee
10.2K vues19 diapositives
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화 par
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화흥래 김
12K vues94 diapositives

Tendances(20)

도구를 활용한 더 나은 웹 개발: Yeoman par Jae Sung Park
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park5.9K vues
웹 Front-End 실무 이야기 par JinKwon Lee
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee54.3K vues
[124] 하이브리드 앱 개발기 김한솔 par NAVER D2
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
NAVER D228.2K vues
JavaScript로 오픈소스를 해보자. bsJS par NAVER D2
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
NAVER D219K vues
Next Javascript ES2015 시작하기 par JinKwon Lee
Next Javascript ES2015 시작하기Next Javascript ES2015 시작하기
Next Javascript ES2015 시작하기
JinKwon Lee10.2K vues
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화 par 흥래 김
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
[JCO 컨퍼런스] 웹사이트 Front-End 성능 최적화
흥래 김12K vues
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN par 정호 전
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
빠른 프로토타이핑을 위한 웹앱 자동화 툴 - YEOMAN
정호 전2.3K vues
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드 par 수정 김
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
수정 김3.5K vues
우리가 몰랐던 크롬 개발자 도구 par Jae Sung Park
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
Jae Sung Park77.2K vues
웹 IDE 비교 par Junyoung Lee
웹 IDE 비교웹 IDE 비교
웹 IDE 비교
Junyoung Lee16.4K vues
BEM을 깨우치다. par 우영 주
BEM을 깨우치다.BEM을 깨우치다.
BEM을 깨우치다.
우영 주7.5K vues
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재 par NAVER D2
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
NAVER D26K vues
오늘 당장 시작하는 HTML5 par Taegon Kim
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
Taegon Kim6.4K vues
[145]5년간의네이버웹엔진개발삽질기그리고 김효 par NAVER D2
[145]5년간의네이버웹엔진개발삽질기그리고 김효[145]5년간의네이버웹엔진개발삽질기그리고 김효
[145]5년간의네이버웹엔진개발삽질기그리고 김효
NAVER D230.1K vues
컴포넌트 관점에서 개발하기 par 우영 주
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
우영 주5.4K vues
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm) par 우영 주
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
진보한 개발 환경에서 품질 좋은 코드 생산 (WebStorm)
우영 주10.7K vues
Electron 개발하기 par 성일 한
Electron 개발하기Electron 개발하기
Electron 개발하기
성일 한3.6K vues
프론트엔드 개발자의 자바스크립트 par jeong seok yang
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
jeong seok yang4.4K vues
Jenkins with Unity3d & Android par 종국 임
Jenkins with Unity3d & Android Jenkins with Unity3d & Android
Jenkins with Unity3d & Android
종국 임5K vues

En vedette

프론트엔드로 시작하는 웹 개발 방법과 지식들 par
프론트엔드로 시작하는 웹 개발 방법과 지식들프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들Eun Cho
11.2K vues48 diapositives
Template method Pattern 살펴보기 par
Template method Pattern 살펴보기Template method Pattern 살펴보기
Template method Pattern 살펴보기JinKwon Lee
3.8K vues20 diapositives
WebSocket 기반 쌍방향 메시징 par
WebSocket 기반 쌍방향 메시징WebSocket 기반 쌍방향 메시징
WebSocket 기반 쌍방향 메시징trustinlee
7K vues21 diapositives
Introduction to Web Components par
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsEunYoung Kim
867 vues51 diapositives
How AMP Work? par
How AMP Work? How AMP Work?
How AMP Work? Tai Hoon KIM
1.7K vues55 diapositives
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발 par
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발JinKwon Lee
4.3K vues54 diapositives

En vedette(20)

프론트엔드로 시작하는 웹 개발 방법과 지식들 par Eun Cho
프론트엔드로 시작하는 웹 개발 방법과 지식들프론트엔드로 시작하는 웹 개발 방법과 지식들
프론트엔드로 시작하는 웹 개발 방법과 지식들
Eun Cho11.2K vues
Template method Pattern 살펴보기 par JinKwon Lee
Template method Pattern 살펴보기Template method Pattern 살펴보기
Template method Pattern 살펴보기
JinKwon Lee3.8K vues
WebSocket 기반 쌍방향 메시징 par trustinlee
WebSocket 기반 쌍방향 메시징WebSocket 기반 쌍방향 메시징
WebSocket 기반 쌍방향 메시징
trustinlee7K vues
Introduction to Web Components par EunYoung Kim
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
EunYoung Kim867 vues
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발 par JinKwon Lee
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
[NAVER D2] html5 api를 활용한 실시간 대전 테트리스 게임 개발
JinKwon Lee4.3K vues
Google AMP는 어떻게 빠른 성능을 내나? par Tai Hoon KIM
Google AMP는 어떻게 빠른 성능을 내나?Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?
Tai Hoon KIM764 vues
(2015 11) 자율주행차가 가져올 변화와 주요 이슈(차두원) par 두원 차
(2015 11) 자율주행차가 가져올 변화와 주요 이슈(차두원)(2015 11) 자율주행차가 가져올 변화와 주요 이슈(차두원)
(2015 11) 자율주행차가 가져올 변화와 주요 이슈(차두원)
두원 차3.7K vues
좋은 디자이너, 나쁜 프로젝트매니저, 이상한 개발자 par Suyeol Jeon
좋은 디자이너, 나쁜 프로젝트매니저, 이상한 개발자좋은 디자이너, 나쁜 프로젝트매니저, 이상한 개발자
좋은 디자이너, 나쁜 프로젝트매니저, 이상한 개발자
Suyeol Jeon20.6K vues
Mqtt 소개 par Junho Lee
Mqtt 소개Mqtt 소개
Mqtt 소개
Junho Lee4.9K vues
자바스크립트의 또다른 발전, Backbone.js par JinKwon Lee
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js
JinKwon Lee8.2K vues
김충효, 10년째 같은 회사를 다니고 있습니다 par devCAT Studio, NEXON
김충효, 10년째 같은 회사를 다니고 있습니다김충효, 10년째 같은 회사를 다니고 있습니다
김충효, 10년째 같은 회사를 다니고 있습니다
Data-binding AngularJS par EunYoung Kim
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJS
EunYoung Kim2.1K vues
프론트엔드개발 버전 표기 방법 가이드 라인 par Ji-Tae Kim
프론트엔드개발 버전 표기 방법 가이드 라인프론트엔드개발 버전 표기 방법 가이드 라인
프론트엔드개발 버전 표기 방법 가이드 라인
Ji-Tae Kim6K vues
Ux Camp Seoul 2014 - 레고에서 발견하는 좋은 제품의 사소함 par Woo Sanghun
Ux Camp Seoul 2014 - 레고에서 발견하는 좋은 제품의 사소함Ux Camp Seoul 2014 - 레고에서 발견하는 좋은 제품의 사소함
Ux Camp Seoul 2014 - 레고에서 발견하는 좋은 제품의 사소함
Woo Sanghun17.8K vues
Front-End 개발의 괜찮은 선택 ES6 & React par 지수 윤
Front-End 개발의 괜찮은 선택  ES6 & ReactFront-End 개발의 괜찮은 선택  ES6 & React
Front-End 개발의 괜찮은 선택 ES6 & React
지수 윤21K vues
Android Push Server & MQTT par 광운 이
Android Push Server & MQTTAndroid Push Server & MQTT
Android Push Server & MQTT
광운 이86.2K vues
1.openseminar par NAVER D2
1.openseminar1.openseminar
1.openseminar
NAVER D218.1K vues
웹-워크플로우 베스트프랙티스 par Tai Hoon KIM
웹-워크플로우 베스트프랙티스웹-워크플로우 베스트프랙티스
웹-워크플로우 베스트프랙티스
Tai Hoon KIM3.4K vues

Similaire à [Korea Linux Forum] Implementing web based online multiplayer tetris with OpenSource

[111217 아꿈사연말모임] 웹소켓과온라인게임 par
[111217 아꿈사연말모임] 웹소켓과온라인게임[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임sung ki choi
9.1K vues44 diapositives
Unionweb프로젝트 par
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트Dong-Jin Park
726 vues7 diapositives
Javascript everywhere - Node.js | Devon 2012 par
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Daum DNA
2.6K vues50 diapositives
Front end dev 2016 & beyond par
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
8.1K vues57 diapositives
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기 par
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
10.7K vues63 diapositives
MEAN Stack 기반 모바일 서비스 개발 overview par
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview민태 김
8K vues131 diapositives

Similaire à [Korea Linux Forum] Implementing web based online multiplayer tetris with OpenSource(20)

[111217 아꿈사연말모임] 웹소켓과온라인게임 par sung ki choi
[111217 아꿈사연말모임] 웹소켓과온라인게임[111217 아꿈사연말모임] 웹소켓과온라인게임
[111217 아꿈사연말모임] 웹소켓과온라인게임
sung ki choi9.1K vues
Javascript everywhere - Node.js | Devon 2012 par Daum DNA
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
Daum DNA2.6K vues
Front end dev 2016 & beyond par Jae Sung Park
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park8.1K vues
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기 par 현철 조
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조10.7K vues
MEAN Stack 기반 모바일 서비스 개발 overview par 민태 김
MEAN Stack 기반 모바일 서비스 개발 overviewMEAN Stack 기반 모바일 서비스 개발 overview
MEAN Stack 기반 모바일 서비스 개발 overview
민태 김8K vues
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트 par Dae Kim
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
Dae Kim7.9K vues
[D2 오픈세미나]3.자바스크립트mean스택 김태훈 par NAVER D2
[D2 오픈세미나]3.자바스크립트mean스택 김태훈[D2 오픈세미나]3.자바스크립트mean스택 김태훈
[D2 오픈세미나]3.자바스크립트mean스택 김태훈
NAVER D210.7K vues
Big Data platform을 위한 Sencha Ext JS 사례. par 효근 박
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
효근 박943 vues
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문 par 종훈 박
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박4.3K vues
Mozilla 오픈 웹 모바일 플랫폼 (2012) par Channy Yun
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Channy Yun4.6K vues
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드 par NAVER Engineering
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering4.1K vues
빠르게훓어보는 Node.js와 Vert.x par Terry Cho
빠르게훓어보는 Node.js와 Vert.x빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x
Terry Cho15.1K vues
웹:앱 기술 동향 par ssuser0e53c8
웹:앱 기술 동향웹:앱 기술 동향
웹:앱 기술 동향
ssuser0e53c840 vues
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트 par Rhio Kim
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
Rhio Kim4.9K vues
차세대 웹비즈니스를 위한 "HTML5" par Changhwan Yi
차세대 웹비즈니스를 위한 "HTML5"차세대 웹비즈니스를 위한 "HTML5"
차세대 웹비즈니스를 위한 "HTML5"
Changhwan Yi2K vues
RAD스튜디오 100% 활용하기 - 최신 기술 적용과 확장 par Devgear
RAD스튜디오 100% 활용하기 - 최신 기술 적용과 확장RAD스튜디오 100% 활용하기 - 최신 기술 적용과 확장
RAD스튜디오 100% 활용하기 - 최신 기술 적용과 확장
Devgear664 vues

[Korea Linux Forum] Implementing web based online multiplayer tetris with OpenSource

  • 1. Implementing web based online multiplayer Tetris with Open Source Jin Kwon Lee NHN Technology Services
  • 2. Speaker NHN Technology Services Jin-Kwon Lee Front-End Developer
  • 5. Who is Front-End Developer? • Markup(HTML, CSS), JavaScript 등을 이용해 사용자가 접하는 웹 사이트 영역을 개발하는 개발자 • 최근에는 웹 접근성, UX/UI, 웹 사이트 최적화 등의 업무를 같이 수행
  • 6. Who is Front-End Developer? HTML코더 Markup Developer UI Developer Front-End Developer HTML ⊙ ⊙ ● ⊙ CSS ● ⊙ ● ⊙ 웹 접근성 ⊙ ● ⊙ 웹 표준 준수 ⊙ ● ⊙ Javascript ● ⊙ ⊙ 프론트 성능 최적화 ● ⊙ UI/UX ● ⊙
  • 7. 자바스크립트의 시작 모자이크(당시의 1위 브라우저)를 이길려면 뭔가 괜찮은 것이 필요해! 웹페이지에 넣을 간단한 프로그래밍 언어를 고안해보자. Netscape Communications Brendan Eich 1995.8.19 최초로 JS가 포함된 Netscape 브라우저 발표
  • 8. 이름을 지어야 하는데, 인기있는 Java이름을 붙여서 지으면 같이 인기가 오르지 않을까? 빌조이! 제가 언어 하나 만들었는데 여기에 Java를 붙여 JavaScript 라고 해도 될까요? 응. 너 맘대로해~!! Sun MicroSystems Bill Joy
  • 9. 그래서 자바와는 관계도 없이 이름만 JavaScript 훗날 Java이름을 허용한 Bill Joy는 “잘못된 결정” 이었다는 발언을 함
  • 10. 마우스 우클릭만으로, 이미 오픈되어 있는 JavaScript 소스코드 태생부터 OPEN
  • 11. JS 발전 과정 2 글로벌 IT기업들이 본격적으로 JS를 사용 시작 3 다양한 UX를 가진 웹 어플리케이션 등장 혁신적인 Google Map 5 iOS Web Browser Flash 미지원, 대안으로 JS 4 웹 2.0, HTML5와 더불어 JS도 발전 수많은 선수 입장 6 Android Web Browser 도 따라서 Flash 미지원 1 출시 후 오랜 시간동안 Toy Language 취급
  • 12. JS 입장한 선수들로부터 쏟아져 나오는 Open Source 383,185 Github JavaScript repository
  • 13. 입장한 선수들은 뭐든지 만들고, . (dot) JS 를 붙여서 공개하기 시작 Whatever _____ . JS
  • 14. JavaScript 원정대 Browser Library Desktop Server-Side JavaScript Application JS in Device, IoT Database with JSON 여러가지 분야로 발전
  • 15. Browser Library Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT 간단한 Util 성격의 라이브러리부터, jQuery, Underscore, Zepto HTML5 고도화 라이브러리, Three.js, Socket.io, Raphael 그리고, MVC 프레임워크를 넘어, Backbone.js, Angular.js, Ember.js Complie Javascript까지 다양한 발전 CoffeeScript, TypeScript, Dart, JSX 이제 Web도 어플리케이션이라는 수준에 이르렀음
  • 16. Server Side Javascript Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT 서버에서도 자바스크립트를 돌릴 수 있지 않을까? 구글 v8 JS 엔진을 포함하는 서버 사이드 JavaScript 플랫폼 탄생 서드파티 패키지 at NPM Total : 104,651
  • 17. 서버에서 JS를 돌려서 뭘하죠? Spring Framework Node.js PHP on 기존 플랫폼및 언어와 같은 레벨에서 서비스를 개발할 수 있게 되었음 Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT Linux Apache Java on Tomcat Lalavel Framework express.js Framework
  • 18. Desktop App Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT 데스크탑 어플리케이션도 웹기술로 만들 수 있지 않을까? 웹은 브라우저를 벗어날 수 없기 때문에 밖으로 나갈 방법을 찾기 시작 Web App Desktop App
  • 19. Desktop App Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT Node-Webkit 클라이언트인 기술인 웹킷에, 앞서 설명한 서버 기술인 Node.js를 포함 Node.js 가 할 수 있는 것들을 프론트에서 쓸 수 있게 됨
  • 20. Database with JSON Browser Library ServerSide Javascript Desktop Application Database with JSON JS in Device, IoT NoSQL 데이터베이스 mongoDB 도큐먼트 지향 데이터베이스 시스템 JSON 스타일의 문서를 저장 (JavaScript Object Notation)
  • 21. JS in Device, IoT Browser Library ServerSide Javascript Desktop Application Database with JSON JS in Device, IoT Raspberry Pi Node.js 플랫폼 설치가능 Device 제어를 JS Code로 할 수 있음 with pi.js
  • 22. 이제야 무언가 개발 해 볼만 하다 싶었습니다 이왕이면 재밌는 걸로!
  • 24. 개발 주제 선정은? 주제 선정의 목적은, Full Stack JS를 이용한 제품 개발 단순한 주제로 시작해 보기 프론트엔드 개발 중심으로 서버까지! 멀티 유저 게임으로 비교적 단순한 로직의 테트리스?
  • 25. 프론트엔드 개발 프로세스 요구사항 분석 라이브러리 선정 개발환경 구축 프레임워크 선정 설계 개발/ 테스트 배포환경 구축 1 2 3 4 5 6 7 8 성능 최적화 배포 9
  • 26. 요구사항 분석 ‣네개의 사각형으로 이뤄진 블록 ‣위에서 천천히 블록이 내려옴 ‣한줄을 채우면 점수 획득 ‣ 시간이 지날수록 속도는 빨라짐 ‣블럭이 최상단까지 쌓이면 게임 종료
  • 27. 기술적 요구 사항 ‣ Multi Play를 하려면 소켓 연결이 필요함 (WebSocket) ‣ Game Status 는 유지되어야 함 (Do not replace URL) ‣ 사용자간 데이터 통신 필요 ‣ 게임은 높은 프레임으로 화면을 갱신해야 함
  • 29. 프레임워크 선정 JS에서의 프레임워크는? 중복 코드 제거, 생산성 향상, 코드 일관성 유지 특정 프레임워크가 만능이 아니기 때문에 필요에 따라 골라서 사용
  • 30. JavaScript Full Stack 모두 JavaScript관련 기술만으로 선정 Client MVC Framework Server Platform Server MVC Framework NoSQL DB
  • 31. 라이브러리 선정 There are too many libraries 프로젝트에 적합한 라이브러리를 잘 선택하는 것도 업무중 하나! 프레임워크와는 다르게 라이브러리는 독립성이 있음 (유틸리티 성격이 강함)
  • 33. 개발환경 구축 더이상 Notepad에서 개발하지 않아요 똑똑한 IDE, WebStorm 9 코드 정적 분석, 실시간 코드 유효성 체크, ETC.
  • 34. Project Scaffolding 예전처럼 파일 복사해서 개발하지 않음 Scaffolding 유틸리티를 이용하여 개발 환경 세팅 YEOMAN, GRUNT-INIT 단일 커맨드 실행으로 프로젝트 폴더 설정
  • 35. 커맨드로 라이브러리 복사 쉬운 라이브러리 관리 Bower 유틸리티를 활용해서 커맨드에서 쉽게 자바스크립트 라이브러리를 관리할 수 있음 bower install jquery bower search underscore < File result > bower_components/jquery bower_components/underscore
  • 36. Chrome Debugger 진보된 자바스크립트 디버깅 환경 watch runtime scope variables
  • 38. UI/UX 설계 최고의 UX설계 도구는 역시 손 그림
  • 39. 화면 설계 Login Dashboard Single Game Multi Robby Option Score Board Multi Game
  • 40. 사용 기술 Web Socket Server Node.js express.js socket.io MongoDB Mongoose.js Client MVC Framework Backbone.js UI Effect Animate.css Network Socket.io-client Game Stage Canvas & WebGL Build with Grunt Node-webkit (for Mac, windows) Phonegap (for Android, iOS, ETC)
  • 41. Modeling 설계한 DB모델은, 서버와 클라이언트 양쪽에서 그대로 사용됨 Server JSON DB JSON Client JSON
  • 42. Model Schema 유저정보 객체. 세션정보와 인증 정보 저장
  • 43. Model Schema 멀티게임 방 정보 객체. 방에 join 한 사용자 정보는 users로 명시된 서브 컬렉션에 Push 방을 생성한 owner는 게임을 시작할 수 있다
  • 44. Model Schema 멀티게임에 접속한 유저 정보 객체 테트리스 화면의 배열과 스코어 정보
  • 45. Model Schema 개인별로 최신 점수를 획득시, Score 콜렉션에 기록 ScoreBoard 에서 순위별 점수 확인
  • 46. Client Architecture 뷰와 모델의 로직이 혼재되기 쉬운 JavaScript JavaScript의 개발 규모가 커지면서, 다른 언어에서 사용된 개발 패턴들이 도입됨 (MVC, Facade, Singleton, ETC…) 각 클래스에도 각자 역할 분담 필요!
  • 47. Client Architecture 이제 JavaScript에도 MVC 패턴이 이용됨 단일 페이지에서 서버와 API 통신을 하면서 화면 갱신 Client Side MV* Framework
  • 48. Server Architecture Server Platform, Node.js Server MVC Framework, express.js NoSQL Database, mongoDB
  • 49. Server Architecture – Account Manager : 가입과 로그인을 담당
  • 50. Server Architecture Game Manager : 멀티 게임 관리
  • 52. 테트리스 로직 구현 2차원배열 : matrix[x][x] Event Tick이 지날때마다 블록 이동 틱마다 충돌 및 스코어 체크 움직였을 때 블록이 충돌하면 배열에 추가 한줄이 차면 제거/스코어 추가
  • 53. 테트리스 스테이지 초기화 2차원 배열을 화면으로 그리면
  • 54. 테트리스 블록 모델 회전 각도 설정 이 안에 블록 충돌 체크 블록 회전
  • 55. Stage Canvas 셀의 Flag가 1이면 drawBlock drawBlock안에는 해당 값으로 canvas에 그림을 그리는 로직이 있음
  • 56. Draw Game Stage 2D Stage in Canvas 3D Stage in WebGL
  • 57. WebGL Now Global Coverage 48.27% + 26.37% = 74.64%
  • 58. Data Handling 클라이언트에서 생성한 JavaScript Object가 서버까지 변환없이 그대로 전달. (ORM 필요 없음) Create Object from Client (Browser) Web Server NoSQL Database Pass-thru without converting!!
  • 59. Cli/Server Network Socket Communication on과 emit의 마법 Client Code socket.emit(‘sendMessage’, data); socket.on(‘receive’, function(){ alert(‘Server received Message’); }); socket.on(‘sendMessage’, function(data){ socket.broadcast.emit(‘receive’); }); Server Code
  • 61. JS Build Environment with Grunt.js 자바스크립트 태스크 러너 여러가지 귀찮은 작업들을 커맨드 한번에 실행 > js 파일 압축, css 최적화 등 gruntfile.js 생성 (설정 파일) GRUNT 실행 (with ONE Command) 최종 산출물 파일 생성 완료
  • 62. JavaScript Deploy Deploy 용 환경 구축후, git push가 발생하면 (git hook 이용) 개발 서버에 자동으로 Deploy Deploy는? grunt.js 태스크 러너를 이용함
  • 63. Packaging N Device Web’s good parts, can run everywhere MOBILE APP DESKTOP APP Web Product HTML, CSS, JS Tizen
  • 64. Phonegap 환경 WebView를 포함하는 네이티브 앱 구조 네이티브 API도 JS레벨에서 사용할 수 있음 (Bridge) WebView Native App OS
  • 65. Node-Webkit 환경 데스크탑 어플리케이션 플랫폼. 윈도우, OSX, Ubuntu 지원 DESKTOP APP Build Build Build
  • 66. Package 배포 OS별로, 실행 가능한, 독립 어플리케이션 빌드 완료
  • 67. Code is Open at Github https://github.com/Jinkwon/tetris.js
  • 69. What do you want to do? Front-End 부터 Back-End까지 하나의 언어 이전에 PHP가 쉬운 접근의 언어 역할을 했다면, 빠른 개발 퍼포먼스로 그 역할을 대체할만한 JavaScript Full Stack It’s for StartUp!!!!
  • 70. Let's Make something nice! Thanks!!! lee.jinkwon@nhn.com