OpenSource

Implementing web based online multiplayer Tetris with

Jin Kwon Lee NHN Technology Services

NHN Technology Services

Jin-Kwon Lee

Speaker

Front-End Developer

Without JavaScript

Without JavaScript

Who is

• Markup(HTML, CSS), JavaScript 등을 이용해

사용자가 접하는 웹 사이트 영역을 개발하는 개발자

• 최근에는 웹 접근성, UX/UI, 웹 사이트 최적화 등의 업무를 같이 수행

Front-End Developer?

Who is

HTML코더Markup

DeveloperUI

DeveloperFront-End Developer

HTML ⊙ ⊙ ● ⊙CSS ● ⊙ ● ⊙

웹 접근성 ⊙ ● ⊙웹 표준 준수 ⊙ ● ⊙

Javascript ● ⊙ ⊙프론트 성능 최적화 ● ⊙

UI/UX ● ⊙

Front-End Developer?

자바스크립트의 시작

모자이크(당시의 1위 브라우저)를 이길려면 뭔가 괜찮은 것이 필요해!웹페이지에 넣을 간단한 프로그래밍 언어를 고안해보자.

Netscape CommunicationsBrendan Eich

1995.8.19최초로 JS가 포함된 Netscape 브라우저 발표

이름을 지어야 하는데,

빌조이! 제가 언어 하나 만들었는데 여기에 Java를 붙여 JavaScript라고 해도 될까요?

인기있는 Java이름을 붙여서 지으면 같이 인기가 오르지 않을까?

응.너 맘대로해~!!

Sun MicroSystemsBill 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 취급

쏟아져 나오는 Open Source입장한 선수들로부터

JS

Github JavaScript repository

383,185

입장한 선수들은 뭐든지 만들고,. (dot) JS 를 붙여서 공개하기 시작

Whatever _____ . JS

JavaScript 원정대

Browser Library

Desktop Application

Server-Side JavaScript

JS in Device, IoT

Database with JSON

여러가지 분야로 발전

Browser Library

Browser Library

Desktop Application

ServerSide JavaScript

JS in Device, IoT

Database with JSON

간단한 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

Desktop Application

ServerSide JavaScript

JS in Device, IoT

Database with JSON

서버에서도 자바스크립트를 돌릴 수 있지 않을까?

구글 v8 JS 엔진을 포함하는서버 사이드 JavaScript 플랫폼 탄생

서드파티 패키지 at NPMTotal : 104,651

기존 플랫폼및 언어와 같은 레벨에서 서비스를 개발할 수 있게 되었음

서버에서 JS를 돌려서 뭘하죠?

Browser Library

Desktop Application

ServerSide JavaScript

JS in Device, IoT

Database with JSON

Linux

Node.js PHP on Apache

Java on Tomcat

Spring Framework

Lalavel Framework

express.js Framework

Desktop App

Browser Library

Desktop Application

ServerSide JavaScript

JS in Device, IoT

Database with JSON

데스크탑 어플리케이션도 웹기술로 만들 수 있지 않을까?

웹은 브라우저를 벗어날 수 없기 때문에 밖으로 나갈 방법을 찾기 시작

Web App Desktop App

Desktop App

Browser Library

Desktop Application

ServerSide JavaScript

JS in Device, IoT

Database with JSON

클라이언트인 기술인 웹킷에, 앞서 설명한 서버 기술인 Node.js를 포함

Node.js 가 할 수 있는 것들을 프론트에서 쓸 수 있게 됨

Node-Webkit

Database with JSON

Browser Library

Desktop Application

ServerSide Javascript

JS in Device, IoT

Database with JSON

NoSQL 데이터베이스 mongoDB 도큐먼트 지향 데이터베이스 시스템

JSON 스타일의 문서를 저장(JavaScript Object Notation)

JS in Device, IoTBrowser

Library

Desktop Application

ServerSide Javascript

JS in Device, IoT

Database with JSON

Raspberry PiNode.js 플랫폼 설치가능

Device 제어를JS Code로 할 수 있음

with pi.js

개발 해 볼만 하다 싶었습니다

이제야 무언가

이왕이면 재밌는 걸로!

GAMESLet’s make

개발 주제 선정은?

주제 선정의 목적은,

Full Stack JS를 이용한 제품 개발단순한 주제로 시작해 보기

프론트엔드 개발 중심으로 서버까지!

멀티 유저 게임으로

비교적 단순한 로직의 테트리스?

프론트엔드 개발 프로세스

요구사항분석

라이브러리 선정

개발환경구축

프레임워크 선정

설계

개발/테스트

배포환경 구축

4 531 72 6

성능 최적화

8

배포

9

요구사항 분석

‣네개의 사각형으로 이뤄진 블록

‣위에서 천천히 블록이 내려옴

‣한줄을 채우면 점수 획득

‣시간이 지날수록 속도는 빨라짐

‣블럭이 최상단까지 쌓이면 게임 종료

기술적 요구 사항

‣ Multi Play를 하려면 소켓 연결이 필요함

(WebSocket)

‣ Game Status 는 유지되어야 함 (Do not replace URL)

‣ 사용자간 데이터 통신 필요

‣게임은 높은 프레임으로 화면을 갱신해야 함

Framework & Library 선정

프레임워크 선정

