HTML, HTTP API, CSR, SSR | 김영한MVC1편

정적 리소스는 이전에 다루어 보았다.

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

웹 서버에 기존에 생성되어 있는 파일로 제공

 

HTML 페이지

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

웹 브라우저: HTML 해석

주로 뷰 템플릿 (타임리프, JSP)으로 동적으로 HTML을 생성한다.

 

HTTP API

• HTML이 아니라 데이터를 전달
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출
  • 데이터만 주고 받음, UI화면이 필요하면, 앞단에서 별도 처리한다.
  • 앱 간, 웹 클라이언트 간, 서버 TO 서버
• 최근에는 자바스크립트의 AJAX, FETCH API등을 통해서 서버에 있는 API를 호출한다.
  • WAS 서버가 이 응답을 데이터(JSON)으로 전달하면, 클라이언트는 이 데이터를 포함하여 HTML을 구성하여 유저에게 보여준다.
  • 서버 간 통신은 HTML이 필요가 없다. 데이터만 주고 받으면 되기 때문에 HTTP API방식으로 사용하여 데이터만을 주고 받는다.

 

다양한 시스템 연동이 가능하다

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

백엔드 개발자가 고민해야할 세 가지

1. 정적 리소스 어떻게 제공해야할까?

2. 동적으로 제공되는 HTML 페이지 어떻게 제공할까?

3. HTTP API 어떻게 제공해야 할까?

 

 

서버사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)

 

SSR

서버에서 최종 HTML을 생성(타임리프나 JSP 사용)해서 클라이언트에 전달하는 것.

클라이언트는 단순하게 서버에서 받은 완성된 HTML을 유저에게 보여주기만 하면 된다.

• 주로 정적인 화면에 사용

CSR (최근 사용 동향)

• HTML 결과(데이터, JSON)를 자바스크립트로 전달받고,  사용해 클라이언트에서 HTML을 동적으로 생성해서 적용
• 주로 동적인 화면에 사용, 웹 환경을 앱 처럼 필요한 부분부분 변경 간으
• 구글 지도, GMAIL, 구글 캘린더 등
• 관련 기술 : React, Vue.js 

참고

React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있따.

SSR을 사용하더라도, 자바스크립트를 사용해 화면 일부를 동적으로 변경 가능하다.

 

 

 

1. HTML 요청

웹 브라우저가 HTML 요청을 하면, 서버는 HTML 응답을 하는데, 내용은 빈 껍데기이다. 자바스크립트 링크를 준다.

 

2. 자바스크립트 요청

웹 브라우저는 받은 자바스크립트링크를 가지고 서버에 요청한다.

자바스크립트링크에 대한 서버의 응답 안에는 자바스크립트 코드로 클라이언트의 로직, HTML을 어떻게 렌더링 할 지에 대한 코드가 들어있다.

 

3. HTTP API - 데이터 요청

웹 브라우저의 어플리케이션 로직에 의해 HTTP API로 데이터를 요청 하면 서버는 JSON 포멧으로 응답한다.

 

그래서, 백엔드 개발자는 UI를 어디까지 알아야 하는가..

 

SSR

• JSP, 타임리프
• 화면이 정적이고, 심플한 화면
• 백엔드 개발자의 필수 역량

CSR 

• React, Vue.js
• 복잡하고 동적인 UI 사용
• 웹 프론트엔드 개발자의 전문 분야 (백엔드 개발자는 옵션사항이지만,, 현실적으로 볼 때, 어느정도 익혀두는 것이 좋다.)

 

백엔드 개발자는 서버, DB, 인프라 등 수 많은 백엔드 기술을 공부해야 한다.

프론트엔드 또한 깊이있게 하려면 오랜 시간이 필요하기 때문에 적절히 시간을 분배해야 한다.