H3 2012 발표자료 봄날은 간다 -KTH 장동수

1. 봄날은

2. 간다
Past,

3. Present

5. Future
of

6. Web

7. Application

8. Framework
앱스프레소Lab

9. /

10. 장동수

11. /

12. @iolothebard
1

13. 차례
Prologue
...
Past
WWW

14. /

15. CGI

16. /

17. WAS

18. /

19. 프레임웍
Present
MVC

20. /

21. 루비

22. 온

23. 레일즈

24. /

25. 스트러츠

27. 스프링

28. 프레임웍
Future
소셜,

29. 모바일

30. 그리고

31. 클라우드

32. /

33. 비동기

34. 프레임웍

35. /

36. 경량

37.
웹프레임웍

38. /

39. 프론트엔드

40. 웹프레임웍

41. /

42. Play!

43. 프레임웍
Epilogue
... 2
2

44. Prologue
“어떻게... 사랑이 변하니?”
3

45. Prologue
Oh!

46. My

47. “Lord”

48. Johnson~
스프링

49. 만쉐~ “Lord”

50. Johnson이
스칼라

51. 공부한다는데...
스칼라?

52. 그거

53. 먹는

54. 거임?
-ㅠ-
자바스크립트가

55. 대세래~
자바스크립트

56. 노가다를

57. 누가...
-_-+
Node.js가

58. 짱~

59. 빠르다던데...
어떻게...
사랑이

60. 변하니? 라면...
ㅠ..ㅠ 끓여

61. 줄까?
-ㅅ-;

62. 때릴꼬야?
-_-;;;
4
4

63. Brief

64. History

65. of

66. Web

67. Application

68. Frameworks
5
5

69. Past
WWW
CGI
WAS
Frameworks
1990 2000 2012
6

70. WWW
Tim

71. Burners-Lee
최초의

72. 웹브라우저

73. “WorldWideWeb”
최초의

74. 웹서버

75. “CERN

76. httpd”
1990년...
12월...
25일...
7
7

77. WWW
보기

78. 좋은

79. 떡이

80. 먹기

81. 좋다,
웹의

82. 탄생
1990,

83. Tim

84. Burners-Lee,

85.
WorldWideWeb

87. CERN

88. httpd
Archie(1990),

89. Gopher(1991),
WAIS(1991),

90. Velonica(1992),

91. ...
1993,

92. Marc

93. Andreessen,

94. NCSA

95. Mosaic
1994,

96. W3C
8
1990 2000 2012
8

97. WWW
9
9

98. WWW
font color=”blue” size=”20”
bBold/b
iItalic/i
uUnderline/u
/font
보기

99. 좋은

100. 떡이...
Bold Italic Underline 지!
먹기도

101. 좋
10
10

102. WWW
$ telnet example.com 80
GET␠/␠HTTP/1.1
HTTP/1.1 200 OK
Date: Mon, 23 Oct 2012 22:38:34 GMT
화면

103. 뒤에선...
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2011 23:11:55 GMT
RFC822

104. EMAIL?
Accept-Ranges: none
Content-Length: 438
Connection: close
RFC959

105. FTP?
Content-Type: text/html; charset=UTF-8
html
head
title...
11
11

106. CGI
멀어지는

107. 시맨틱의

108. 꿈,
동적

109. 컨텐츠와

110. CGI
1993,

111. Rob

112. McCool,

113. “Server

114. Scripts”
Common

115. Gateway

116. Interface(RFC3875)
웹서버는

117. 웹브라우저의

118. 요청을
“환경변수”와

119. “표준

120. 입/출력”을

121. 통해
“응용프로그램”에게

122. “위임”
SERVER_PROTOCOL,

123. SERVER_PORT,

124. REQUEST_METHOD,

125. PATH_INFO,

126. PATH_TRANSLATED,

127.
SCRIPT_NAME,

128. QUERY_STRING,

129. REMOTE_HOST,

130. REMOTE_ADDR,

131. REMOTE_USER

132. ...
12
1990 2000 2012
12

