HTML, HTTP API, CSR, SSR의 정리

# 인프런 김영한의 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술을 개인적으로 정리한 글입니다.

 

 

정리

---

 

Q. 정적 리소스가 뭐야?

 클라이언트 요청 시 요청에 대한 리소스가 이미 생성되어 있는 상태

 고정된 HTML 파일 ,CSS, JS , 이미지, 영상 등을 정적 리소스라고 한다.

 

 

Q. HTML 페이지가 뭐야?

WAS에서 동적으로 필요한 HTML 파일을 생성해서 전달

대표적인 예로 JSP, 타임리프

 

 

Q. HTML API가 뭐야? // 가장 중요

WAS에서 HTML형식이 아니라 JSON, XML같은 형식으로 데이터를 담아서 전달

 

Q. HTML API의 특징이 뭐야?

데이터만 담아서전달해주기 때문에,UI화면이 필요하다면 클라이언트가 별도로 만들어서 처리해야한다. 

 

 

Q. SSR이 뭐야? = 서버 사이드 렌더링

HTML결과를 서버에서 직접만들어서 웹 브라우저에 전달한다.

http 페이지의 기술과 유사

 

Q. CSR이 뭐야?= 클라이언트 사이드 렌더링

HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용

대표적인 예로 React, Vue.js

 

-CSR의 과정

1. 웹 브라우저가 서버에게 HTML을 요청한다.

   서버가 웹 브라우저에게 HTML을 주는데 내용이 없는 자바스크립트 링크를 준다.

 

2. 웹 브라우저가 서버에게 자바스크립트를 요청한다.

  서버가 웹브라우저에게 자바스크립트 클라이언트 로직과 HTML 렌더링 코드를 준다.

 

3. 웹 브라우저가 서버에게 HTTP API를 통해 데이터를 요청한다.

  서버가 웹 브라우저에게 JSON으로 된 API를 준다.

 

4. 웹 브라우저가 자바스크립트로 HTML 결과를 렌더링한다.