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

3.
Without JavaScript

4.
Without JavaScript

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.
이제야 무언가
개발 해 볼만 하다 싶었습니다
이왕이면 재밌는 걸로!

23.
Let’s make GAMES

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)
‣ 사용자간 데이터 통신 필요
‣ 게임은 높은 프레임으로 화면을 갱신해야 함

28.
Framework & Library
선정

29.
프레임워크 선정
JS에서의 프레임워크는?
중복 코드 제거, 생산성 향상, 코드 일관성 유지
특정 프레임워크가 만능이 아니기 때문에
필요에 따라 골라서 사용

30.
JavaScript Full Stack
모두 JavaScript관련 기술만으로 선정
Client MVC Framework
Server Platform
Server MVC Framework
NoSQL DB

31.
라이브러리 선정
There are too many libraries
프로젝트에 적합한 라이브러리를 잘
선택하는 것도 업무중 하나!
프레임워크와는 다르게 라이브러리는 독립성이 있음
(유틸리티 성격이 강함)

32.
개발환경 구축

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

37.
설계

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 : 멀티 게임 관리

51.
개발/테스트

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

60.
빌드 및 배포환경 구축

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

68.
Play Game!
http://srv.bdyne.net/dn

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