133. CGI
printf(%s%c%cn, Content-Type:text/html, 13, 10);
printf(htmlheadtitleMultiplication results
/title/headbody);
printf(h3results/h3);
char *data = getenv(QUERY_STRING);
if(data == NULL) {
printf(pError!/p);
} else if(sscanf(data,m=%ldn=%ld,m,n) != 2) {
printf(pError!/p);
} else {
printf(pThe product of %ld and %ld is
b%ld/b./p,m,n,m*n);
}
printf(/body/html);
13
13

134. CGI
Multiplication results
The Product of 10 and 20 is 200.
14
14

135. WAS
웹과

136. Multi-tier의

137. 만남,
WAS의

138. 등장
Web

139. +

140. Application

141. Server
웹서버는

142. 웹브라우저의

143. 요청을
“WAS라는

144. 응용프로그램”에게

145. “위임”하고,
WAS는

146. 이를

147. 다시

148. “WAS가

149. 관리”하는
“개별

150. 웹

151. 응용프로그램”에게

152. “전달”.
WebLogic,

153. WebSphere

154. and

155. ...
Netscape

156. Enterprise

157. Server

158. /

159. NSAPI

160. /

161. Livewire,

162. IIS

163. /

164. ISAPI

165. /

166. Active

167. Server

168. Pages,

169. Java

170. Web

171. Server...

172. /

173. Servlet

174. /

175. Java

176.
Server

177. Pages,

178. Tomcat,

179. Resin,

180. JBoss,

181. JRun,

182. ColdFusion,

183. NetDynamics,

184. ...
15
1990 2000 2012
15

185. WAS
%@ page language=”java”%
html
headtitleMultiplication results/title/head
body
h3Multiplication results/h3
% try {
long m = Long.parseLong(request.getParameter(“m”));
long n = Long.parseLong(request.getParamter(“n”));
%
p
The product of %= m % and %= n % is
b%= (m*n) %/b.
/p
% } catch(Exception e) { %
pError!/p
% } %
/body
/html
16
16

186. WAS
Multiplication results
The Product of 10 and 20 is 200.
17
17

187. 프레임웍
수동적

188. 프로그래밍의

189. 시대,
프레임웍

190. Returns
라이브러리

191. vs

192. 프레임웍
A

193. library

194. is

195. essentially

196. a

197. set

198. of

199. functions

200. that

201. you

202. can

203. call,

204. these

205. days

206. usually

207. organized

208. into

209. classes.

210. Each

211. call

212. does

213.
some

214. work

215. and

216. returns

217. control

218. to

219. the

220. client.
A

221. framework

222. embodies

223. some

224. abstract

225. design,

226. with

227. more

228. behavior

229. built

230. in.

231. In

232. order

233. to

234. use

235. it

236. you

237. need

238. to

239. insert

240.
your

241. behavior

242. into

243. various

244. places

245. in

246. the

247. framework

248. either

249. by

250. subclassing

251. or

252. by

253. plugging

254. in

255. your

256. own

257. classes.

258. The

259.
framework's

260. code

261. then

262. calls

263. your

264. code

265. at

266. these

267. points.
You

268. call

269. Library

272. Framework

273. calls

274. You.
Inversion-of-Control
Where

275. is

276. main()?
18
1990 2000 2012
18

277. 프레임웍
import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ServletLifeCycleExample extends HttpServlet {
private int count;
@Override
public void init(ServletConfig config) throws ServletException {
super.init(config); getServletContext().log(init() called); count=0;
}
@Override
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
getServletContext().log(service() called); count++;
response.getWriter().write(Incrementing the count: Count = +count);
}
@Override
public void destroy() {
getServletContext().log(destroy() called);
}
}
19
19

278. 프레임웍
Your
Code
20
20

279. Present
Model-View-Controller
Ruby on Rails
Struts
Spring
1990 2000 2012
21

280. MVC
생산성

281. 향상의

282. 유혹,
MVC

283. Returns
2004,

284. Tim

285. O’Reilly,

286. Web

287. 2.0
Model-View-Controller
웹

288. 요청

289. 해석

290. /

291. 전달

292. /

293. 응답

294. 처리,

295. 입출력값

296. 검증,

