[5주차] 웹과 웹 프레임워크

2월 18일 자 학습 내용 정리입니다.

 

 

✅ 웹

웹(Web)이란 사전적 의미로는 World Wide Web을 의미한다.
즉, 인터넷 상에서 동작하는 모든 서비스를 웹이라고 한다.
일반적인 의미로는 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트를 주로 의미한다.

 

✔️ 웹 서비스의 동작 방식

웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어진다.
HTTP 요청은 사용자가 어떤 데이터가 필요한지 서버에 알리는 역할이며 HTTP 응답은 HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할이다.

 

 

웹 서비스 동작 방식은 다음의 순서로 이루어진다.

1. 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달한다.
2. 서버는 사용자의 HTTP 응답을 브라우저로 전송한다.
3. 브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 노출한다.

 

✔️ 백엔드와 프론트엔드

웹 서비스 개발에서 백엔드와 프론트엔드라는 단어가 쓰인다.
프론트엔드는 사용자가 직접 사용하게 되는 웹 페이지를 주로 담당한다. (client)
백엔드는 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당한다. (server)

 

 

✅ 정적 웹과 동적 웹

정적 웹(Web 1.0)은 사용자와 상호작용을 하지 않아 단방향 통신만이 이루어진다.
Link를 통한 페이지 이동 정도만 가능하며 일반적으로 변하지 않는 html 파일로 제공된다.

 

동적 웹(Web 2.0)은 사용자와 상호작용을 하는 양방향 통신이 이루어진다.
사용자가 다양한 기능을 수행할 수 있으며 프론트엔드와 백엔드가 유기적으로 통신하며 동작한다.

동적 웹 구현 방법은 CSR과 SSR의 두 가지가 존재한다.

 

✔️ CSR

CSR(Client-Side Rendering)은 사용자가 페이지에서 보는 동적인 부분을 프론트엔드에서 대부분 처리하는 방식이다.

 

출처 : https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc

 

사이트가 변하는 부분들을 프론트엔드에서 처리하기 때문에 프론트엔드 코드에 페이지 리소스들이 미리 정의되어 있다.
서버와의 통신은 API 통신을 이용하며 빠른 반응을 보이지만 페이지의 내용은 API 호출이 완료된 후에 보여진다.
프로젝트 구성이 복잡한 편이며 개발 사이즈가 크다는 단점이 존재한다.

 

✔️ SSR

SSR(Server-Side Rendering)은 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식이다.

 

출처 : https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc

 

사이트가 변하는 부분들을 백엔드에서 HTML 파일을 전달해서 프론트엔드에 전달하는 식으로 처리한다.
CSR에 비해 쉬운 구성을 가지고 있고 개발 사이즈가 작은 편이다.
로딩이 완료되면 페이지와 데이터가 한 번에 표시된다.
상대적으로 사용자가 보기에는 로딩이 느려 보일 수 있으며 페이지가 이동할 때마다 다시 로딩하는 과정을 거치기 때문에 페이지 깜빡임이 존재한다는 단점이 있다.

 

 

✅ 웹 프레임워크

웹 프레임워크란 웹 서비스에 필요한 기능들을 제공해 주는 다양한 도구들의 모음이다.
웹 서비스를 구성하기 위해서는 매우 많은 기능이 필요하며 이러한 기능을 하나씩 만드는 데에는 큰 비용이 발생한다.
웹 서비스는 많은 부분이 정형화되어 있기 때문에 프레임워크를 사용하여 정형화된 부분을 간단하게 구현하면 필요한 부분만 집중해서 개발할 수 있다.

 

웹 프레임워크가 제공하는 기능은 다음과 같다.

• HTTP 요청 처리
• HTTP 응답 처리
• 라우팅
• HTML Templating

 

✔️ HTTP 요청/응답 처리

웹 프레임워크는 HTTP 요청과 응답을 처리할 수 있다.

HTTP 요청을 처리하며 어떤 데이터를 필요로 하는지, 어떤 사용자로부터 요청이 수신되었는지 알 수 있다.

HTTP 응답을 처리하며 응답 데이터의 형식과 응답 상태 등을 알 수 있다.

 

✔️ 라우팅

웹 프레임워크는 라우팅을 통해  HTTP 요청을 분기 처리하는 방법을 제공한다.
HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정할 수 있다.

 

✔️ HTML Templating

웹 프레임워크는 HTML Templating으로 SSR을 구현하기 위한 방법을 제공한다.
SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해 HTML Template을 통해 미리 페이지의 뼈대를 작성할 수 있다.

 

 

🔍 참조

CSR vs SSR https://medium.com/@adamzerner/client-side-rendering-vs-server-side-rendering-a32d2cf3bfcc