웹 애플리케이션

웹 애플리케이션의 구조

웹사이트(website) vs 웹 애플리케이션(web application)

아마 대부분 둘이 같다고 생각하는 사람이 많을 거다

우리는 일상용어로 혼용해서 사용하기도 하기 때문이다

 

개발 영역에서 웹사이트(website)는 정적 페이지들의 집합체를 의미한다

여기에 동적 페이지를 포함하게 된다면 web application이라고 한다

 

사실 오늘날의 대부분의 웹사이트들은 엄밀하게 말하면 웹 애플리케이션들이다

 

웹 애플리케이션의 특징

• 데스크탑 애플리케이션처럼 상호작용이 가능하다
• 특정 기능을 가지고 있다(정보 검색 등)
• 정보나 자료 등의 콘텐츠 관리 시스템과 함께 작동한다

---

웹 애플리케이션 아키텍처

유저가 웹브라우저에서 요청을 하면 애플리케이션의 다양한 요소들(브라우저, 유저 인터페이스, 미들웨어, 서버, 데이터베이스 등)이 상호작용을 한다.

웹 애플리케이션 아키텍처는 이러한 요소들이 상호작용을 유지할 수 있도록 해주는 뼈대이다

---

웹 애플리케이션의 요청 흐름

https://www.google.com 로 접속한다고 할 때

• 브라우저에 https://www.google.com 입력한다
• 브라우저는 URL을 입력받으면 서버의 주소를 찾기 위해 DNS 서버에 요청을 보낸다
• IP 주소를 찾으면 해당 주소에 HTTPS 요청을 보낸다. 이미 방문 기록이 캐시 메모리에 있으면 주소를 캐시 메모리에서 가져온다
• 웹서버에 요청이 도착한다
• 웹서버는 저장소에 요청을 보내 페이지 관련 데이터들을 가져온다
• 정보들은 가져오는 중에 비지니스 로직이 작용한다
• 로직들을 통해 요청 받은 데이터들이 처리되고 브라우저에 응답한다
• 요청들이 브라우저에 응답으로 돌아왔을 때, web page 화면에서 출력된다

 

모든 애플리케이션은 client-side와 server-side로 작동한다

• front-end : 유저의 입력에 따라 브라우저에서 작동하는 프로그램
• back-end : HTTP 요청에 따라 서버에서 요청을 처리하는 프로그램

---

웹 애플리케이션의 요소

• 유저 인터페이스 요소 : UI, UX와 관련된 요소 -> 웹 애플리케이션의 기능적인 부분 외적인 요소
• 구조 요소 : 기능적인 부분 -> 유저와의 상호작용, 제어, 데이터베이스 등에 관련한 요소들

---

웹 애플리케이션의 3단계 계층 구조

크게 3단계로 나눌 수 있다

이를 Web Application Three Tier Architecture 라고 한다

 

• Presentaion Layer : 유저와 브라우저 등을 이용해 직접적으로 접촉(Web Server가 이 영역에 포함)
• Application Layer : 유저의 요청을 브라우저로부터 받아서 처리(Application Server가 이 영역에 포함)
• Data Access Layer : 애플리케이션의 데이터 저장소에 접근하여 데이터를 불러오거나 저장을 담당

 

그 외에

• Cross-Cutting : 보안, 통신, 운영 관리등을 위한 요소
• Third-party integrations : 제 3의 API 서비스를 이용하는 것 (소셜 로그인, PG사를 이용한 결재 등)