# HTML, HTTP API, CSR, SSR
## 정적 리소스
정적 리소스를 제공할 때는 고정된 HTML, CSS, JS, 이미지, 영상 등을 제공한다.
브라우저에서 리소스를 요청하면 서버에서 보내준다.
## HTML 페이지
동적으로 HTML을 생성해서 전달하기도 한다.
애플리케이션 로직을 처리하는 WAS가 DB로 주문 정보를 조회한 후 JSP나 타임리프 같은 것을 통해 동적으로 HTML을 생성한다. 브라우저는 이 HTML을 해석해서 표현한다.
## HTTP API
HTML을 단순히 전달하는 게 아니라 데이터를 전달한다.
주문 정보를 조회해서 json 형식의 데이터를 내려준다. 웹 브라우저는 json을 해석하지 못하기 때문에 json 포맷 그대로 출력한다. 따라서 API 방식은 화면에 뿌려주는 용도가 아니라 다양한 시스템에서 사용할 때 활용된다.
데이터만 주고 받고 UI 화면이 필요하면 클라이언트가 별도로 처리한다. 앱/웹/서버 to 서버에서 사용된다.
요청 하면 그냥 상품에 대한 데이터만 내려준다. 이렇게 데이터만 주고 받는 것을 HTTP API라고 한다.
### 특징
* 주로 json 형태로 데이터 통신한다.
* UI 클라이언트와의 접점이 된다.
* 앱 클라이언트
* 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
* React, Vue 같은 웹 클라이언트
* 서버 to 서버
서버 개발자는 정적 리소스, HTML 페이지, HTTP API 이렇게 세 가지를 어떻게 뿌려줄지 고민하는 사람이다.
## SSR - 서버 사이드 렌더링
* HTML 최종 결과를 서버에서 만들어 웹 브라우저에 전달한다.
* 주로 정적인 화면에 사용한다.
* JSP, 타임리프
요청이 들어오면 서버가 최종적으로 HTML을 렌더링해서 전달한다. HTML 만드는 과정을 서버에서 다 끝내고 클라이언트는 받은 것을 보여주기만 한다.
## CSR - 클라이언트 사이드 렌더링
* 자바 스크립트를 사용해 HTML 결과를 브라우저에서 동적으로 생성해서 사용한다.
* 주로 동적인 화면에 사용한다.
* 웹 환경을 마치 앱처럼 필요한 부분부분만 변경할 수 있다.
* 클릭할 때마다 url이 바뀌거나 하지 않는다.
* 구글 지도, Gmail, 구글 캘린더
* React, Vue
SSR을 사용하더라도 자바 스크립트를 사용해 화면 일부를 동적으로 변경할 수 있다. React, Vue로 CSR + SSR을 동시에 지원하는 웹 프레임워크도 있다.
1. 웹 브라우저에서 서버에 HTML을 요청한다.
* HTML을 서버가 응답하지만 내용은 없다.
* 대신 자바스크립트를 하나 내려준다.
2. 웹 브라우저는 이제 이 자바 스크립트에 요청을 한다.
3. 자바 스크립트에 있는 로직이 HTTP API으로 데이터를 요청하고 서버가 데이터를 반환한다.
4. 해당 데이터를 HTML과 렌더링해 예쁘게 보여준다.
## 백엔드 개발자 입장에서의 UI 기술
### 백엔드
* JSP, 타임리프
* 화면이 정적이고 복잡하지 않을 때 사용한다.
* JSP는 사장됐고 스프링에서 미는 타임리프를 사용하자.
* 백엔드 개발자는 서버 사이드 렌더링 기술 학습이 필수다.
* 어드민같은 것은 간단하게 만들어낼 수 있다.
### 프론트엔드
* React, Vue
* 복잡하고 동적인 UI가 필요할 때 사용한다.
* 웹 프론트엔드 개발자의 전문 분야다.
백엔드 개발자의 프론트 기술 학습은 옵션이다. 백엔드는 서버, DB, 인프라 등 수 많은 기술을 공부해야 한다. 프론트까지 깊이있게 하려면 오랜 시간이 필요하다.