297. 세
션

298. 관리,

299. 템플릿,

300. 데이터베이스

301. 접근,

302. 보안,

303. AJAX,

304. ...
Turbine,

305. Struts,

306. ASP.NET,

307. WebWork,

308. Zope,

309. JSF,

310.
Spring,

311. Rails,

312. Django,

313. Grails,

314. Play,

315. ...
Prototype.JS,

316. jQuery,

317. YUI,

318. Dojo,

319. ...
22
1990 2000 2012
22

320. MVC
class ProductModel {
long multiplier, multiplicant, product; ... M
}
class CalcService {
long getProduct(long m, long n) { return m * n; } ...
}
jsp:useBean id=”model” class=”ProductBean”/
h3Multiplication results/h3 V
pThe product of jsp:getProperty name=”model” property=”multiplier”/ and
jsp:getProperty name=”model” property=”multiplicand”/ is
bjsp:getProperty name=”model” property=”product”//b./p
long m = Long.parseLong(request.getParameter(“m”));
long n = Long.parseLong(request.getParameter(“n”)); C
ProductModel model = new ProductModel(m, n, calcService.getProduct(m, n));
request.setAttribute(“model”, model);
getServletContext().getRequestDispatcher(“mul.jsp”).forward(request, response);
23
23

321. MVC
Multiplication results
The Product of 10 and 20 is 200.
24
24

322. 루비

323. 온

324. 레일즈
Easy

325. Come

326. Easy

327. Go,
루비

328. 온

329. 레일즈
2004,

330. David

331. Heinemeier

332. Hansson,
37signals,

333. Basecamp.com
15분

334. 만에

335. 블로그

336. 만들기!?
“Ruby

337. 할

338. 줄

339. 아는

340. 사람

341. 손~”
管理理
Convention-over-Configuration,

342. Scaffolding,

343.
RESTful

344. routing,

345. ActionRecord,

346. Template,

347.
不不可
AJAX

348. Support,

349. Testing,

350. Micro

351. Web

352. Server,

353. ...
25
1990 2000 2012
25

354. 루비

355. 온

356. 레일즈
누구나

357. 15분에

358. 블로그를

359.
만들

360. 수

361. 있었다면...
우린

362. 지금쯤...
...
26
26

363. 스트러츠

365. 스프링
따뜻한

366. 봄날,
스트러츠

368. 스프링
2000,

369. Craig

370. McClanahan,

371. Struts
→

372. MVC

373. on

374. Servet

375. API
管理理
2002,

376. Rod

377. Johnson,

378. Spring

379. Framework
可能
→

380. General

381. Purpose

382. “IoC”

383. Container
So

384. what?

385. Rails?

386. Django?

387. Who

388. cares?
27
1990 2000 2012
27

389. 스트러츠

391. 스프링
서산에

392. 지는

393. 해는
지고

394. 싶어

395. 지나...
나를

396. 버리고

397. 가시는

398. 님은
가고

399. 싶어

400. 가나...
28
28

401. Future
모바일, 소셜 클라우드
비동기 프레임웍
경량 웹프레임웍
프론트엔드 웹프레임웍
Play! 프레임웍
1990 2000 2012
29

402. 소셜,

403. 모바일

404. 그리고

405. 클라우드
T G
I F 30
30

406. 앱스토어
31
31

407. N-스크린
32
32

408. 리얼타임
33
33

409. 빅

410. 데이터
출처:

411. http://mashable.com/2011/06/28/data-infographic/
34
34

412. 소셜,

413. 모바일

414. 그리고

415. 클라우드
Never
OTL!

416. 이미지

417. 출처:

418. http://www.gunchinews.com/blog2/editor_list.php?idxno=161cidxno=70page=1blog_id=mosi
35
35

419. 비동기
Simply

420. the

421. Best,
비동기

422. Returns
Async?

423. Non-Blocking

424. I/O?
집적도,

425. 발열,

426. 간섭...

427. 물리적

428. 한계

429. →

430. CPU

431. 성능

432. 정체
CPU

433. 코어

434. 개수만

435. 증가

436. →

437. 멀티

