Worker             Microdata        Video ARIA CSS3Drag & Drop Canvas                   Audio    SVG JavascriptNew Form We...
<font color=”blue” size=”20”><b>Bold</b><b>Italic</b><u>Underline</u></font>                   Bold Italic Underline
printf("%s%c%cn", "Content-Type:text/html",13,10);printf("<HTML><HEAD><TITLE>Multiplication results</TITLE></HEAD><BODY>")...
<%@ page language=”java”%><html><head><title>Multiplication results</title></head><body><H3>Multiplication results</H3><% ...
class ProductModel {  long multiplier, long multiplicant, long product;}class CalcService {                               ...
Web ServerHTTP RequestNew HTML Page
Web ServerXML HTTP RequestNew HTML Fragment
Web Server         XML HTTP Request              DataJavaScript
RESTful API
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
Upcoming SlideShare
Loading in …5
×

단일 페이지 인터페이스 웹/앱 개발

13,999 views

Published on

K모바일에서 발표한 단일 페이지 인터페이스 웹/앱 개발. 웹의 역사와 개발 패러다임의 변화를 되돌아보고, 웹앱을 위한 아키텍쳐로 단일 페이지 인터페이스(Single Page Interface)를 제시하고, jQueryMobile과 SenchaTouch를 이용해 동일한 웹앱을 SPI 방식으로 만들어본다.

Published in: Technology, Business
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total views
13,999
On SlideShare
0
From Embeds
0
Number of Embeds
5,959
Actions
Shares
0
Downloads
105
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

단일 페이지 인터페이스 웹/앱 개발

  1. 1. Worker Microdata Video ARIA CSS3Drag & Drop Canvas Audio SVG JavascriptNew Form WebSocket GeolocationWeb Storage Semantic MathML WebGL Offline Application Files Device Element
  2. 2. <font color=”blue” size=”20”><b>Bold</b><b>Italic</b><u>Underline</u></font> Bold Italic Underline
  3. 3. printf("%s%c%cn", "Content-Type:text/html",13,10);printf("<HTML><HEAD><TITLE>Multiplication results</TITLE></HEAD><BODY>");printf("<H3>results</H3>");char *data = getenv("QUERY_STRING");if(data == NULL) printf("<P>Error!</P>");else if(sscanf(data,"m=%ld&n=%ld",&m,&n)!=2) printf("<P>Error!</P>");else printf("<P>The product of %ld and %ld is <b>%ld</b>.</P>",m,n,m*n);printf("</BODY></HTML>”); Multiplication results The Product of 10 and 20 is 200.
  4. 4. <%@ page language=”java”%><html><head><title>Multiplication results</title></head><body><H3>Multiplication 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) { %><p>Error!</p><% } %></body></html> Multiplication results The Product of 10 and 20 is 200.
  5. 5. class ProductModel { long multiplier, long multiplicant, long product;}class CalcService { M long getProduct(long m, long n) { return m * n; }}<jsp:useBean id=”model” class=”ProductBean”/> http:/test.com/test.com/mul.jsp?m=10&n=20<H3>Multiplication results</H3><p>The product of <jsp:getProperty name=”model”property=”multiplier”/> and <jsp:getProperty name=”model” V Multiplication resultsproperty=”multiplicand”/> is <b><jsp:getProperty name=”model”property=”product”/></b>.</p> The Product of 10 and 20 is 200.long m = Long.parseLong(request.getParameter(“m”));long n = Long.parseLong(request.getParameter(“n”));ProductModel model = new ProductModel(m, n, calcService.getProduct(m, n));request.setAttribute(“model”, model); CgetServletContext().getRequestDispatcher(“mul.jsp”).forward(request,response);
  6. 6. Web ServerHTTP RequestNew HTML Page
  7. 7. Web ServerXML HTTP RequestNew HTML Fragment
  8. 8. Web Server XML HTTP Request DataJavaScript
  9. 9. RESTful API

×