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.
www.javaspecialist.co.kr
www.javaspecialist.co.kr
웹 어플리케이션 아키텍처
시대별 웹어플리케이션 아키텍처의 변화에 대해 알아본다.
1
www.javaspecialist.co.kr
1. 웹 문서 시대(1990년대)
• 웹 서버와 브라우저간 정적인 HTML문서를 주로 보내거나 CGI(Common Gateway Interface)를 이용하여
개발하는 경우
...
www.javaspecialist.co.kr
2. 웹 표준 시대(2000년대 초반)
• 2000년대 초반으로 오면서 백엔드 개발에서는 이른바 MVC 모델이라는 기법을 통해 데이터 모델과 템플
릿 그리고 비즈니스 로직이 ...
www.javaspecialist.co.kr
3. Ajax 시대(2000년대 후반)
• 2004년 지메일과 구글맵스가 소개되면서 프론트 엔드 부분에 웹 기술의 혁신이 일어나게 된다.
• 즉, 프론트엔드 웹 콘텐츠가 고객...
www.javaspecialist.co.kr
4. HTML5시대(2010년대 초반)
• HTML5가 가져올 가장 큰 변화는 서버와 독립적인 웹 애플리케이션의 개발이 가능하다는 것이다.
• 특히, 모바일 환경에서 오프라인...
www.javaspecialist.co.kr
5. 브라우저 동작 원리
6
Webkit 렌더링 엔진의 메인 플로우
HTML
Style
Sheets
HTML
Parser
Painting
DOM
Tree
Layout
CSS
...
Upcoming SlideShare
Loading in …5
×

1. 웹 어플리케이션 아키텍처

3,911 views

Published on

HTML5 강의안 - 1. 웹 어플리케이션 아키텍처

Published in: Software
  • Login to see the comments

