본문 바로가기
Spring Tutorial

[스프링 MVC 4] 웹 애플리케이션 이해: HTML, HTTP API, CSR, SSR

by 미소5 2023. 7. 22.

1. 정적 리소스

  • 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공
  • 주로 웹 브라우저
    • (주로) 웹 브라우저가 hello.html을 요청하면 이미 생성된 파일을 제공

 

 

 

2. HTML 페이지

  • 동적으로 필요한 HTML 파일을 생성해서 전달
  • 웹 브라우저: HTML 해석
    • 주문내역 페이지를 요청하면, WAS가 애플리케이션로직을 수행하여 DB를 통해 주문정보를 조회한다. 주문정보 조회한 데이터를 로직에 넣어 동적으로 HTML을 생성하여(뷰 템플릿이라고함)  웹브라우저에 전달한다.

 

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

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

  • 1. 자바스크립트 링크만 받은 웹브라우저가 자바스크립트를 요청한다. 2. 서버는 클라이언트 로직, HTML 렌더링 코드 로직이 있는 자바스크립트 코드를 응답해준다. 3. 클라이언트 로직으로, 웹브라우저가 HTTP API를 통해, 서버에서 주문정보를 조회하여, JSON 데이터(상품명, 가격)를 내려준다. 4. 이를 HTML코드에 넣어서 웹브라우저가 자바스크립트 코드로 HTML 결과를 만들어 보여준다.

 

 

  • 참고
    • React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
    • SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능

 

3. HTTP API

  • HTML이 아니라 데이터(주로 JSON 형식)를 전달한다.  
    • 주문내역 페이지를 요청하면, WAS가 애플리케이션로직을 수행하여 DB를 통해 주문정보를 조회한다. JSON형식의 데이터를 웹브라우저에 전달한다.
    • 웹브라우저는 JSON을 해석하지 못하므로, 그냥 HTTP프로토콜에 JSON 데이터만 주고받는 것이다. 이를 HTTP API라고 한다. →따라서 HTTP API는 다양한 시스템에서 호출할때 사용한다.  
  • 다양한 시스템에서 호출
    • HTTP API는 3가지 상황에서 사용된다. 앱 클라이언트 to 서버, 웹 클라이언트 to 서버, 서버 to 서버
    • 데이터만 주고 받는다! UI 화면이 필요하면, 클라이언트가 별도 처리
  • 다양한 시스템 연동
    • 주로 JSON 형태로 데이터 통신
    • UI 클라이언트 접점
      • 앱 클라이언트(아이폰, 안드로이드, PC 앱)
      • 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
        • HTML을 렌더링하기위해 웹브라우저에 전달되는게 아닌, WAS서버가 데이터를 주면 웹브라우저에서 자바스크립트를 통해서 서버에 있는 api를 호출할 수 있다. (자바스크립트에서 필요한 데이터를 가지고 HTML을 동적으로 만들어 전달할 수 있다.) 이를 웹클라이언트라고 한다. 
      • 서버 to 서버
        • 주문 서버 → 결제 서버
        • 기업간 데이터 통신

HTTP API가 사용되는 3가지 상황

 

 

  • React, Vue.js 와 같은 웹 클라이언트 기술을 사용하면
    • 백엔드 개발자는 HTML 뷰 템플릿을 직접 만지는 대신에, HTTP API를 통해 웹 클라이언트가 필요로 하는 데이터와 기능만 제공하면 된다. (웹 프론트엔드 개발자가 HTML을 동적으로 만드는 역할과 웹 화면의 흐름을 담당)
  • 백엔드 개발자 입장에서 UI 기술을 어디까지 알아야 할까?
    • 백엔드 - 서버 사이드 렌더링 기술
      • JSP, 타임리프
      • 화면이 정적이고, 복잡하지 않을 때 사용
      • 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수
    •  웹 프론트엔드 - 클라이언트 사이드 렌더링 기술
      • React, Vue.js
      • 복잡하고 동적인 UI 사용
      • 웹 프론트엔드 개발자의 전문 분야

 

  • 선택과 집중!
    • 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
    • 백엔드 개발자는 서버, DB, 인프라 등등 수많은 백엔드 기술을 공부해야 한다.
    • 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.

 

728x90
반응형

'Spring Tutorial' 카테고리의 다른 글

[스프링 MVC 5] 웹 애플리케이션 이해: 자바 백엔드 웹 기술의 역사  (0) 2023.07.24
[스프링MVC 16] 회원 관리 웹 애플리케이션  (0) 2023.07.24
[스프링 MVC 15] 서블릿: HTTP 응답 데이터  (0) 2023.07.22
[스프링 MVC 14] 서블릿: HttpServletResponse  (0) 2023.07.21
[스프링 MVC 13] 서블릿: HTTP 요청 데이터 - API 메시지 바디  (0) 2023.07.20

관련글

티스토리툴바