Web Architecture

1세대 웹

단순한 정보 제공 위주의 정적인 웹으로 기능이 많지 않으며 사용자 상호작용 요구가 없기에 로직(동적 요소)도 없다. 정적 요소인 HTML와 CSS로 구성되며 서버가 HTML 페이지 전체를 클라이언트에게 전송한다.

2세대 웹

JavaScript의 출현으로 동적인 웹이며 단순한 정적 페이지가 아닌 동적 요소들이 요구된다. 서버와 클라이언트가 HTML 페이지와 JavaScrip 로직을 통해 필요한 데이터를 주고 받으며 사용자 상호작용을 구현한다. JavaScript의 역할이 늘어도 JavaScript는 일부분에서만 사용된다. 동일한 서버에서 HTML, CSS, JavaScript 그리고 데이터 전부가 클라이언트로 전송되는 형태를 가지면 프론트엔드와 백엔드 구분이 없다.

3세대 웹

단일 HTML 페이지로 전체 웹 서비스를 구현하는 SPA(Single Page Application)의 방식을 가지며 단일 HTML 페이지에 메인 JavaScript 파일이 포함된다. JavaScript가 HTML 요소 생성부터 모든 페이지 및 기능을 동적으로 처리하며 웹 페이지 렌더링에 필요한 JavaScript 코드는 최초의 통신에서 한번에 송수신하며 그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성한다.

기존에는 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, 데이터)를 매번 전송하나 SPA의 등장으로 웹 페이지 렌더링에 필요한 JavaScript 코드는 최초의 통신에서 한번에 송수신되며 그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성하여 자연스럽게 웹 브라우저가 필요한 서버와의 통신은 데이터 전송 및 연산 작업이 되면서 프론트엔드와 백엔드가 분리된다.

현대 웹

사용자 상호작용의 중요성이 증가하고 동시 사용자 수와 데이터 양의 증가로 프론트엔드 서버와 백엔드 서버가 분리되고 백엔드 서버의 API가 세분화되며 데이터 요청을 분산 처리하는 마이크로서비스 아키텍처 구조를 가진다.

Update: 2023-09-13