JS에서의 프레임워크는? 중복 코드 제거, 생산성 향상, 코드 일관성 유지

특정 프레임워크가 만능이 아니기 때문에필요에 따라 골라서 사용

모두 JavaScript관련 기술만으로 선정

Client MVC Framework

Server Platform

Server MVC Framework

NoSQL DB

JavaScript Full Stack

라이브러리 선정

There are too many libraries

프로젝트에 적합한 라이브러리를 잘 선택하는 것도 업무중 하나!

프레임워크와는 다르게 라이브러리는 독립성이 있음(유틸리티 성격이 강함)

개발환경 구축

개발환경 구축더이상 Notepad에서 개발하지 않아요

똑똑한 IDE, WebStorm 9

코드 정적 분석, 실시간 코드 유효성 체크, ETC.

Project Scaffolding

예전처럼 파일 복사해서 개발하지 않음

Scaffolding 유틸리티를 이용하여 개발 환경 세팅

YEOMAN, GRUNT-INIT

단일 커맨드 실행으로 프로젝트 폴더 설정

커맨드로 라이브러리 복사

Bower 유틸리티를 활용해서 커맨드에서 쉽게

자바스크립트 라이브러리를 관리할 수 있음

bower install jquerybower search underscore

< File result >bower_components/jquery bower_components/underscore

쉬운 라이브러리 관리

진보된 자바스크립트 디버깅 환경

Chrome Debugger

watch runtime scope variables

설계

UI/UX 설계최고의 UX설계 도구는 역시 손 그림

화면 설계

Login Dashboard

SingleGame

Multi Robby

Option

ScoreBoard

MultiGame

사용 기술

Web Socket

Server

MongoDBMongoose.js

Node.jsexpress.jssocket.io

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

Build with Grunt

Client

MVC FrameworkBackbone.js

UI EffectAnimate.css

NetworkSocket.io-client

Game Stage Canvas & WebGL

Modeling

설계한 DB모델은, 서버와 클라이언트 양쪽에서 그대로 사용됨

ServerJSON

DBJSON

Client JSON

Model Schema

유저정보 객체. 세션정보와 인증 정보 저장

Model Schema

멀티게임 방 정보 객체. 방에 join 한 사용자 정보는 users로 명시된 서브 컬렉션에 Push

방을 생성한 owner는 게임을 시작할 수 있다

Model Schema

멀티게임에 접속한 유저 정보 객체

테트리스 화면의 배열과 스코어 정보

Model Schema

개인별로 최신 점수를 획득시, Score 콜렉션에 기록

ScoreBoard 에서 순위별 점수 확인

Client Architecture

JavaScript의 개발 규모가 커지면서, 다른 언어에서 사용된 개발 패턴들이 도입됨

(MVC, Facade, Singleton, ETC…)

각 클래스에도 각자 역할 분담 필요!

뷰와 모델의 로직이 혼재되기 쉬운 JavaScript

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

개발/테스트

테트리스 로직 구현

2차원배열 : matrix[x][x]

Event Tick이 지날때마다 블록 이동

틱마다 충돌 및 스코어 체크

움직였을 때 블록이 충돌하면 배열에 추가

한줄이 차면 제거/스코어 추가

테트리스 스테이지 초기화

2차원 배열을화면으로 그리면

테트리스 블록 모델

이 안에 블록

회전 각도 설정

충돌 체크

블록 회전

Stage Canvas

셀의 Flag가 1이면 drawBlock

drawBlock안에는 해당 값으로 canvas에 그림을 그리는 로직이 있음

Draw Game Stage

3D Stage in WebGL2D Stage in Canvas

WebGL Now

Global Coverage 48.27% + 26.37% = 74.64%

Data Handling

클라이언트에서 생성한 JavaScript Object가 서버까지 변환없이 그대로 전달. (ORM 필요 없음)

Create Object from Client (Browser)

Web Server

NoSQLDatabase

Pass-thru without converting!!

Socket Communication

Cli/Server Network

on과 emit의 마법

socket.emit(‘sendMessage’, data);

socket.on(‘receive’, function(){ alert(‘Server received Message’); });

Client Code

socket.on(‘sendMessage’, function(data){ socket.broadcast.emit(‘receive’); });

Server Code

빌드 및 배포환경 구축

JS Build Environmentwith Grunt.js

자바스크립트 태스크 러너

여러가지 귀찮은 작업들을 커맨드 한번에 실행> js 파일 압축, css 최적화 등

gruntfile.js 생성(설정 파일)

GRUNT 실행(with ONE Command)

최종 산출물 파일생성 완료

JavaScript Deploy

Deploy 용 환경 구축후, git push가 발생하면 (git hook 이용) 개발 서버에 자동으로 Deploy

Deploy는? grunt.js 태스크 러너를 이용함

Packaging N DeviceWeb’s good parts, can run everywhere

MOBILE APP

DESKTOP APP

HTML, CSS, JS

Web Product

Tizen

Phonegap 환경

WebView를 포함하는 네이티브 앱 구조네이티브 API도 JS레벨에서 사용할 수 있음 (Bridge)

WebView

Native App

OS

Node-Webkit 환경

데스크탑 어플리케이션 플랫폼.윈도우, OSX, Ubuntu 지원

DESKTOP APP

Build

BuildBuild

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