WEB의 변천사 들여다보기 (feat. Internet 동작원리)
📌In a nutshell...
- client - server는 상대적인 개념이다
- SPA(singple page application)의 등장으로, frontend/backend 분리 본격화
- Internet/web의 발전과 정보의 불균형
0
1세대의 웹서비스는 html/css 기반, server to client 통신(일방향)
2세대의 웹서비스는 html/javascript 기반, "동적 웹"의 탄생, UI 구현
: 하지만 여전히 frontend/backend 구분은 없는 상태
: 동일한 server에서 html/css/js와 data를 client로 전송
1
3세대 웹서비스는 SPA의 등장과 함께 발전 (Single Page Application)
웹이 발전하면서 이전에 겪지 못한 문제들이 발생하는데,
사용자 증가 > UI 중요성 증가 > 데이터 핸들링 문제 (트래픽 등) 발생이 그것.
그래서 SPA와 함께 frontend/backend가 분리 발전되기 시작함
- 하나의 html 페이지에 모든 서비스를 구현하고 js가 모든 페이지 기능을 동적으로 처리
- 렌더링에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신
- 그 이후부터는 server와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성
즉, 모든 정적 리소스는 처음에 한번만 다운로드하고,
이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만 받아 갱신하는 방법이라 트래픽이 감소하게 된다. wikipedia를 보면 아래와 같이 더 설명이 되어 있다.
“In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.”
react.js, vue.js, angular 등의 오늘날 프레임워크가 모두 SPA 기반이며,
아직 사용해본 적은 없기에 정확히는 아직 모르겠다.
일단 이 정도 이해하는 선에서 마무리. 좀 더 감을 잡는데 도움 준 블로그 글이다.
(220313 update) 이 것도!
2
modern web service(incl. architecture)
frontend <-> backend <-> database(SQL) 의 쌍방향 통신
좀 더 zoom in 하면, frontend <-> API Gateway <-> API <-> database
(API는 database의 data를 조합해 client 요청에 맞게 처리해준다)
3
Internet의 동작 원리
Internet은 물리적인 것, 집-라우터-모뎀-ISP를 통해 리소스가 다른 곳으로 전달됨
예를 들어 사진이라는 리소스를, 내 핸드폰에서 > 친구 핸드폰으로 보내려면 이러한 과정을 거쳐야 하며 리소스는 2진법 형태로 주파수를 통해 라우터로 전달 되는 것
여기서 다시 리소스는 라우터를 통과하기 위해 형태를 바꿔야 하는데, 연결된 케이블이 어떤 것이냐에 따라 전기가 될 수도, 빛이 될 수도 있음
(그리고 이 리소스 패킷은 header와 함께 전달, 아마도 tcp/ip, method등이 포함된 http header를 말하는 것이겠다(공부한 내용이다 야호))
-> 관련 내용: [HTTP] html/css/js, http 기본 개념
당연히 다른 나라와의 인터넷 연결도 해저케이블을 통해 만들어짐
이미지 출처: How Does the Internet Work?
결국 Internet은 물리적인 것들로 설계된 거대한 연결망이며, 이를 구축하려면 돈이 필요함
-> 도시/시골, 빈부격차(개인별 혹은 국가별) 에 따라 접근성 차이 발생 가능성 다수
-> 5G, 열기구를 사용한 네트워크 지원 등 다양한 방법을 동원해 기존 방식을 보완해나가야
