웹 서비스의 역사와 발전

🚀 학습 목표

1. 인터넷과 웹을 정의할 수 있다.
2. 1세대, 2세대, 3세대 웹의 발전과 각각의 특징에 대해 설명할 수 있다.
3. SPA 가 동작하는 방식과 프론트엔드와 백엔드가 분리된 배경에 대해 설명할 수 있다.
4. 모던 웹 아키텍처의 구성을 이해하고 관련된 개발 직군에 대해 설명할 수 있다.

1. Internet & Web

1. Internet

• 인터넷이란?
  • 거대한 통신망
  • 인터넷이란 서비스 안에 웹, 앱 등이 들어간다.
  • 즉, 인터넷이란 통신망이 있기 때문에 모든 서비스들을 사용해볼 수 있는 것이다.
  • 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망

인터넷의 역사

---

1. 1950 -모뎀(Modem)
   • Modem = Modulation(변조) + Demodulation(복조)
     • 변조 : 디지털 데이터 → 아날로그 신호
     • 복조 : 아날로그 신호 → 디지털 데이터
   • 모뎀의 단점
     • 비싸다 : 장거리 전화시스템을 이용하기에 많은 비용이 소요
     • 전화를 사용하므로 데이터 전송보다는 음성 전달에 최적화
     • 중앙 집중적 연결방식
2. 1969 - 아르파넷(ARPAnet)
   • 모뎀의 단점을 보완하여 대안책으로 탄생한 것이 아르파넷
   • ARPAnet = ARPA + 분배 네트워크 + 패킷 스위칭 + 라우터
3. 1983 - TCP/IP & 인터넷(Intenet)
   • TCP/IP - 인터넷의 기술적 표준
     • 다양한 네트워크가 등장하면서 그것들을 서로 연결하기 위한 표준이 필요해짐
     • 프로토콜(Protocol)
       • 통신시스템이 데이터를 교환하기 위해 사용하는 규약
     • 다양한 프로토콜 중 TCP/IP 가 인터넷의 표준 프로토콜로 선정
       • TCP : Transmission Control Protocol
       • IP : Internet Protocol
4. 1990 - 웹의 탄생
   • 인터넷이라는 네트워크 기능 안에 웹이라는 서비스가 존재

2. Web System Architecture

1. Client & Server

1. Client
   • 고객, 사용자
   • 웹 서비스를 사용하는 고객 → Web Browser
   • 프론트엔드는 보다 클라이언트의 측면에서 서비스를 제공할 수 있도록 하여야 한다.
2. Server
   • 제공자
   • 웹 서비스를 제공하는 서버(컴퓨터)
   • 백엔드는 다양한 클라이언트에게서 들어오는 요청들을 처리할 수 있어야 한다.

2. 1세대 웹

1. 1세대 웹 - 정적인 웹
   • only HTML/CSS 만을 사용하여 웹을 구축
   • 단순한 정보 제공 위주, 기능이 많지 않았음

3. 2세대 웹

1. 웹서비스의 발전 - 동적인 웹
   • 동적인 2세대 웹 서비스의 출현
   • 웹 기반의 언어 JavaScript의 출현
   • 단순한 정적 페이지가 아닌 다이나믹한 요소들이 요구됨
   • JS로직 ← 데이터 → User Interaction
2. 프/백 구분 없는 동일한 서버

4. 3세대 웹

1. SPA (Single Page Application)방식 등장
   • 단일의 HTML 페이지로 전체 웹 서비스 구현 (예를 들어, airbnb)
   • JS가 HTML 요소 생성부터 모든 페이지 및 기능을 동적으로 처리
2. 프론트엔드와 백엔드 개발의 분리
   • SPA의 등장 (FE)
   • 서버와의 통신은 데이터 전송 및 연산 작업은 따로 분리(BE)
   • 서버의 분리 & 업무의 분리 → FE & BE 개발의 분리

3. Modern Web Development

1. Modern Wen System Architecture

• 웹 서비스의 복잡성 증가
  • User Interaction의 중요성 증가
  • 사용자 수 증가
  • 데이터의 양 증가
• 이전에 겪지 못한 문제점 도래
  • 동시 접속사의 수 (트래픽관리가 필수적)
  • 데이터의 양 (저장해야하는 데이터가 많아짐)
• System Architecture 발전
  • FE 서버 / BE 서버 분리
  • BE API 서버의 세분화
  • 데이터 요청 분산 처리 (API Gateway)

2. Modern Web Development Team

Frontend

---

• HTML, CSS, JavaScript 로 프론트엔드 시스템을 구현하는 역할
• 사용자와 가장 밀접하게 연결되어 있는 개발자

Backend

---

• 클라이언트가 많아지에 따라 다뤄야할 데이터의 양이 많아짐
• 따라서, 데이터를 세분화하여 관리한다.
• Backend 개발자들도 크게 2가지로 나뉨
  • Backend 에서 좀더 앞 쪽을 담당하는 (즉 API 개발을 담당하는) 개발자.
  • Backend에서도 완전 뒤쪽, 즉 데이터 수집, 분석, 관리 등의 데이터 관련 시스템을 개발하는 개발자.
  • (경력이 높아질 수록 좀 더 난이도가 있는 뒷 부분에 해당하는 시스템을 많이 구현.) → DevOps