438. 코어의

439. 성능

440. 극대화!
“어차피

441. 멀티

442. 쓰레드로

443. 감당할

444. 수

445. 없다면,

446. 한

447. 번에

448. 하
나씩~

449. 시간이

450. 걸리는

451. 작업은

452. 맨

453. 뒤로

454. 보내

455. 버리고,

456.
빨리

457. 빨리

458. 처리하자~”
Node.js,

459. Vert.x,

460. Akka,

461. Parallel

462. Python,

463. ...
36
1990 2000 2012
36

464. 동기

465. vs

466. 비동기
if (fs.existsSync(/etc/passwd)) {
var data = fs.readFileSync(/etc/passwd);
console.log(data);
}
fs.exists(/etc/passwd, function (exist) {
if (exist) {
fs.readFileSync(/etc/passwd, function (err, data) {
console.log(b); console.log(data);
});
}
}); console.log(a);
(1)

467. a-b

470. (2)

471. b-a

474. (3)

475. 알

476. 수

477. 없음

480. (4)

481. 동시에
37
37

482. 동기

484. 멀티쓰레드
서버
▶
1 || || 2
▶
클라이언트
▶ ▶ Long

485. I/O

486.
Task
▶ ▶
4 3
응답
38
38

487. 동기

489. 멀티쓰레드
동기

491. 멀티쓰레드
39
39

492. 비동기

494. 싱글쓰레드

495.
서버
|| || ▶
1 3
클라이언트
Long
▶ ▶ I/O
▶ ▶ Task
5
6 4
응답
40
40

496. 비동기

498. 싱글쓰레드

499.
비동기

501. 싱글쓰레드
41
41

502. 비동기

504. 멀티쓰레드
서버 Worker
1
1 || || ▶ ▶
|| ||
▶
클라이언트
▶ ▶ 2 2 3
▶ ▶
3 Long

505. I/O

506.
응답
Task
42
42

507. 비동기

509. 멀티쓰레드
비동기

511. 멀티쓰레드
43
43

512. 경량

513. 웹프레임웍
Keep

514. it

515. simple,

516. Stupid!
경량

517. 웹프레임웍
“주류”

518. 웹

519. 프레임웍

520. Bigger

521. and

522. Bigger~
우리에게

523. 필요한건?

524. RESTful

525. API

526. 서비스
요청

527. 파싱

528. →

529. 라우팅

530. →

531. 응답!

532. OK!
데이터베이스

533. 접근?

534. 템플릿?

535. No

536. Thank

537. You!
Sinatra(Ruby),

538. Flask(Python),

539.
Express(Node.js),

540. Spray(Scala),

541. Jersey(Java),

542.
Play-mini(Scala),

543. Gretty(Groovy),

544. ...
44
1990 2000 2012
44

545. 경량

546. 웹프레임웍

547. -

548. Sinatra
$ gem install sinatra
$ cat hello.rb
require 'sinatra'
get '/hello/:name' do |name|
'Hello, #{name}'
end
$ ruby -rubygems hello.rb
45
45

549. 경량

550. 웹프레임웍

551. -

552. Flask
$ pip install Flask
$ cat hello.py
from flask import Flask
app = Flask(__name__)
@app.route(/hello/name, methods=[GET])
def hello(name):
return Hello, %s % name
if __name__ == __main__:
app.run()
$ python hello.py
46
46

553. 경량

554. 웹프레임웍

555. -

556. Express
$ npm intall express
$ cat hello.js
var express = require('express'),
app = express();
app.get('/hello/:name', function (req, res) {
res.send('Hello, ' + req.param('name'));
});
app.listen(3000);
$ node hello
47
47

557. 경량

558. 웹프레임웍

559. -

560. Spray
$ git clone git://github.com/spray/spray-template.git .
$ cat src/main/scala/hello.scala
import cc.spray._
trait HelloService extends Directives {
val helloService = {
path(hello / PathElement) {
name = get {
completeWith {
hello, + name
}
}
}
}
}
$ sbt run
48
48

561. 프론트엔드

562. 웹프레임웍
HTML5와

563. 웹앱,
프론트엔드

