현재 자바스크립트 표준은 어디쯤
DESCRIPTION
- OOP, 모듈 패턴 - CommonJS, AMD - Node.js Arduino, RequireJSTRANSCRIPT
![Page 2: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/2.jpg)
객체철학문법추상수학컴퓨터과학객체지향 프로그램밍
![Page 3: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/3.jpg)
객체지향 프로그래밍
![Page 4: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/4.jpg)
왜 OOP를 해야 할까?
배우기 쉽다유지보수 용이직관적인 코드
![Page 5: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/5.jpg)
OOP의 특징
![Page 6: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/6.jpg)
캡슐화
![Page 7: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/7.jpg)
왜 캡슐화가 필요하지?
원하지 않는 무언가로부터 변수를 보호한다.
![Page 8: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/8.jpg)
자바스크립트는
프로토타입 언어다
![Page 9: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/9.jpg)
Private Data
![Page 10: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/10.jpg)
코딩 컨벤션
function Human(sGender){ //Private this._nAge = 1; this._sGender = sGender || 'Male';
//Public this.growUp = function(){ this._nAge++; }}
![Page 11: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/11.jpg)
어디서든 접근가능
![Page 12: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/12.jpg)
특권(Privileged) 메소드
function Human(sTempGender){ //Private var nAge = 1, sGender = sTempGender || 'Male';
//Privileged Method this.growUp = function(){ nAge++; }}
![Page 13: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/13.jpg)
일부 접근가능
![Page 14: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/14.jpg)
모듈 패턴
![Page 15: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/15.jpg)
모듈 패턴function Human(sTempGender){ //Private var nAge = 1, sGender = sTempGender || 'Male';
//Public return { growUp : function(){ nAge++; } }}
![Page 16: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/16.jpg)
접근 가능
![Page 17: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/17.jpg)
장점
쉽다Private Data가 안전하다
![Page 18: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/18.jpg)
단점
상속이 어렵다.
![Page 19: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/19.jpg)
대형 프로젝트
수많은 모듈복잡한 의존성
![Page 20: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/20.jpg)
수많은 모듈
파일 하나에 모듈 하나많은 파일들에 대한 이슈성능 이슈비동기 로딩
![Page 21: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/21.jpg)
복잡한 의존성
불러올 모듈의 순서수동으로 순서를 지정하기 힘듬
![Page 22: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/22.jpg)
해결책은?
어렵지 않다.다만, 표준이 없을 뿐.
![Page 23: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/23.jpg)
![Page 24: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/24.jpg)
CommonJS APIsBinaryConsoleEncodingFilesystemIOModulesPackagesPromises
![Page 25: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/25.jpg)
CommonJS ModulesModules/1.0 Modules/1.1Modules/1.1.1
: Node.js
![Page 26: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/26.jpg)
![Page 27: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/27.jpg)
웹서버 제작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/');
![Page 28: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/28.jpg)
Arduino
![Page 29: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/29.jpg)
breakout.js를 이용한 예제
http://localhost:8888
![Page 30: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/30.jpg)
AMD
![Page 31: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/31.jpg)
Asychronous Module Definition
define(id?, dependencies?, factory);
![Page 32: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/32.jpg)
사용법define( 'account', ['service', 'pubsub'], function(service, pubsub){ // Private Code
// export public APIs return { signIn : function(){}, signOut : function() {}, getName : function() {}, setName : function() {} } });
![Page 33: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/33.jpg)
다른 방법
(function(){ // Private Code
exports = { signIn : function(){}, signOut : function() {}, getName : function() {}, setName : function() {} };
define('account', function(){ return exports; }}());
![Page 34: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/34.jpg)
Jindo & jQuery
define('jindo', [], function() {return jindo;} );
define('jquery', [], function() {return jQuery;} );
![Page 35: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/35.jpg)
RequireJs
![Page 36: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/36.jpg)
RequireJS
AMD 구현 by James Burke비동기 로딩2.0.5
![Page 37: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/37.jpg)
사용법
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="main.js"></script>
![Page 38: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/38.jpg)
main.js
require(['app'], function(app){ app.init();});
![Page 39: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/39.jpg)
app.js
define(['lib/account', 'lib/sesstion'], function(account, session){ // 내부 코드
return { init : function(){} } });
![Page 40: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/40.jpg)
![Page 41: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/41.jpg)
장점
클로벌 스코프 문제 해결모든 것은 모듈안에서 작동커피스크립트로도 컴파일 가능플러그인을 지원함
![Page 42: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/42.jpg)
단점
모듈 로딩 실패시 디버깅이 어렵다.잘못된 모듈 경로 설정플러그인 에러
![Page 43: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/43.jpg)
여전히 풀리지 않은 문제
수많은 모듈들수많은 파일들수많은 요청들성능 저하
![Page 44: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/44.jpg)
GraciasBY Denny Lim
![Page 45: 현재 자바스크립트 표준은 어디쯤](https://reader033.vdocuments.net/reader033/viewer/2022052316/558d258dd8b42a27638b45cc/html5/thumbnails/45.jpg)