Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[H3 2012] 봄날은간다

5,919 views

Published on

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

  • Be the first to comment

[H3 2012] 봄날은간다

  1. 1. 봄날은
  2. 2.  간다Past,
  3. 3.  Present
  4. 4.  
  5. 5.  Futureof
  6. 6.  Web
  7. 7.  Application
  8. 8.  Framework앱스프레소Lab
  9. 9.  /
  10. 10.  장동수
  11. 11.  /
  12. 12.  @iolothebard 1
  13. 13. 차례 Prologue ... Past WWW
  14. 14.  /
  15. 15.  CGI
  16. 16.  /
  17. 17.  WAS
  18. 18.  /
  19. 19.  프레임웍 Present MVC
  20. 20.  /
  21. 21.  루비
  22. 22.  온
  23. 23.  레일즈
  24. 24.  /
  25. 25.  스트러츠
  26. 26.  
  27. 27.  스프링
  28. 28.  프레임웍 Future소셜,
  29. 29.  모바일
  30. 30.  그리고
  31. 31.  클라우드
  32. 32.  /
  33. 33.  비동기
  34. 34.  프레임웍
  35. 35.  /
  36. 36.  경량
  37. 37.  웹프레임웍
  38. 38.  /
  39. 39.  프론트엔드
  40. 40.  웹프레임웍
  41. 41.  /
  42. 42.  Play!
  43. 43.  프레임웍 Epilogue ... 2 2
  44. 44. Prologue“어떻게... 사랑이 변하니?” 3
  45. 45. Prologue Oh!
  46. 46.  My
  47. 47.  “Lord”
  48. 48.  Johnson~ 스프링
  49. 49.  만쉐~ “Lord”
  50. 50.  Johnson이 스칼라
  51. 51.  공부한다는데... 스칼라?
  52. 52.  그거
  53. 53.  먹는
  54. 54.  거임? -ㅠ- 자바스크립트가
  55. 55.  대세래~자바스크립트
  56. 56.  노가다를
  57. 57.  누가... -_-+ Node.js가
  58. 58.  짱~
  59. 59.  빠르다던데... 어떻게...사랑이
  60. 60.  변하니? 라면... ㅠ..ㅠ 끓여
  61. 61.  줄까? -ㅅ-;
  62. 62.   때릴꼬야? -_-;;; 4 4
  63. 63. Brief
  64. 64.  History
  65. 65.  of
  66. 66.  Web
  67. 67.  Application
  68. 68.  Frameworks 5 5
  69. 69. Past WWW CGI WAS Frameworks1990 2000 2012 6
  70. 70. WWWTim
  71. 71.  Burners-Lee최초의
  72. 72.  웹브라우저
  73. 73.  “WorldWideWeb”최초의
  74. 74.  웹서버
  75. 75.  “CERN
  76. 76.  httpd”1990년...12월...25일... 7 7
  77. 77. WWW 보기
  78. 78.  좋은
  79. 79.  떡이
  80. 80.  먹기
  81. 81.  좋다, 웹의
  82. 82.  탄생 1990,
  83. 83.  Tim
  84. 84.  Burners-Lee,
  85. 85.   WorldWideWeb
  86. 86.  
  87. 87.  CERN
  88. 88.  httpd Archie(1990),
  89. 89.  Gopher(1991), WAIS(1991),
  90. 90.  Velonica(1992),
  91. 91.  ... 1993,
  92. 92.  Marc
  93. 93.  Andreessen,
  94. 94.  NCSA
  95. 95.  Mosaic 1994,
  96. 96.  W3C 81990 2000 2012 8
  97. 97. WWW 9 9
  98. 98. WWWfont color=”blue” size=”20” bBold/b iItalic/i uUnderline/u/font 보기
  99. 99.  좋은
  100. 100.  떡이...Bold Italic Underline 지! 먹기도
  101. 101.  좋 10 10
  102. 102. WWW$ telnet example.com 80GET␠/␠HTTP/1.1HTTP/1.1 200 OKDate: Mon, 23 Oct 2012 22:38:34 GMT 화면
  103. 103.  뒤에선...Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2011 23:11:55 GMT RFC822
  104. 104.  EMAIL?Accept-Ranges: noneContent-Length: 438Connection: close RFC959
  105. 105.  FTP?Content-Type: text/html; charset=UTF-8htmlheadtitle... 11 11
  106. 106. CGI 멀어지는
  107. 107.  시맨틱의
  108. 108.  꿈, 동적
  109. 109.  컨텐츠와
  110. 110.  CGI 1993,
  111. 111.  Rob
  112. 112.  McCool,
  113. 113.  “Server
  114. 114.  Scripts” Common
  115. 115.  Gateway
  116. 116.  Interface(RFC3875) 웹서버는
  117. 117.  웹브라우저의
  118. 118.  요청을 “환경변수”와
  119. 119.  “표준
  120. 120.  입/출력”을
  121. 121.  통해 “응용프로그램”에게
  122. 122.  “위임” SERVER_PROTOCOL,
  123. 123.  SERVER_PORT,
  124. 124.  REQUEST_METHOD,
  125. 125.  PATH_INFO,
  126. 126.  PATH_TRANSLATED,
  127. 127.   SCRIPT_NAME,
  128. 128.  QUERY_STRING,
  129. 129.  REMOTE_HOST,
  130. 130.  REMOTE_ADDR,
  131. 131.  REMOTE_USER
  132. 132.  ... 121990 2000 2012 12
  133. 133. CGIprintf(%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. 134. CGIMultiplication resultsThe Product of 10 and 20 is 200. 14 14
  135. 135. WAS 웹과
  136. 136.  Multi-tier의
  137. 137.  만남, WAS의
  138. 138.  등장 Web
  139. 139.  +
  140. 140.  Application
  141. 141.  Server 웹서버는
  142. 142.  웹브라우저의
  143. 143.  요청을 “WAS라는
  144. 144.  응용프로그램”에게
  145. 145.  “위임”하고, WAS는
  146. 146.  이를
  147. 147.  다시
  148. 148.  “WAS가
  149. 149.  관리”하는 “개별
  150. 150.  웹
  151. 151.  응용프로그램”에게
  152. 152.  “전달”. WebLogic,
  153. 153.  WebSphere
  154. 154.  and
  155. 155.  ... Netscape
  156. 156.  Enterprise
  157. 157.  Server
  158. 158.  /
  159. 159.  NSAPI
  160. 160.  /
  161. 161.  Livewire,
  162. 162.  IIS
  163. 163.  /
  164. 164.  ISAPI
  165. 165.  /
  166. 166.  Active
  167. 167.  Server
  168. 168.  Pages,
  169. 169.  Java
  170. 170.  Web
  171. 171.  Server...
  172. 172.  /
  173. 173.  Servlet
  174. 174.  /
  175. 175.  Java
  176. 176.   Server
  177. 177.  Pages,
  178. 178.  Tomcat,
  179. 179.  Resin,
  180. 180.  JBoss,
  181. 181.  JRun,
  182. 182.  ColdFusion,
  183. 183.  NetDynamics,
  184. 184.  ... 151990 2000 2012 15
  185. 185. WAS%@ page language=”java”%htmlheadtitleMultiplication results/title/headbodyh3Multiplication results/h3% try {long m = Long.parseLong(request.getParameter(“m”));long n = Long.parseLong(request.getParamter(“n”));%pThe product of %= m % and %= n % isb%= (m*n) %/b./p% } catch(Exception e) { %pError!/p% } %/body/html 16 16
  186. 186. WASMultiplication resultsThe Product of 10 and 20 is 200. 17 17
  187. 187. 프레임웍 수동적
  188. 188.  프로그래밍의
  189. 189.  시대, 프레임웍
  190. 190.  Returns 라이브러리
  191. 191.  vs
  192. 192.  프레임웍 A
  193. 193.  library
  194. 194.  is
  195. 195.  essentially
  196. 196.  a
  197. 197.  set
  198. 198.  of
  199. 199.  functions
  200. 200.  that
  201. 201.  you
  202. 202.  can
  203. 203.  call,
  204. 204.  these
  205. 205.  days
  206. 206.  usually
  207. 207.  organized
  208. 208.  into
  209. 209.  classes.
  210. 210.  Each
  211. 211.  call
  212. 212.  does
  213. 213.   some
  214. 214.  work
  215. 215.  and
  216. 216.  returns
  217. 217.  control
  218. 218.  to
  219. 219.  the
  220. 220.  client. A
  221. 221.  framework
  222. 222.  embodies
  223. 223.  some
  224. 224.  abstract
  225. 225.  design,
  226. 226.  with
  227. 227.  more
  228. 228.  behavior
  229. 229.  built
  230. 230.  in.
  231. 231.  In
  232. 232.  order
  233. 233.  to
  234. 234.  use
  235. 235.  it
  236. 236.  you
  237. 237.  need
  238. 238.  to
  239. 239.  insert
  240. 240.   your
  241. 241.  behavior
  242. 242.  into
  243. 243.  various
  244. 244.  places
  245. 245.  in
  246. 246.  the
  247. 247.  framework
  248. 248.  either
  249. 249.  by
  250. 250.  subclassing
  251. 251.  or
  252. 252.  by
  253. 253.  plugging
  254. 254.  in
  255. 255.  your
  256. 256.  own
  257. 257.  classes.
  258. 258.  The
  259. 259.   frameworks
  260. 260.  code
  261. 261.  then
  262. 262.  calls
  263. 263.  your
  264. 264.  code
  265. 265.  at
  266. 266.  these
  267. 267.  points. You
  268. 268.  call
  269. 269.  Library
  270. 270.  
  271. 271.  
  272. 272.  Framework
  273. 273.  calls
  274. 274.  You. Inversion-of-Control Where
  275. 275.  is
  276. 276.  main()? 181990 2000 2012 18
  277. 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. 278. 프레임웍YourCode 20 20
  279. 279. PresentModel-View-Controller Ruby on Rails Struts Spring1990 2000 2012 21
  280. 280. MVC 생산성
  281. 281.  향상의
  282. 282.  유혹, MVC
  283. 283.  Returns 2004,
  284. 284.  Tim
  285. 285.  O’Reilly,
  286. 286.  Web
  287. 287.  2.0 Model-View-Controller 웹
  288. 288.  요청
  289. 289.  해석
  290. 290.  /
  291. 291.  전달
  292. 292.  /
  293. 293.  응답
  294. 294.  처리,
  295. 295.  입출력값
  296. 296.  검증,
  297. 297.  세 션
  298. 298.  관리,
  299. 299.  템플릿,
  300. 300.  데이터베이스
  301. 301.  접근,
  302. 302.  보안,
  303. 303.  AJAX,
  304. 304.  ... Turbine,
  305. 305.  Struts,
  306. 306.  ASP.NET,
  307. 307.  WebWork,
  308. 308.  Zope,
  309. 309.  JSF,
  310. 310.   Spring,
  311. 311.  Rails,
  312. 312.  Django,
  313. 313.  Grails,
  314. 314.  Play,
  315. 315.  ... Prototype.JS,
  316. 316.  jQuery,
  317. 317.  YUI,
  318. 318.  Dojo,
  319. 319.  ... 221990 2000 2012 22
  320. 320. MVCclass 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 VpThe product of jsp:getProperty name=”model” property=”multiplier”/ andjsp:getProperty name=”model” property=”multiplicand”/ isbjsp:getProperty name=”model” property=”product”//b./plong m = Long.parseLong(request.getParameter(“m”));long n = Long.parseLong(request.getParameter(“n”)); CProductModel model = new ProductModel(m, n, calcService.getProduct(m, n));request.setAttribute(“model”, model);getServletContext().getRequestDispatcher(“mul.jsp”).forward(request, response); 23 23
  321. 321. MVCMultiplication resultsThe Product of 10 and 20 is 200. 24 24
  322. 322. 루비
  323. 323.  온
  324. 324.  레일즈 Easy
  325. 325.  Come
  326. 326.  Easy
  327. 327.  Go, 루비
  328. 328.  온
  329. 329.  레일즈 2004,
  330. 330.  David
  331. 331.  Heinemeier
  332. 332.  Hansson, 37signals,
  333. 333.  Basecamp.com 15분
  334. 334.  만에
  335. 335.  블로그
  336. 336.  만들기!? “Ruby
  337. 337.  할
  338. 338.  줄
  339. 339.  아는
  340. 340.  사람
  341. 341.  손~” 管理理 Convention-over-Configuration,
  342. 342.  Scaffolding,
  343. 343.   RESTful
  344. 344.  routing,
  345. 345.  ActionRecord,
  346. 346.  Template,
  347. 347.   不不可 AJAX
  348. 348.  Support,
  349. 349.  Testing,
  350. 350.  Micro
  351. 351.  Web
  352. 352.  Server,
  353. 353.  ... 251990 2000 2012 25
  354. 354. 루비
  355. 355.  온
  356. 356.  레일즈누구나
  357. 357.  15분에
  358. 358.  블로그를
  359. 359.   만들
  360. 360.  수
  361. 361.  있었다면... 우린
  362. 362.  지금쯤... ... 26 26
  363. 363. 스트러츠
  364. 364.  
  365. 365.  스프링 따뜻한
  366. 366.  봄날, 스트러츠
  367. 367.  
  368. 368.  스프링 2000,
  369. 369.  Craig
  370. 370.  McClanahan,
  371. 371.  Struts →
  372. 372.  MVC
  373. 373.  on
  374. 374.  Servet
  375. 375.  API 管理理 2002,
  376. 376.  Rod
  377. 377.  Johnson,
  378. 378.  Spring
  379. 379.  Framework 可能 →
  380. 380.  General
  381. 381.  Purpose
  382. 382.  “IoC”
  383. 383.  Container So
  384. 384.  what?
  385. 385.  Rails?
  386. 386.  Django?
  387. 387.  Who
  388. 388.  cares? 271990 2000 2012 27
  389. 389. 스트러츠
  390. 390.  
  391. 391.  스프링 서산에
  392. 392.  지는
  393. 393.  해는 지고
  394. 394.  싶어
  395. 395.  지나...나를
  396. 396.  버리고
  397. 397.  가시는
  398. 398.  님은 가고
  399. 399.  싶어
  400. 400.  가나... 28 28
  401. 401. Future모바일, 소셜 클라우드 비동기 프레임웍 경량 웹프레임웍프론트엔드 웹프레임웍 Play! 프레임웍1990 2000 2012 29
  402. 402. 소셜,
  403. 403.  모바일
  404. 404.  그리고
  405. 405.  클라우드T G I F 30 30
  406. 406. 앱스토어 31 31
  407. 407. N-스크린 32 32
  408. 408. 리얼타임 33 33
  409. 409.
  410. 410.  데이터출처:
  411. 411.  http://mashable.com/2011/06/28/data-infographic/ 34 34
  412. 412. 소셜,
  413. 413.  모바일
  414. 414.  그리고
  415. 415.  클라우드 Never OTL!
  416. 416.  이미지
  417. 417.  출처:
  418. 418.  http://www.gunchinews.com/blog2/editor_list.php?idxno=161cidxno=70page=1blog_id=mosi 35 35
  419. 419. 비동기 Simply
  420. 420.  the
  421. 421.  Best, 비동기
  422. 422.  Returns Async?
  423. 423.  Non-Blocking
  424. 424.  I/O? 집적도,
  425. 425.  발열,
  426. 426.  간섭...
  427. 427.  물리적
  428. 428.  한계
  429. 429.  →
  430. 430.  CPU
  431. 431.  성능
  432. 432.  정체 CPU
  433. 433.  코어
  434. 434.  개수만
  435. 435.  증가
  436. 436.  →
  437. 437.  멀티
  438. 438.  코어의
  439. 439.  성능
  440. 440.  극대화! “어차피
  441. 441.  멀티
  442. 442.  쓰레드로
  443. 443.  감당할
  444. 444.  수
  445. 445.  없다면,
  446. 446.  한
  447. 447.  번에
  448. 448.  하 나씩~
  449. 449.  시간이
  450. 450.  걸리는
  451. 451.  작업은
  452. 452.  맨
  453. 453.  뒤로
  454. 454.  보내
  455. 455.  버리고,
  456. 456.   빨리
  457. 457.  빨리
  458. 458.  처리하자~” Node.js,
  459. 459.  Vert.x,
  460. 460.  Akka,
  461. 461.  Parallel
  462. 462.  Python,
  463. 463.  ... 361990 2000 2012 36
  464. 464. 동기
  465. 465.  vs
  466. 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. 467.  a-b
  468. 468.  
  469. 469.  
  470. 470.  (2)
  471. 471.  b-a
  472. 472.  
  473. 473.  
  474. 474.  (3)
  475. 475.  알
  476. 476.  수
  477. 477.  없음
  478. 478.  
  479. 479.  
  480. 480.  (4)
  481. 481.  동시에 37 37
  482. 482. 동기
  483. 483.  
  484. 484.  멀티쓰레드 서버 ▶ 1 || || 2 ▶클라이언트 ▶ ▶ Long
  485. 485.  I/O
  486. 486.   Task ▶ ▶ 4 3 응답 38 38
  487. 487. 동기
  488. 488.  
  489. 489.  멀티쓰레드동기
  490. 490.  
  491. 491.  멀티쓰레드 39 39
  492. 492. 비동기
  493. 493.  
  494. 494.  싱글쓰레드
  495. 495.   서버 || || ▶ 1 3클라이언트 Long ▶ ▶ I/O ▶ ▶ Task 5 6 4 응답 40 40
  496. 496. 비동기
  497. 497.  
  498. 498.  싱글쓰레드
  499. 499.  비동기
  500. 500.  
  501. 501.  싱글쓰레드 41 41
  502. 502. 비동기
  503. 503.  
  504. 504.  멀티쓰레드 서버 Worker 1 1 || || ▶ ▶ || || ▶클라이언트 ▶ ▶ 2 2 3 ▶ ▶ 3 Long
  505. 505.  I/O
  506. 506.   응답 Task 42 42
  507. 507. 비동기
  508. 508.  
  509. 509.  멀티쓰레드비동기
  510. 510.  
  511. 511.  멀티쓰레드 43 43
  512. 512. 경량
  513. 513.  웹프레임웍 Keep
  514. 514.  it
  515. 515.  simple,
  516. 516.  Stupid! 경량
  517. 517.  웹프레임웍 “주류”
  518. 518.  웹
  519. 519.  프레임웍
  520. 520.  Bigger
  521. 521.  and
  522. 522.  Bigger~ 우리에게
  523. 523.  필요한건?
  524. 524.  RESTful
  525. 525.  API
  526. 526.  서비스 요청
  527. 527.  파싱
  528. 528.  →
  529. 529.  라우팅
  530. 530.  →
  531. 531.  응답!
  532. 532.  OK! 데이터베이스
  533. 533.  접근?
  534. 534.  템플릿?
  535. 535.  No
  536. 536.  Thank
  537. 537.  You! Sinatra(Ruby),
  538. 538.  Flask(Python),
  539. 539.   Express(Node.js),
  540. 540.  Spray(Scala),
  541. 541.  Jersey(Java),
  542. 542.   Play-mini(Scala),
  543. 543.  Gretty(Groovy),
  544. 544.  ... 441990 2000 2012 44
  545. 545. 경량
  546. 546.  웹프레임웍
  547. 547.  -
  548. 548.  Sinatra$ gem install sinatra$ cat hello.rbrequire sinatraget /hello/:name do |name| Hello, #{name}end$ ruby -rubygems hello.rb 45 45
  549. 549. 경량
  550. 550.  웹프레임웍
  551. 551.  -
  552. 552.  Flask$ pip install Flask$ cat hello.pyfrom flask import Flaskapp = Flask(__name__)@app.route(/hello/name, methods=[GET])def hello(name): return Hello, %s % nameif __name__ == __main__: app.run()$ python hello.py 46 46
  553. 553. 경량
  554. 554.  웹프레임웍
  555. 555.  -
  556. 556.  Express$ npm intall express$ cat hello.jsvar 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. 557. 경량
  558. 558.  웹프레임웍
  559. 559.  -
  560. 560.  Spray$ git clone git://github.com/spray/spray-template.git .$ cat src/main/scala/hello.scalaimport cc.spray._trait HelloService extends Directives { val helloService = { path(hello / PathElement) { name = get { completeWith { hello, + name } } } }}$ sbt run 48 48
  561. 561. 프론트엔드
  562. 562.  웹프레임웍 HTML5와
  563. 563.  웹앱, 프론트엔드
  564. 564.  웹프레임웍 Web-as-a-Platform!! URL
  565. 565.  해시(#)
  566. 566.  기반의
  567. 567.  라우팅(단일
  568. 568.  페이지
  569. 569.  인터페이 스),
  570. 570.  템플릿
  571. 571.  엔진,
  572. 572.  자바스크립트
  573. 573.  객체
  574. 574.  기반
  575. 575.  모델 UI
  576. 576.  툴킷
  577. 577.  /
  578. 578.  바인딩,
  579. 579.  WebStorage
  580. 580.  
  581. 581.  HTTP를
  582. 582.  통한
  583. 583.  모 델
  584. 584.  퍼시스턴스,
  585. 585.  양방향
  586. 586.  RPC,
  587. 587.  ... Backbone.js,
  588. 588.  Knockout.js,
  589. 589.  Sencha
  590. 590.  EXT
  591. 591.  JS,
  592. 592.   Javascript
  593. 593.  MVC,
  594. 594.  SproutCore,
  595. 595.  Angular.js,
  596. 596.   Batman.js
  597. 597.  ,
  598. 598.  Ember.js(SprouteCore2),
  599. 599.  ... 491990 2000 2012 49
  600. 600. 프론트엔드
  601. 601.  웹프레임웍
  602. 602.  -
  603. 603.  Backbone.jsscript 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. 604. 프론트엔드
  605. 605.  웹프레임웍
  606. 606.  -
  607. 607.  Knockout.jsselect data-bind=options:tickets,optionsCaption:Choose...,optionsText:name,value:chosenTicket/selectbutton data-bind=enable:chosenTicket,click:resetTicketClear/buttonp data-bind=with:chosenTicketYou have chosen b data-bind=text:name/b($span data-bind=text:price/span)/pscript type=text/javascriptfunction 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. 608. 프론트엔드
  609. 609.  웹프레임웍
  610. 610.  -
  611. 611.  Sencha
  612. 612.  Ext
  613. 613.  JSExt.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. 614. Play!
  615. 615.  프레임웍 두
  616. 616.  마리
  617. 617.  토끼를
  618. 618.  한
  619. 619.  번에, Play!
  620. 620.  프레임웍 자바
  621. 621.  
  622. 622.  스칼라
  623. 623.  모두
  624. 624.  지원 루비
  625. 625.  온
  626. 626.  레일즈와
  627. 627.  유사한
  628. 628.  CoC,
  629. 629.  Scaffolding,
  630. 630.  콘솔,
  631. 631.  ... 스칼라
  632. 632.  DSL
  633. 633.  기반
  634. 634.  템플릿 Comet/Long
  635. 635.  Polling/WebSocket
  636. 636.  지원
  637. 637.  내장, JPA(자바),
  638. 638.  Ebean
  639. 639.  ORM(자바),
  640. 640.  Anorm
  641. 641.  DAO(스칼 라)를
  642. 642.  통한
  643. 643.  SQL/NoSQL
  644. 644.  데이터베이스
  645. 645.  모두
  646. 646.  지원 “Akka”
  647. 647.  프레임웍을
  648. 648.  통한
  649. 649.  비동기/분산
  650. 650.  처리 531990 2000 2012 53
  651. 651. Play!
  652. 652.  프레임웍
  653. 653.  -
  654. 654.  디렉토리
  655. 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 → Templatesconf → Configurations files ! application.conf → Main configuration file ! routes → Routes definitionpublic → Public assets ! stylesheets → CSS files ! javascripts → Javascript files ! images → Image filesproject → sbt configuration files ! build.properties → Marker for sbt project ! Build.scala → Application build script ! plugins.sbt → sbt pluginslib → Unmanaged libraries dependencieslogs → Standard logs foldertarget → Generated stufftest → source folder for unit or functional tests 54 54
  656. 656. Play!
  657. 657.  프레임웍
  658. 658.  -
  659. 659.  RoutesGET / controllers.Projects.index()# AuthenticationGET /login controllers.Application.login()POST /login controllers.Application.authenticate()GET /logout controllers.Application.logout()# ProjectsPOST /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 pathGET /assets/*file controllers.Assets.at(path=/public, file) 55 55
  660. 660. Play!
  661. 661.  프레임웍
  662. 662.  -
  663. 663.  Javapackage 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. 664. Play!
  665. 665.  프레임웍
  666. 666.  -
  667. 667.  Scalapackage controllersimport 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

×