564. 웹프레임웍
Web-as-a-Platform!!
URL

565. 해시(#)

566. 기반의

567. 라우팅(단일

568. 페이지

569. 인터페이
스),

570. 템플릿

571. 엔진,

572. 자바스크립트

573. 객체

574. 기반

575. 모델
UI

576. 툴킷

577. /

578. 바인딩,

579. WebStorage

581. HTTP를

582. 통한

583. 모
델

584. 퍼시스턴스,

585. 양방향

586. RPC,

587. ...
Backbone.js,

588. Knockout.js,

589. Sencha

590. EXT

591. JS,

592.
Javascript

593. MVC,

594. SproutCore,

595. Angular.js,

596.
Batman.js

597. ,

598. Ember.js(SprouteCore2),

599. ...
49
1990 2000 2012
49

600. 프론트엔드

601. 웹프레임웍

602. -

603. Backbone.js
script type=text/template this.defaults().title}); }
id=item-template },
div class=view ...
input class=toggle });
type=checkbox var TodoView =
%=done?'checked=checked':''%/ Backbone.View.extend({
label%= title %/label template: _.template(
a class=destroy/a $('#item-template').html()),
/div initialize: function() {
input class=edit type=text this.model.on('change',
value=%= title % / this.render, this);
/script this.model.on('destroy',
this.remove, this);
script type=text/javascript },
var Todo = Backbone.Model.extend({ render: function() {
defaults: function() { this.$el.html(this.template(
return { this.model.toJSON()));
title: empty todo..., this.$el.toggleClass('done',
order: Todos.nextOrder(), this.model.get('done'));
done: false return this;
}; },
}, ...
initialize: function() { });
if (!this.get(title)) { /script
this.set({title:
출처: http://todomvc.com 50
50

604. 프론트엔드

605. 웹프레임웍

606. -

607. Knockout.js
select data-bind=options:tickets,optionsCaption:'Choose...',
optionsText:'name',value:chosenTicket/select
button data-bind=enable:chosenTicket,click:resetTicketClear/button
p data-bind=with:chosenTicket
You have chosen b data-bind=text:name/b
($span data-bind=text:price/span)
/p
script type=text/javascript
function TicketsViewModel() {
this.tickets = [
{ name: Economy, price: 199.95 },
{ name: Business, price: 449.22 },
{ name: First Class, price: 1199.99 }
];
this.chosenTicket = ko.observable();
this.resetTicket = function() { this.chosenTicket(null) }
}
ko.applyBindings(new TicketsViewModel(),
document.getElementById(liveExample));
/script
51
51

608. 프론트엔드

609. 웹프레임웍

610. -

611. Sencha

612. Ext

613. JS
Ext.define('User', {
extend: ‘Ext.data.Model’,
fields: [
{name: ‘name’, type: ‘string’},
{name: ‘age’, type: ‘int’},
{name: ‘pic’, type: ‘string’}
]
});
var myStore = Ext.create(‘Ext.data.Store’, {
model: ‘User’,
proxy: {
type: ‘ajax’,
url : ‘/users.json’,
reader: { type: ‘json’, root: ‘users’ }
},
autoLoad: true
});
Ext.create(‘Ext.DataView’, {
fullscreen: true,
store: myStore,
itemTpl: ‘img src=”{pic}” /h2{name}/h2p{age} years old/p’
});
52
52

614. Play!

615. 프레임웍
두

616. 마리

617. 토끼를

618. 한

619. 번에,
Play!

620. 프레임웍
자바

622. 스칼라

623. 모두

624. 지원
루비

625. 온

626. 레일즈와

627. 유사한

628. CoC,

629. Scaffolding,

630. 콘솔,

631. ...
스칼라

632. DSL

633. 기반

634. 템플릿
Comet/Long

635. Polling/WebSocket

636. 지원

637. 내장,
JPA(자바),

638. Ebean

639. ORM(자바),

640. Anorm

641. DAO(스칼
라)를

642. 통한

643. SQL/NoSQL

644. 데이터베이스

645. 모두

646. 지원
“Akka”

647. 프레임웍을

648. 통한

649. 비동기/분산

650. 처리
53
1990 2000 2012
53

651. Play!

652. 프레임웍

653. -

654. 디렉토리

655. 구조
app → Application sources
! assets → Compiled asset sources
! stylesheets → Typically LESS CSS sources
! javascripts → Typically CoffeeScript sources
! controllers → Application controllers
! models → Application business layer
! views → Templates
conf → Configurations files
! application.conf → Main configuration file
! routes → Routes definition
public → Public assets
! stylesheets → CSS files
! javascripts → Javascript files
! images → Image files
project → sbt configuration files
! build.properties → Marker for sbt project
! Build.scala → Application build script
! plugins.sbt → sbt plugins
lib → Unmanaged libraries dependencies
logs → Standard logs folder
target → Generated stuff
test → source folder for unit or functional tests
54
54

656. Play!

657. 프레임웍

658. -

659. Routes
GET / controllers.Projects.index()
# Authentication
GET /login controllers.Application.login()
POST /login controllers.Application.authenticate()
GET /logout controllers.Application.logout()
# Projects
POST /projects controllers.Projects.add()
POST /projects/groups controllers.Projects.addGroup()
DELETE /projects/groups controllers.Projects.deleteGroup(group: String)
PUT /projects/groups controllers.Projects.renameGroup(group: String)
DELETE /projects/:project controllers.Projects.delete(project: Long)
PUT /projects/:project controllers.Projects.rename(project: Long)
POST /projects/:project/team controllers.Projects.addUser(project: Long)
DELETE /projects/:project/team controllers.Projects.removeUser(project:Long)
...
# Map static resources from the /public folder to the /public path
GET /assets/*file controllers.Assets.at(path=/public, file)
55
55

660. Play!

661. 프레임웍

662. -

663. Java
package controllers;
import play.*;
import play.mvc.*;
public class Application extends Controller {
public static Result hello(String name) {
return ok(views.html.index.render(Hello + name));
}
public static Result upload() {
FilePart filePart =
request().body().asMultipartFormData().getFile(file);
if (filePart != null) {
// ... filePart.getFilename()/getContentType()/getFile() ...
return ok(h1file uploaded/h1).as(text/html);
} else { return BadRequest(file upload error!) }
}
public static Result download() {
return ok(new java.io.File(/tmp/fileToServe.pdf));
}
}
56
56

664. Play!

665. 프레임웍

666. -

667. Scala
package controllers
import play.api._
import play.api.mvc._
object Application extends Controller {
def hello(name:String) = Action {
Ok(views.html.hello(Hello + name))
}
def upload = Action {
request.body.file(file).map { filePart =
// ... filePart.filename/contentType/ref ...
Ok(h1file uploaded/h1).as(HTML)
}.getOrElse {
BadRequest(file upload error!)
}
}
def download = Action {
Ok.sendFile(new java.io.File(/tmp/fileToServe.pdf))
}
}
57
57

668. Play!

669. 프레임웍

670. -

671. View

672. Template
@(title: String)(content: Html)
html
head
title@title/title
link rel=stylesheet href=@routes.Assets.at(stylesheets/main.css)
script src=@routes.Assets.at(javascripts/jquery.js)/script
/head
body
header
a href=@routes.Application.index@title/a
/header
section
@content
/section
/body
/html
@(name: String, repeat: Int, color: String)
@main(Here is the result:) {
ul style=color: @if(color != null) { @color } else { inherited }
@for(i - 1 to repeat) {
liHello @name!/li
}
/ul
p class=buttons
a href=@routes.Application.indexBack to the form/a
/p
}
58
58

673. Play!

674. 프레임웍

675. -

676. Akka
def hello = Action {
Async {
val myActor =
Akka.system.actorOf(Props[MyActor], name = myactor)
(myActor ? hello).mapTo[String].asPromise.map {
result = Ok(Greetings, + result)
}
}
}
def upload = Action {
Async {
Akka.future {
longTask()
}.map {
result = Ok(Got + result)
}
}
}
59
59

677. Play!

678. 프레임웍
종합

679. 선물

680. 세트는
...
60
60