웹 서비스의 역사와 발전 _2. Web Architecture History

1세대 Web : 정적인 Web

• 단순한 정보 제공 위주이며 기능이 많지 않다.
• User Interaction 요구 없다.
• 로직(동작) 없다.
• HTML, CSS 자체가 정적이다.
• 서버가 HTML 페이지 전체를 클라이언트에게 전송한다.

2세대 Web - 동적인 Web

• 단순한 정적 페이지가 아닌 다이나믹한 요소들 요구
• 웹 기반의 언어 자바스크립트의 출현
• 동적인 2세대 웹 서비스의 출현
• 서버와 클라이언트가 HTML 페이지와 JavaScript 로직을 통해 필요한 데이터를 주고 받으며 User Interaction 구현

*주의사항 : Javascript는 일부분에서만 사용했고 동일한 서버에서 HTML, CSS, Javascript, 그리고 Data 전부가 클라이언트로 전송되는 형태이다. 프론트엔드와 백엔드의 구분이 없다.



“처리해야할 데이터의 양이 급속도로 늘어나고 사용자 수가 증가하게 되면서 렌더링 시간이 늘어나고 트래픽 문제가 발생하게 되었다.”

3세대 Web - SPA & FE / BE

1) SPA (Single Page Application) 방식 등장

• 단일의 HTML 페이지로 전체 웹 서비스 구현한다.
• 단일의 HTML 페이지 안에 메인 Javascript 파일이 포함된다.
• JavaScript가 HTML 요소 생성부터 모든 페이지 기능을 동적으로 처리한다.
• 웹 페이지 렌더링(브라우저에 정보를 나타내는 작업)에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신한다.
• 그 이후로는 서버와 실시간으로 데이터를 주고 받으면서 필요한 화면을 동적으로 구성한다. 자연스럽게 웹 브라우저가 필요한 서버와의 통신은 데이터 전송 및 연산 작업이 대부분이 된다.

2) 프론트엔드와 백엔드 개발의 분리

• 서버의 분리 & 업무의 분리
• 웹페이지 렌더링에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신 그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성한다.
• 백엔드 서버(데이터베이스와 API)에서는 데이터를 클라이언트에게 전달한다.
  *데이터 베이스는 데이터 중심(데이터를 보관하기 좋게) 의 데이터 구조로, DBMS(Database Management System)에서 데이터를 보관하고 요청에 맞게끔 데이터를 처리하여 응답한다. API는, 사용자 중심(사용자에게 응답하기 좋게)의 데이터 구조, 데이터베이스 데이터를 사용자 요청에 맞게끔 가공 및 처리한다.


참고

1. Web Browser (Client)
   해당 서비스를 사용하는 사람, 혹은 컴퓨터 ( 카카오톡/네이버 앱이 설치되어 있는 스마트폰)
   Request : “네이버 첫 페이지 리소스(코드) 요청합니다.”

2. SERVER (Server)
서비스를 제공하는 컴퓨터 (카카오톡 메신저 서버, 네이버 검색 서버)
   Response: “네이버 첫 페이지 리스소(코드) 전달합니다.”



*서버와 클라이언트는 상대적인 개념이다.