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

www.javaspecialist.co.kr
웹 어플리케이션 아키텍처
시대별 웹어플리케이션 아키텍처의 변화에 대해 알아본다.
1

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

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

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

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

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값을
채우는 과정이다.

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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

Semelhante a 1. 웹 어플리케이션 아키텍처 (20)

Mais de JinKyoungHeo

Mais de JinKyoungHeo (13)

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