(WEB) 웹 서비스 구조 이해 2편, 웹의 발전과 다양한 기술의 등장
이번 포스팅은 웹의 발전과정에 관한 포스팅이다.
1편은 웹의 탄생과 초기 구조에 관한 포스팅이며, 하단 링크를 통해 접속할 수 있다.
(WEB) 웹 서비스 구조 이해 1편, 웹의 탄생과 초창기 웹의 구조
프론트엔드를 지망하는 주니어 개발자로서 웹의 단편적인 지식만을 공부하다 보니 오히려 이해가 떨어지는 것을 느꼈다. 웹이 왜 생겼는지, 어떤 과정을 통해 발전했고, 어떤 문제가 발생했는
lemu-devblog.tistory.com
발전하는 웹
모든 기술은 발전을 하면서 3가지로 나뉘게 된다.
초반에는 이 3가지가 결합된 형태로 나타날 수 있지만 결국 유지보수를 위해 3가지로 분리된다.
이 세 요소는 아래와 같다.
1. 자료구조(data) : 데이터
2. 제어(logic) : 데이터를 제어하기 위한 소프트웨어
3. 인터페이스(ui)
웹도 복잡해지고, 요구 사항이 늘어남에 따라 웹 역시 3가지로 분화되었다.
클라이언트의 발전
css의 등장 (UI)
초기 웹에서, 자료구조인 htm은 단순히 데이터를 표현하였다.
하지만 시간이 지나면서 html의 시각적 표현을 개선할 필요성이 증가했다.
이에 초기에는 html 내부에 스타일링 기능을 추가했으나, 유지보수가 어려워져서 분리를 했다.
이렇게 분리된 스타일링 문서가 바로 css이다.
css는 웹 페이지의 시각적 표현을 담당하며, 브라우저에게 랜더링을 지시하는 문서이다.
js의 등장 (logic)
웹이 복잡해지면서 서버로부터 클라가 단방향으로 정보를 받아오던 과거와 달리,
양방향 통신(상호작용)의 필요성이 점점 커졌다. (예 : 로그인)
양방향으로 소통을 하기 위해서 웹 페이지는 동적일 필요성이 있었고,
이에 자바스크립트가 등장하게 되었다.
자바스크립트는 클라이언트에서 제어(logic) 역할을 수행하며,
브라우저에는 스크립트 엔진이 추가되어 자바스크립트를 지원하게 되었다.
쿠키의 등장 (상태 저장)
양방향 통신을 하게 되면서 통신 과정 중, 상태(state)를 관리할 필요가 생겼다.
하지만 http는 stateless 프로토콜이기 때문에 이 상태를 따로 기록할 필요가 있었다.
이에 클라이언트에서는 state를 기록하기 위해 쿠키가 도입되었다. (서버는 DB를 이용)
<클라이언트 3요소>
1. 자료구조(data) : html
2. 제어(logic) : javascript
3. 인터페이스(ui) : css
서버의 발전
서버 역시 양방향 통신 도입에 따라 기존 서버의 기능을 분화시켰다.
DB의 등장 (model)
먼저 각종 상태를 기록하기 위해서 서버에는 데이터베이스가 추가되었다.
데이터베이스는 서버 측 상태와 데이터를 저장하고 조회하는 역할을 한다.
DB는 WAS(controller)와 SQL을 이용해 소통한다.
서버의 가장 마지막에 있기에 back-end-server라고도 불린다.
web server의 역할 분화 (View)
기존 웹 서버는 클라이언트와 통신을 주로 담당했다.
웹 서버는 주로 클라이언트에게 데이터를 전송하고 요청을 받는 view 역할을 한다.
가장 앞단에 있는 서버이기에 front-end-server라고도 불린다.
WAS의 등장 (Controller)
서버의 로직이 복잡해짐에 따라 이를 처리하는 처리주체를 따로 분리했고, 이것이 바로 WAS다.
WAS는 클라이언트의 요청을 처리하고, 데이터베이스와 상호작용을 한다.
<서버 3요소>
1. Model : DB (back-end-server)
2. View : web server (front-end-server)
3. Controller : WAS
시퀀스 다이어그램
