글 작성자: 망고좋아
반응형

🎯 웹 서비스 동작 방식, 정적 웹과 동적 웹

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

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

 

📝 HTTP 요청 예시

GET / HTTP/1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0)
Accept: text/html
Accept-Language: ko-KR
Accept-Encoding: gzip, deflate
Connection: keep-alive
  • HTTP 요청은 사용자가 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다.

 

📝 HTTP 응답 예시

🛠 전송된 데이터

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Date: Mon, 25 Oct 2021 14:10:35 GMT
Connection: keep-alive
Keep-Alive: timeout=5

 

🛠 사용자가 요청한 데이터

<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
  • HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있음

 

📝 프론트엔드와 백엔드

  • 프론트엔드는 사용자가 직접 사용하게 되는 웹 페이지를 주로 담당 = 클라이언트
  • 백엔드는 사용자에게 보이지 않는 데이터 가공 등의 기능을 주로 담당 = 서버

 

📝 정적 웹

  • Web 1.0
  • 사용자와 상호작용하지 않는 페이지 - 단방향 통신
  • Link를 통한 페이지 이동 정도만 가능
  • 일반적으로 변하지 않는 html 파일로 제공

 

📝 동적 웹

  • Web 2.0
  • 사용자와 상호작용을 함 - 양방향 통신
  • 사용자가 다양한 기능을 수행할 수 있음
  • 프론트엔드와 백엔드가 유기적으로 통신하며 동작
  • 현대적인 웹은 대부분 동적 웹

 

📝 동적 웹의 두 가지 구현 방법

📕 CSR

  • Client-Side Rendering
  • 프론트엔드에서 사용자가 페이지에서 보는 동적인 부분을 대부분 처리하는 방식
  • 프론트엔드 코드에 페이지 리소스들이 미리 정의되어 있음
  • 서버와의 통신은 API 통신을 이용
  • 빠른 반응이지만 페이지의 내용은 API 호출이 완료된 후에 보여짐
  • 복잡한 프로젝트 구성, 큰 개발 사이즈로 이루어진다.

 

📕 SSR

  • Server-Side Rendering
  • 백엔드에서 페이지 대부분의 영역을 처리해서 프론트엔드로 전달하는 방식
  • 사이트가 변하는 부분들을 백엔드에서 처리
  • 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
  • CSR에 비해 쉬운 구성, 작은 개발 사이즈
  • 로딩이 완료되면 페이지와 데이터가 한 번에 표시됨
  • 상대적으로 사용자가 보기엔 로딩이 느려 보임
  • 페이지 이동할 때마다 다시 로딩하기 때문에 페이지 깜빡임

 

🏷 요약

  • 웹 서비스는 HTTP 요청과 응답으로 동작한다.
  • 클라이언트는 서버로 HTTP 요청을, 서버는 클라이언트로 HTTP 응답을 보낸다
  • 프론트엔드는 클라이언트를 담당, 백엔드는 서버를 담당한다.
  • 동적 웹을 클라이언트에서 주로 담당하는 것을 CSR이라고 하며, 서버에서 주로 담당하는 것을 SSR이라고 한다.
반응형

'프로그래밍 > Node.js' 카테고리의 다른 글

[Node.js] Node.js Middleware란?  (0) 2021.12.04
[Node.js] Express.js 동작 방식  (0) 2021.12.02
[Node.js] Node.js 모듈의 작성과 사용  (0) 2021.12.02
[Node.js] Node.js 모듈  (0) 2021.12.02
[Node.js] npm과 npx는 무엇인가?  (0) 2021.12.02

티스토리툴바