[WEB] HTML, HTTP API, CSR, SSR

HTML, HTTP API, CSR, SSR

각각에 대해서 서버와 어떻게 동작하는지 알아본다.

 

 

정적리소스

고정된 HTML, CSS, JS, 이미지, 영상을 제공한다.

 

 

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해 전달한다.
• 웹브라우저는 단순히 HTML 을 보여주면된다.

 

 

 

HTTP API

• HTML이 아니라 데이터를 전달 한다.
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출

 

주로 3가지 상황에서 사용된다.

• 앱 개발자에게 데이터를 보내줄때.
• 웹 클라이언트에서 서버 API 를 요청할경우 
• 서버 to 서버 데이터를 보낼때

 

 

 

SSR 서버사이드 렌더링

서버에서 HTML을 생성하는 것을 말한다.

• 웹브라우저에서 요청이 오면
• 서버에서 HTML 을 생성하다(서버사이드 렌더링)
• 응답에 HTML 을 실어서 보낸다.
• 웹브라우저는 그냥 보여주기만 하면된다.
• 관련기술:
   - JSP(거의 안쓴다), 타임리프

 

 

 

CSR 클라이언트 사이드 렌더링

• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
• 주로 동적인 화면에 사용한다.
• 웹환경을 앱 처럼 필요한 부분부분 변경 할 수 있다.
• 관련기술:
   - React, Vue.js

동작과정

• 1. 웹브라우저는 먼저 주문내역을 요청한다.
• 2. 서버에서 비어있는 HTML 을 내려준다.
  - 대신 자바스크립트 링크을 내려준다. 
• 3. 웹브라우저에서 자바스스크립트를 요청한다.
   - 자바스크립안에는 클라이언트 로직, HTML 렌더링 코드도 들어 있다.
• 3. HTTP API 를 서버에 요청한다.
• 4. 서버는 json 으로 데이터를 내려둔다.
• 브라우저에서 HTML 렌더링 코드와 함께 JSON 을 가공해서 HTML을 만든다.

 

백엔드 개발자가 고민해야될 3가지 포인트

• 정적리소스 어떻게 제공할 것인가.
• 동적으로 HTML 페이지 어떻게 제공할 것인가
• HTTP API 어떻게 제공할 것인가