1. 웹 어플리케이션 아키텍처

  1. 1. www.javaspecialist.co.kr www.javaspecialist.co.kr 웹 어플리케이션 아키텍처 시대별 웹어플리케이션 아키텍처의 변화에 대해 알아본다. 1
  2. 2. www.javaspecialist.co.kr 1. 웹 문서 시대(1990년대) • 웹 서버와 브라우저간 정적인 HTML문서를 주로 보내거나 CGI(Common Gateway Interface)를 이용하여 개발하는 경우 • 마크업과 프로그램 코드가 섞여있는 개발 방식을 사용함. • 개발 직군간의 업무 분담이 전혀 이루어지지 않는 상태. Client Web Server <html> <title><?= title ?></title> <body> <font size=2>Hello World</font> <?=mysql_query("SELECT NAME…)?> … </body> </html> ----------------------------------------------------- -----------------------------------------------------Browser Plug-in Web Container <<HTTP>> HTTP response HTTP request Database <html> <title>타이틀</title> <style>…</style> <script>…</cript> <body> </body> </html> 이 그림은 파일이 저장된 위치를 의미하는 것이 아니다. 실행이 어디에서 되는지를 보여주기 위해 클라이언트와 서버를 나눠 표현했다. 수퍼개발 자! 2
  3. 3. www.javaspecialist.co.kr 2. 웹 표준 시대(2000년대 초반) • 2000년대 초반으로 오면서 백엔드 개발에서는 이른바 MVC 모델이라는 기법을 통해 데이터 모델과 템플 릿 그리고 비즈니스 로직이 분리된 코드를 통해 개발 생산성을 높이게 된다. • 프론트엔드에서도 웹 표준 개발 방법론을 통해 구조(HTML), 표현(CSS), 동작(DOM Script)를 분리하고 CSS 레이아웃과 W3C 기반 DOM을 통한 웹 개발 방식을 많이 이용하게 된다. Client Web Server <% -------- -------- ----- ------- -------- ----- %> ----------------------------------------------------- -----------------------------------------------------Browser Web Container <<HTTP>> HTTP response HTTP request DatabaseView Model DAOVO Controller HTML CSS JS 구조 표현 동작 Plug-in 이 구조는 아직까지 대 부분의 웹 어플리케이 션에서 가장 많이 사용 하는 구조이다. 이 그림은 파일이 저장된 위치를 의미하는 것이 아니다. 실행이 어디에서 되는지를 보여주기 위해 클라이언트와 서버를 나눠 표현했다. 요청 처리 결과는 HTML, CSS, 스크립 트코드, 데이터를 모 두 포함한다. 3
  4. 4. www.javaspecialist.co.kr 3. Ajax 시대(2000년대 후반) • 2004년 지메일과 구글맵스가 소개되면서 프론트 엔드 부분에 웹 기술의 혁신이 일어나게 된다. • 즉, 프론트엔드 웹 콘텐츠가 고객의 PC에 일단 로딩이 된 다음에는, 웹 서버에 Ajax(비동기) 호출을 통해 데이터를 받아 온 후 기존 DOM을 갱신하여 화면 정보를 갱신시키는 개발 방법이다. • 이 방법을 통하면 백엔드 개발자가 json과 같은 데이터 기반 응답만 하게 되므로 더 간단한 웹 개발이 이루 어진다. 이에 반해 프론트엔드 개발자는 다양하고 풍부한 사용자 경험을 제공하는 웹 애플리케이션 개발 이 가능해졌습니다. Client Web Server { "Name": "JK", "Age":30 } ----------------------------------------------------- -----------------------------------------------------Browser Web Container <<HTTP>> HTTP response (Data) HTTP request (Asynchronous) Database View Model DAOVO Controller HTML CSS JS 구조 표현 동작 Plug-in 이 그림은 파일이 저장된 위치를 의미하는 것이 아니다. 실행이 어디에서 되는지를 보여주기 위해 클라이언트와 서버를 나눠 표현했다. 요청 처리 결과 로 데이터만 반 환한다. 스크립트 코드는 요 청 결과를 받아 HTML 페이지에 결과 를 동적으로 반영한 다. 4
  5. 5. www.javaspecialist.co.kr 4. HTML5시대(2010년대 초반) • HTML5가 가져올 가장 큰 변화는 서버와 독립적인 웹 애플리케이션의 개발이 가능하다는 것이다. • 특히, 모바일 환경에서 오프라인 기능과 로컬 데이터베이스의 지원은 웹 서버와 독립할 수 있는 여건을 만 들어 준다. • 특히, HTML5의 Canvas, Video, Audio, 드래그앤드롭, 지오로케이션, 파일API, 데이터저장소, 웹소켓 등을 통한 사용자 경험을 확대해 줄 수 있다. Web Server { "Name": "JK", "Age":30 } ----------------------------------------------------- ----------------------------------------------------- Web Container <<HTTP>> HTTP response (Data) HTTP request (Asynchronous) Database View Model DAOVO Controller WebService Client Browser HTML CSS JS 구조 표현 동작 Storage 이 그림은 파일이 저장된 위치를 의미하는 것이 아니다. 실행이 어디에서 되는지를 보여주기 위해 클라이언트와 서버를 나눠 표현했다. HTML5 = HTML5 + CSS3 + JavaScript 5
  6. 6. www.javaspecialist.co.kr 5. 브라우저 동작 원리 6 Webkit 렌더링 엔진의 메인 플로우 HTML Style Sheets HTML Parser Painting DOM Tree Layout CSS Parser Attachment Render Tree Style Rules Display DOM 자바스크립트로 DOM Tree의 객체 를 제어한다면 화면 조작이 가능하다는 의미이다. 물론 그럴려면 자바스크 립트가 실행되기 전에 HTML문서가 파싱되어 DOM Tree가 만들어져 있어야 한다는 것이다. 스타일을 처리하고 (computation) renderer를 생성하 는 과정을 말한다. 렌더 객체가 위치와 크기가 갖게 되는 과정을 말한다. 렌더링 트리를 탐색 하면서 특정 메모리 공간에 RGB값을 채우는 과정이다.

×