[네트워크] 웹 서비스 구조(Web Service Structure)

본 포스팅은 네트워크 스터디를 기반으로 개인 정리를 위한 포스팅입니다.
잘못된 부분이 있다면 언제든 지적해주시면 감사하겠습니다!

 

초창기 웹 서비스 구조

문서를 다루는 프로그램은 자료구조, UI, 제어체계 3가지 요소로 구성됨

유지보수의 편의성을 위해 위 3가지를 나누어서 각자 관리

• 문서는 자료구조에 해당됨
  • 자료구조 중 DOM(비선형 트리)으로 이루어짐

---

HTTP 통신

 

웹 서비스를 위한 클라이언트와 서버간의 통신 프로토콜로는 HTTP가 있음

HTTP의 버전의 성장 :  0.9 -> 1.0 → 1.1 → 2.0 → 3.0(현재)

우선 HTTP프로토콜의 대전제로 클라이언트 - 서버 간의 TCP/IP연결이 되어있다는하에 HTTP통신이 이루어질 수 있다는 걸 알아야 함.

HTTP의 가장 큰 특징으로는 Stateless 특징을 가짐

 

---

Stateless

서버가 클라이언트의 이전 상태를 보관하지 않는다는 특징

 

클라이언트의 상태를 보관하지 않기에 클라이언트의 요청에 어느 서버가 응답을 해도 상관이 없다는 점을 통해 클라이언트의 요청이 대폭 증가해도 서버를 증설시켜 해결할 수 있다는 점 또한 존재함(Scale out)

 

Stateless의 문제점으로는 로그인을 예시로 들 수 있는데, 권한이 필요한 어떤 행동에 대해 서버는 클라이언트의 상태를 보관하지 않기 때문에 어떤 일을 할 때마다 사용자의 정보를 계속해서 요구하는 상황이 발생할 수 있다

 

해결방법으로는 웹 브라우저의 쿠키 또는 서버의 세션 등을 이용하여 Stateful하게 변경 가능

---

 

위 그림에서 사용자가 원격지의 문서를 읽기 위한 과정으로는

1. 해당 원격지 서버의 URL을 입력 - DNS를 통해 Web Server의 IP로 접속
2. http.request 요청을 송신
3. 서버에서는 들어온 요청으로부터 response 응답을 보냄 (읽으려는 HTML 문서를 실어서)
4. 사용자는 응답으로 받은 HTML을 렌더링

서버로부터 받아온 HTML문서는 각종 태그를 비롯해 일반적인 문서는 아니기 때문에 Browser는 해당 문서로부터 구문 분석을 수행(Parser를 통해) 후 자료구조(비선형 DOM 트리)를 형성해야함

즉 브라우저가 가져야 하는 핵심기능으로는 두가지가 있음

1. 구문 분석을 수행할 구문 분석 기능
2. 렌더링 엔진

초기의 웹은 문서뷰어의 기능과 같은데 Web탄생 이전과 비교해서 가장 큰 차이점으로는 원격지의 문서를 읽어들일 수 있다는 점이다.

---

웹 서비스의 3대 요소

1. 구문 분석 : HTML DOM(자료구조) Parser
2. 렌더링 : CSS(UI) + 컨텐츠 자료
3. 연산 : JavaScript

앞서 알아본 초창기의 웹 서비스 같은 경우 단순 서버로부터 받아온 HTML(DOM트리)정보를 파싱하는 과정뿐이였음.

 

웹이 발전해가면서 문서를 보여주는 수단으로 HTML에 더해 CSS 및 사진과 같은 정적 컨텐츠 파일들이 많이 요구되었고, 더 나아가 동적 반응을 위한 SW인 JS까지 발전이 되면서 웹 서비스가 상당히 복잡해져버림.

 

기존 서버는 단순히 송수신의 역할뿐이였는데 웹이 성장하면서 다양한 서비스를 처리할 필요가 생기면서 처리를 위한 서버의 서비스단과 DB가 필요로 해지면서 더욱 확장

 

로그인과 같이 단순히 정적 파일을 읽어들이는 것이 아닌 다양한 기능들이 추가되기 시작하면서 기존의 HTTP의 특성인 Stateless를 유지하면서 클라이언트의 상태를 기억할 수단이 필요로 해짐.

 

이러한 수단으로써 클라이언트의 쿠키 또는 서버의 DB 및 세션을 활용하여 웹은 더욱 광범위한 서비스를 가지게 됨

---

JavaScript

Script : 소스 코드를 컴파일 없이 실행할 수 있는 프로그래밍 언어. 내장된 번역기를 사용하므로 느림.

정적 파일이 아닌 상황에 따라 달라지는 동적 반응을 위해 클라이언트에서 동작할 수 있는 S/W인 Script파일 또한 서버에서 추가로 제공이 됨

Script는 서버에서 실행되는 것이 아닌 클라이언트가 서버로부터 해당 파일을 받고 클라이언트 단에서 실행되는 것!

---

전체적인 동작순서

1. 서버로부터 받은 HTML문서에 대한 구문분석을 Parser를 통해 수행하여 자료구조(DOM트리)를 생성
2. 이후 렌더링 엔진을 통해 나머지 정적파일인 CSS(UI), 사진과 같은 컨텐츠 파일을 화면에 렌더링
3. 동적 반응을 위한 JS를 통해 SW연산이 실행

---

Reference

초창기 웹 서비스 구조 (youtube.com)

웹 서비스 3대 요소 (youtube.com)