인터넷과 웹, 알고 있지만 알지 못했던 것들

프론트엔드 개발자가 되기 위한 공부를 하다가 자바스크립트, 웹페이지 구현, 언어와 문법에만 치중하게 되는 느낌을 받을 때가 있었다.
지금은 조금씩이라도 CS공부를 하려고 적극적으로 노력하고 있는데, 그 이유는 물론 앞으로 좋은 개발자로 성장하기 위한 밑바탕이기 떄문이기도 하지만, '기본이 되는 배경 지식을 모르면 내가 개발자라고 할 수 있을까?'라는 생각이 들었기 때문이고, 순수하게 공부할 때마다 궁금한 내용이 계속해서 생겼기 때문이다.

내가 하는 일이 무슨 일인지,
내가 작성하고 있는 코드는 어떻게 작동하는지,
브라우저는 어떻게 동작하는지,
그래서 내가 쓰는 인터넷이 무엇이고 웹이 무엇이고,
어떻게 작동하는 것인지 등등...

그런 의미에서, 오늘은 인터넷과 웹에 대해서 알아보았다.

🖥 인터넷과 웹의 정의

인터넷

전세계의 컴퓨터가 정보를 교환할 수 있도록 연결된 네트워크 통신망

웹

인터넷을 통해 접근할 수 있는 정보의 집합

인터넷이라는 네트워크 안에 웹이라는 서비스가 있다고 이해하면 쉽다.

🖥 왜 생겼을까

⌨️ 인터넷은 왜 필요했을까

• 2차 세계대전 이후 우주와 핵미사일 개발에 대한 경쟁이 심화되면서, 컴퓨터 통신 시스템 설계에 대한 중요성이 커졌다.
• 당시에는 중앙 집중적 네트워크 방식을 사용했기 때문에, 전화국이 파괴되면 해당 전화국에 연결된 통신이 모두 끊긴다는 문제가 있었는데, 핵의 위험에서 안전할 수 있는 다른 통신 시스템이 필요했다.

잠깐, 전화국?

당시에는 전화국을 통해서 통신을 주고 받았다.

통신은 정확히 무엇을 의미하길래 전화국이 담당했을까?

컴퓨터 통신을 전화선과 전화국이 담당했다는 것 자체가 생소했다.
당신에는 컴퓨터에서 사용하는 디지털 데이터를 아날로그 신호로 바꾸어 기존에 설치되어있는 전화선을 활용해 주고받았던 것이다. 이미 광범위하게 전화선이 설치되어있던 시점이었으므로 최적의 선택이었을 듯 하다.

아날로그 신호? 전화선으로도 디지털 데이터가 전달되어야 하는 것 아닌가?

아날로그 신호는 전파를 말한다. 통화할 때 우리가 반대편에서 수집된 소리를 듣기 위해서는 파동을 타고 소리가 우리의 귀까지 도달해야 한다. 이처럼 전파는 우리 세계에 실제로 존재하는 물리적인 신호이며, 디지털 데이터는 이 파동의 최고점과 최저점을 0과 1로 변환한 것이다.

⌨️ 요약하면...

즉, 컴퓨터에 전달할 데이터를 입력했다면 이것을 아날로그 데이터로 바꾸어 전화선을 통해 운반하고, 반대쪽 컴퓨터에서 이것을 디지털 데이터로 바꾸어 컴퓨터에서 처리하는 과정이 통신이었다.

이것은 전화국이 관리했고, 한 전화국에 많은 통신이 연결되어있어 파괴될 시 통신 두절에 대한 피해가 광범위해질 우려가 있었다. 따라서 전시 상황에 보다 안전한 통신시스템이 새로 필요했는데, 이것이 기존의 전화선을 이용하지 않고 컴퓨터들끼리 연결하는 네트워크 통신망인 인터넷이다.

⌨️ 웹은 왜 생겼을까

웹이 등장하면서 인터넷 통신이 대중적으로 사용되기 시작했는데, 이렇게 중요한 웹은 무슨 이유로 누가 만든걸까?

웹은 1989년 3월 유럽 입자 물리 연구소(CERN)의 컴퓨터과학자 팀 버너스-리(Tim Berners-Lee)가 처음으로 WWW이라는 세계최초의 웹 브라우저를 만들면서 탄생했다. 이것은 물리학자들 상호간의 신속한 정보교환과 공동연구를 위한 프로그램으로 고안되었다.

🖥 웹의 발전 과정

초기의 웹은 어떤 형태였으며, 지금의 웹과 무엇이 다를까?

⌨️ 1세대

1세대의 초기 웹은 굉장히 정적으로,
서버가 HTML페이지를 클라이언트에게 전송하는것이 전부였다.
단순한 정보 제공을 위한 목적으로만 사용되었다.

⌨️ 2세대

• 동적인 웹 서비스가 등장했다.
• 웹 기반의 언어 자바스크립트가 탄생했다.
• 동일한 서버에서 HTML,CSS,JS,DATA모두를 필요할때마다 메번 클라이언트로 전송하는 형태였다.

⌨️ 3세대

• SPA등장!

SPA (Single Page Application)

2세대까지는 서버에서 HTML,CSS,JS,DATA모두를 클라이언트에게 전송했다.
3세대 부터는 SPA방식을 사용하여 하나의 HTML파일에 JS가 페이지와 기능을 동적으로 처리하였다.

HTML파일도 단일화되었고, JS코드는 한번에 모두 받아와 렌더링에 쓰였기 때문에 더 이상 추가 통신이 필요없어졌다.
이것이 프론트엔드와 백엔드가 분리되는 배경이다.

• 프론트엔드와 백엔드분리
  • JS코드는 더 이상 웹 페이지 렌더링때마다 받아오지 않게 되었다. 한번에 받아온 다음, 서버와 실시간으로 데이터를 주고 받으면서 화면을 동적으로 구성한다.
  • 따라서 웹 브라우저가 서버와 통신하는 경우는 웹 페이지 렌더링이 아닌 데이터를 전송하거나 연산하는 작업을 진행할 때가 주가 되었다.
  • 서버와 업무가 분리되면서 프론트엔드와 백엔드가 분리되었다.

⌨️ 그래서.. 현재는?

웹서비스는 점점 더 복잡해졌고, 해결책이 필요했다.

어떤 문제를 해결해야 했을까?

• 웹서비스가 복잡해지고 유저와의 상호작용이 중요해지면서, 데이터의 양이 늘어났고 이것을 다루는 일 또한 까다로워졌다.

• 사용자가 늘어나면서 동시접속자 수 또한 크게 증가했다. 이를 감당해낼 서버가 필요했다.

• System Architecture 발전

  • 프론트엔드와 백엔드의 서버가 분리되었다.
  • 백엔드 API 서버가 세분화되었다.
  • API Gateway데이터의 양이 늘어난 만큼 데이터 요청을 분산 처리할 수 있도록 만들었다.

Reference

• 웹의 생긴 이유 (wbcb)
  http://www.wbcb.co.kr/news/articleView.html?idxno=71700
• 인터넷과 웹의 역사 (생활코딩)
  https://www.youtube.com/watch?v=A2kt9oyMjSg
• 웹이란 무엇인가 (생활코딩)
  https://www.youtube.com/watch?v=7ujWkFyw01g