학습목표
1. 인터넷과 웹을 정의할 수 있다.
2. 1세대, 2세대, 3세대 웹의 발전과 각각의 특징에 대해 설명할 수 있다.
3. SPA 가 동작하는 방식과 프론트엔드와 백엔드가 분리된 배경에 대해 설명할 수 있다.
4. 모던 웹 아키텍처의 구성을 이해하고 관련된 개발 직군에 대해 설명할 수 있다.
📌 1. 인터넷과 웹의 정의
인터넷이란 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망이다. 즉, 컴퓨터들이 서로 통신 가능한 거대한 네트워크라고 할 수 있다.
웹이란 인터넷 네트워크를 이용하여 통신되는 정보의 집합이라고 정의할 수 있다.
📌 2. 1세대, 2세대, 3세대 웹의 발전과 각각의 특징
정적인 웹이라고 할 수 있다.
서버가 HTML 페이지 전체를 클라이언트에게 전송한다.
단순한 정보 제공 위주, 기능이 많지 않다.
User Interaction 요구가 없다.
동적이라고 할 수 있다.
웹 기반의 언어 자바스크립트의 출현했으며,
다이나믹한 요소들을 요구하게 되었다.
서버와 클라이언트가 HTML 페이지와 JavaScript 로직을 통해 필요한 데이터를 주고 받으며 User Interaction을 구현할 수 있게 되었다.
다만 아직 프론트엔드/백엔드 구분 없이 동일한 서버를 사용한다.
그리고 자바스크립트의 역할은 증대했지만 일부분에서만 사용된다.
동일한 서버에서 HTML, CSS, Javascript, 그리고 Data 전부가 클라이언트로 전송되는 형태.
SPA (Single Page Application) 방식이 등장했다.
단일의 HTML 페이지로 전체 웹 서비스 구현하고,
단일 HTML 페이지에 메인 Javascript 파일이 포함된다.
JavaScript 가 HTML 요소 생성부터 모든 페이지 및 기능을 동적으로 처리하고,
웹 페이지 렌더링에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신이 된다.
그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성한다.
그리고 프론트엔드와 백엔드 개발의 분리되었다.
기존에는 서버가 페이지 구성에 필요한 모든 요소(HTML, JavaScript, Data)를 매번 전송했지만 SPA 의 등장 (FE)으로 인해 웹 페이지 렌더링에 필요한 Javascript 코드는 최초의 통신에서 한번에 송수신되고, 그 이후로는 서버와 실시간으로 데이터를 주고 받으며 필요한 화면을 동적으로 구성한다.
자연스럽게 웹 브라우저가 필요한 서버와의 통신은 데이터 전송 및 연산 작업이 대부분이 된다. (BE)
📌3. SPA 가 동작하는 방식과 프론트엔드와 백엔드가 분리된 배경에 대해 설명
- 단일 페이지로 구성된 웹애플리케이션을 말하며, 화면 이동 시 필요한 데이터를 서버에서 html로 전달받지 않고, 필요한 데이터만 json 형태로 전달 받아 동적으로 렌더링한다.
그러므로 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
- 프론트엔드는 거대 웹 서비스의 등장과 웹 산업이 발전하는 과정에서 자연스레 세분화 된 것이다.
백엔드는 이제 거대 데이터를 처리하기 위한 도구와 자동배포와 스케일링등 으로 분화되고, 프론트엔드 역시 화면을 동적으로 다루는 역할이 중요해지면서 더 필요한 역할을 부여받게 되었다.
특히 React를 기점으로 프론트엔드 개발의 체계가 잡히면서 이러한 체계가 뚜렷해지기 시작했다.
📌 4. 모던 웹 아키텍처의 구성을 이해하고 관련된 개발 직군에 대해
웹서비스가 더 복잡해지고, User Interaction 의 중요성도 증가되었다.
동시 접속자의 수와 데이터의 양이 증가함에 따라 문제가 발생하였고, 점점 더 많은 유저와 데이터를 효율적으로 처리하기 위해 백엔드는 api 수가 늘고 gateway가 생겼다.
Fe, be의 서버가 분리되었고 be api 서버가 세분화 되었다.
위와 같은 개발 직군이 생겨났다.
