[Spring MVC 1편] 1. 웹 애플리케이션 이해 - HTML, HTTP API, CSR, SSR

본 내용은 인프런 사이트에서
김영한 선생님의 "스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술" 강의 내용을 정리한 것입니다.

 

 

🌱 HTML, HTTP API, CSR, SSR

💡 정적 리소스 (Static Resource)

 

정적 리소스 파일을 제공하는 경우, 주로 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 웹 브라우저에 제공한다.

 

💡 HTML 페이지

 

주문 내역 페이지처럼 동적인 HTML 페이지를 요청하는 경우, WAS(애플리케이션 로직을 수행하는 서버)가 DB를 통해 주문 정보를 조회한 후 동적으로 HTML 파일을 생성(주문 정보들 포함)해 웹 브라우저에 제공한다. 웹 브라우저는 받은 HTML을 해석해 클라이언트에게 화면을 띄워준다.

 

💡 HTML API

 

위의 경우처럼 HTML 파일을 생성해 전달하는 것이 아닌, JSON 등의 데이터를 전달하는 경우도 있다.

 

 

• API를 통해 데이터만 주고 받고, UI 화면이 필요한 경우 클라이언트가 별도로 처리한다.
• UI 클라이언트 접점
  • 앱 클라이언트(아이폰, 안드로이드, PC 앱)
  • 웹 브라우저에서 자바 스크립트를 통한 HTTP API 호출
  • React, Vue.js 같은 웹 클라이언트
• 서버 to 서버
  • 주문 서버 → 결제 서버
  • 기업간 데이터 통신

‼️ 백엔드 개발자가 서비스를 제공할 때 고민해야 할 세가지 ‼️
1. 정적 리소스 어떻게 제공할거야?
2. 동적으로 제공되는 HTML 페이지 어떻게 할거야?
3. HTTP API 어떻게 제공할거야?

 

💡 서버 사이드 렌더링(SSR)

 

#SSR: HTML 최종 결과를 서버에서 만들어 웹 브라우저에 전달하는 것

• 주로 정적인 화면에 사용
• 관련 기술: JSP, Thymeleaf → 백엔드 개발자

 

💡 클라이언트 사이드 렌더링(CSR)

 

#CSR: HTTP 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해 적용 하는 것

• 주로 동적인 화면에 사용, 웹 환경을 마치 앱처럼 필요한 부분부분 변경할 수 있음
• ex. 구글 지도, Gmail, 구글 캘린더
• 관련 기술: React, Vue.js → 웹 프론트엔드 개발자