HTML, HTTP API, CSR, SSR

정적 리소스

정적 리소스를 제공할 때에는 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공하면 된다.

동적으로 필요한 HTML 파일을 생성해 전달한다.

웹 브라우저는 주어진 HTML을 해석하는 역할을 맡는다.

HTML이 아니라 데이터를 전달한다.

주로 JSON 형식을 사용한다.

웹 브라우저는 JSON을 그대로 보여주는데?

HTTP API는 다양한 시스템에서 호출한다.
데이터만 주고 받는 것이고 UI 화면이 필요하면 클라이언트가 별도 처리.
앱, 웹 클라이언트, 서버 to 서버
- 웹 클라이언트로 전달하면 자바스크립트의 AJAX 등이 JSON 데이터를 이용해 HTML을 동적으로 만들어 뿌린다거나 할 수 있다.

주로 JSON 형태로 데이터 통신
UI 클라이언트 접점
- 앱 클라이언트(아이폰, 안드로이드, PC 앱)
- 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
- React, Vue.js 같은 웹 클라이언트
서버 to 서버
- 주문 서버 -> 결제 서버
- 기업 간 데이터 통신

백엔드 개발자는 정적 데이터를 어떻게 제공할 것인지, 동적으로 제공되는 HTML 페이지 어떻게 제공할 것인지, HTTP API를 어떻게 제공할 것인지 3가지를 고민하면 된다.

서버는 주문 DB를 조회해 HTML을 JSP나 Thymeleaf 등을 통해 동적으로 생성한다.

최종적으로 서버에서 최종 HTML 만들어 클라이언트에 전달하는 것이다. 이를 서버 사이드 렌더링이라고 한다.

서버에 요청을 한다. 하지만 이 때 HTML안에는 내용이 없다. 대신 자바스크립트 링크를 준다.

이 후 자바스크립트 요청을 하게 되고 서버가 응답을 한다.

HTTP API를 통해 필요한 데이터를 요청하고 응답받아 그 데이터를 가지고 자바스크립트를 통해 HTML 결과를 렌더링 하는 것이다.