SlideShare a Scribd company logo
1 of 75
Download to read offline
Worker
             Microdata
        Video ARIA CSS3
Drag & Drop Canvas
                   Audio
    SVG Javascript
New Form WebSocket    Geolocation
Web Storage Semantic
      MathML WebGL   Offline Application
                  Files
       Device Element
<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>");
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.
<%@ 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.
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 results
property=”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);
                                                                   C
getServletContext().getRequestDispatcher(“mul.jsp”).forward(request,
response);
Web Server
HTTP Request




New HTML Page
Web Server
XML HTTP Request




New HTML Fragment
Web Server
         XML HTTP Request




              Data
JavaScript
RESTful API
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발
단일 페이지 인터페이스 웹/앱 개발

More Related Content

What's hot (8)

Infrastructure as Code on AWS
Infrastructure as Code on AWSInfrastructure as Code on AWS
Infrastructure as Code on AWS
 
Api types
Api typesApi types
Api types
 
클라우드 보안 이슈 및 원격 관제 기반 대응 방안 - AWS Summit Seoul 2017
클라우드 보안 이슈 및 원격 관제 기반 대응 방안 - AWS Summit Seoul 2017클라우드 보안 이슈 및 원격 관제 기반 대응 방안 - AWS Summit Seoul 2017
클라우드 보안 이슈 및 원격 관제 기반 대응 방안 - AWS Summit Seoul 2017
 
Ethnic and Immigration
Ethnic and ImmigrationEthnic and Immigration
Ethnic and Immigration
 
Building an API Security Strategy
Building an API Security StrategyBuilding an API Security Strategy
Building an API Security Strategy
 
AWS Security Hub Deep Dive
AWS Security Hub Deep DiveAWS Security Hub Deep Dive
AWS Security Hub Deep Dive
 
AWS Monitoring & Logging
AWS Monitoring & LoggingAWS Monitoring & Logging
AWS Monitoring & Logging
 
WebRTC presentation
WebRTC presentationWebRTC presentation
WebRTC presentation
 

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

Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
Hjörtur Hilmarsson
 

Similar to 단일 페이지 인터페이스 웹/앱 개발 (20)

AnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFacesAnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFaces
 
Primefaces Confess 2012
Primefaces Confess 2012Primefaces Confess 2012
Primefaces Confess 2012
 
Uniface Lectures Webinar - Building Responsive Applications with Uniface: Dev...
Uniface Lectures Webinar - Building Responsive Applications with Uniface: Dev...Uniface Lectures Webinar - Building Responsive Applications with Uniface: Dev...
Uniface Lectures Webinar - Building Responsive Applications with Uniface: Dev...
 
Java Web Development with Stripes
Java Web Development with StripesJava Web Development with Stripes
Java Web Development with Stripes
 
JSP
JSPJSP
JSP
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Working with Javascript in Rails
Working with Javascript in RailsWorking with Javascript in Rails
Working with Javascript in Rails
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4
 
AngularJS On-Ramp
AngularJS On-RampAngularJS On-Ramp
AngularJS On-Ramp
 
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Tech...
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
14922 java script built (1)
14922 java script built (1)14922 java script built (1)
14922 java script built (1)
 
Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com Backbone
 
JS-05-Handlebars.ppt
JS-05-Handlebars.pptJS-05-Handlebars.ppt
JS-05-Handlebars.ppt
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 

More from 동수 장

웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
동수 장
 
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
동수 장
 
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
동수 장
 
하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈
동수 장
 
Hybrid Mobile Application Framework
Hybrid Mobile Application FrameworkHybrid Mobile Application Framework
Hybrid Mobile Application Framework
동수 장
 
Gnome Architecture
Gnome ArchitectureGnome Architecture
Gnome Architecture
동수 장
 

More from 동수 장 (13)

(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
(면접에서 자주 나오는) HTTP : 브라우저에서 서버까지.pdf
 
Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2Java/Spring과 Node.js의 공존 시즌2
Java/Spring과 Node.js의 공존 시즌2
 
백세코딩
백세코딩백세코딩
백세코딩
 
Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존Java/Spring과 Node.js의공존
Java/Spring과 Node.js의공존
 
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
프론트엔드 웹앱 프레임웍 - Bootstrap, Backbone 그리고 AngularJS
 
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
 
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
개발자와 협업하기 위한 API의 이해 - API를 준비하는 금성인을 위한 안내서
 
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
모바일/클라우드 시대를 준비하는 개발자들을 위한 안내서
 
하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈하이브리드앱 개발 전략과 이슈
하이브리드앱 개발 전략과 이슈
 
하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례하이브리드앱 아키텍쳐 및 개발 사례
하이브리드앱 아키텍쳐 및 개발 사례
 
Hybrid Mobile Application Framework
Hybrid Mobile Application FrameworkHybrid Mobile Application Framework
Hybrid Mobile Application Framework
 
Javascript Common Mistakes
Javascript Common MistakesJavascript Common Mistakes
Javascript Common Mistakes
 
Gnome Architecture
Gnome ArchitectureGnome Architecture
Gnome Architecture
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Worker Microdata Video ARIA CSS3 Drag & Drop Canvas Audio SVG Javascript New Form WebSocket Geolocation Web Storage Semantic MathML WebGL Offline Application Files Device Element
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 18. 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.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. <%@ 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.
  • 25.
  • 26.
  • 27.
  • 28. 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 results property=”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); C getServletContext().getRequestDispatcher(“mul.jsp”).forward(request, response);
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 38. Web Server XML HTTP Request New HTML Fragment
  • 39. Web Server XML HTTP Request Data JavaScript
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.