스프링 MVC 1 - HTML, HTTP API, CSR, SSR

HTML, HTTP API, CSR, SSR

정적 리소스

• 고정된 HTML 파일, CSS, JS, 이미지 영상 등을 제공
• 주로 웹 브라우저

 

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달
• 웹 브라우저: HTML 해석

 

HTTP API

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

HTTP API

• 다양한 시스템에서 호출
• 데이터만 주고 받음, UI 화면이 필요하면, 클라이언트가 별도 처리
• 앱 클라이언트 to 서버, 웹 클라이언트 to 서버, 서버 to 서버

 

HTTP API 다양한 시스템 연동

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

 

백엔드 개발자가 서비스를 제공할 때 고민해야 하는 포인트 3가지

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

이 3가지를 백엔드 개발자는 다 고민을 해야한다.

 

• SSR - 서버 사이드 렌더링
  • HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
  • 주로 정적인 화면에 사용
  • 관련기술: JSP, 타입리프 → 백엔드 개발자
• CSR - 클라이언트 사이드 렌더링
  • HTML 결과를 자바 스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
  • 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음
  • 예) 구글 지도, Gmail, 구글 캘린더
  • 관련기술: React, Vue.js → 웹 프론트엔드 개발자
• 참고
  • React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
  • SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능

 

SSR - 서버 사이드 렌더링
(서버에서 최종 HTML을 생성해서 클라이언트에 전달)

SSR 예를 살펴보자.

웹브라우저에서 주문내역을 달라고 서버에 요청을 하면,
서버는 주문 DB를 조회해서 JSP나 Thymeleaf같은 것을 이용해서 HTML을 동적으로 생성한다음,
최종적으로 HTML을 서버에서 다 만드는 것이다.
그래서 서버 사이드에서 랜더링 한다고 해서  SSR이라고 한다.
서버에서 최종 HTML을 생성해서 클라이언트에 전달 하는 것이다.

 

CSR - 클라이언트 사이드 렌더링
(HTML 결과를 자바 스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용)

CSR 예시를 살펴보자.

주문 내역과 관련된 앱이라고 가정하자.
먼저 웹브라우저에서 서버에 /orders.html (주문내역)을 요청하는것 까지는 SSR이든 CSR이든 똑같다.

그런데, CSR의 경우에는 HTML을 서버에서 응답을 할텐데, HTML안에 내용이 하나도 없다.
텅텅 빈 HTML을 내려주고, 대신에 자바스크립트 링크를 하나 내려준다.

그러면 웹브라우저는 서버에 자바스크립트를 요청한다.
서버가 자바스크립트를  응답하는데 이 자바스크립트 코드 안에는 클라이언트의 로직도 들어있고, HTML을 어떻게 자바스크립트로 랜더링 할지에 대한 로직도 다 들어있다.

그러면, 웹브라우저가 이번에는 HTTP API를 가지고 서버를 호출한다.
그러면 서버에서 주문 정보를 조회해서 JSON데이터를 내려준다.

그러면 웹브라우저가 이전에 응답받은 자바스크립트코드에 클라이언트 로직과 HTML렌더링 코드가 있었는데,
이것을 HTTP API를 호출해서 응답받은 JSON데이터와 HTML렌더링 코드를 예쁘게 섞어서 웹브라우저에서 동적으로 HTML을 만든다.

이렇게 클라이언트 사이드에서 HTML을 만들어 내는 것을 CSR(클라이언트 사이드 렌더링)이라고 한다.

 

백엔드 개발자 입장에서 UI 기술

• 백엔드 - 서버 사이드 렌더링 기술
  • JSP, 타입리프
  • 화면이 정적이고, 복잡하지 않을 때 사용
  • 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수
• 웹 프론트엔드 - 클라이언트 사이드 렌더링 기술
  • React, Vue.js
  • 복잡하고 동적인 UI 사용
  • 웹 프론트엔드 개발자의 전문 분야
• 선택과 집중
  • 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
  • 백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야 한다.
  • 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.