1세대, 2세대, 3세대 웹 특징과 구조적 특성
1. 웹의 역사와 발전
( ⭐️ 면접 Tip: 정의와 함께 예시를 함께 답변하여 어필하자)
1) 1세대 웹 (정적인 웹 / 단순한 정보 제공이 목적 / HTML, CSS로만 구성)
- 웹 서버가 HTML 페이지 전체를 클라이언트(ex. Web browser)에게 전송했다.
- 정적인 html만 보여지는 보고서 형태의 ‘위키피디아’처럼 정보만을 보여주기 위해서 a태그로 연결되어 있는 형태였다.
- 무엇보다 User Interaction(유저의 클릭이나 입력에 따라서 반응하는 것)이 많이 요구되지 않았다.
2) 2세대 웹 (동적웹 / User Interaction 증가 / js출현)
2세대의 출현을 간단하게 보여주자면,
웹 서비스가 발전 → 단순한 정적 페이지가 아닌 다이나믹한 요소를 요구 → 웹기반의 언어인 js 가 출현 → 2세대 웹 서비스 출현
(참고로, js 이전의 언어들은 브라우저에서 동작을 하지 않았다.)
1세대 Web Server가 단방향으로 HTML 페이지 전체를 전송받았다면 이젠 JavaScript를 통해 서버와 필요한 데이터만 주고 받음으로 dynamic한 user interaction을 구현한다.
하지만 이 시절엔 JavaScript 는 일부분에서만 사용되었고, 또한 현재 통용되는 API 의 개념이 아직은 널리 사용 되지 않았다.
그렇다면 그 시절엔 왜 JS를 '일부분만' 사용했을까?
현재 리액트랑 장고를 가지고 통신을 할 땐, 데이터를 그려주기 위해서 json을 사용하여 html은 프론트가 그리고 데이터 들어가는 필요한 부분만 json으로 백엔드 API 요청한다.
하지만 당시엔 이 템플릿 자체와 DB를 백에서 다 가지고 있고 프론트에서는 해당 주소만 Web Server에 보내는 형태였다.
그렇게 되면 그 주소에 맞는 html을 다 그려서 그것을 백단에서 응답으로 보내주었다.
이처럼 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰. 전체 페이지를 다시 렌더링 하는 것을 MPA(Multi Page Application)라 부른다.
참고 ) MPA의 단점은?
새로운 페이지를 이동하면 화면이 깜빡! 한다
페이지 이동시, 전체 페이지를 다시 렌더링 하기 때문에 새로고침이 된다.
프론트와 백엔드가 밀접하게 연관되어 개발이 복잡해진다.
3) 3세대 웹 ( SPA / Frontend와 Backend가 구별되기 시작 )
이제 동적인 기능이 주가 되어버린다. (→ 자바스크립트가 주가 되고 그 안에 일부 HTML, CSS 가 포함.)
이게 바로 SPA(Single Page Application), 하나의 파일로 전체 사이트를 구현 !
