현재 자바스크립트 표준은 어디쯤

현재 자바스크립트 표준은

어디쯤?Javascript Standard of 2012

Denny Lim <hello@iamdenny.com>

<iamdenny@nhn.com>

객체철학문법추상수학컴퓨터과학객체지향 프로그램밍

객체지향 프로그래밍

왜 OOP를 해야 할까?

배우기 쉽다유지보수 용이직관적인 코드

OOP의 특징

캡슐화

왜 캡슐화가 필요하지?

원하지 않는 무언가로부터 변수를 보호한다.

자바스크립트는

프로토타입 언어다

Private Data

코딩 컨벤션

function Human(sGender){ //Private this._nAge = 1; this._sGender = sGender || 'Male';

//Public this.growUp = function(){ this._nAge++; }}

어디서든 접근가능

특권(Privileged) 메소드

function Human(sTempGender){ //Private var nAge = 1, sGender = sTempGender || 'Male';

//Privileged Method this.growUp = function(){ nAge++; }}

일부 접근가능

모듈 패턴

모듈 패턴function Human(sTempGender){ //Private var nAge = 1, sGender = sTempGender || 'Male';

//Public return { growUp : function(){ nAge++; } }}

접근 가능

장점

쉽다Private Data가 안전하다

단점

상속이 어렵다.

대형 프로젝트

수많은 모듈복잡한 의존성

수많은 모듈

파일 하나에 모듈 하나많은 파일들에 대한 이슈성능 이슈비동기 로딩

복잡한 의존성

불러올 모듈의 순서수동으로 순서를 지정하기 힘듬

해결책은?

어렵지 않다.다만, 표준이 없을 뿐.

CommonJS APIsBinaryConsoleEncodingFilesystemIOModulesPackagesPromises

CommonJS ModulesModules/1.0 Modules/1.1Modules/1.1.1

: Node.js

웹서버 제작var http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');

Arduino

breakout.js를 이용한 예제

http://localhost:8888

AMD

Asychronous Module Definition

define(id?, dependencies?, factory);

사용법define( 'account', ['service', 'pubsub'], function(service, pubsub){ // Private Code

// export public APIs return { signIn : function(){}, signOut : function() {}, getName : function() {}, setName : function() {} } });

다른 방법

(function(){ // Private Code

exports = { signIn : function(){}, signOut : function() {}, getName : function() {}, setName : function() {} };

define('account', function(){ return exports; }}());

Jindo & jQuery

define('jindo', [], function() {return jindo;} );

define('jquery', [], function() {return jQuery;} );

RequireJs

RequireJS

AMD 구현 by James Burke비동기 로딩2.0.5

사용법

<script type="text/javascript" src="require.js"></script>

<script type="text/javascript" src="main.js"></script>

main.js

require(['app'], function(app){ app.init();});

app.js

define(['lib/account', 'lib/sesstion'], function(account, session){ // 내부 코드

return { init : function(){} } });

장점

클로벌 스코프 문제 해결모든 것은 모듈안에서 작동커피스크립트로도 컴파일 가능플러그인을 지원함

단점

모듈 로딩 실패시 디버깅이 어렵다.잘못된 모듈 경로 설정플러그인 에러

여전히 풀리지 않은 문제

수많은 모듈들수많은 파일들수많은 요청들성능 저하

GraciasBY Denny Lim