[스프링 MVC - 백엔드 웹 개발 기술] 03. HTML, HTTP API, CSR, SSR, 자바 백엔드 기술 웹 역사

이번 시간에는 Client(Browser)와 Server 간의 통신 방법의 종류에 대해 알아볼 것이다.
대표적인 케이스는 아래와 같다.

1. 정적 리소스
2. 동적 페이지(JSP, Thymleaf)
3. HTTP API 요청

위 키워드를 잠시 보고 다음 글을 읽어주시면 감사하겠습니다.

01. 데이터를 주고받는 방식

01-1. 정적 리소스 반환

• 정적 리소스 제공시에는 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공
• 주로 웹 브라우저에서 Web Server(Apache, Nginx)에 요청을 한다
• Web Server(Apache, Nginx)는 특정 경로에 있는 리소스를 반환
• Web Server는 DB 작업이나, 애플리케이션 로직 수행 요청이 아닌 경우 직접 처리 후 반환

01-2. 동적 HTML 페이지(템플릿 엔진) 반환

• Web Server(Apache, Nginx) 만으로는 동적 리소스 처리가 불가능하다
• 그렇기에 WAS가 DB에 정보를 조회 후 동적으로 HTML을 생성하여 반환 한다
• 웹 브라우저(Chrome) 같은 경우에는 해당 HTML 파일을 그냥 읽어서 처리하면 끝이다

01-3. HTTP API 데이터 반환

HTTP API는 다양한 시스템에서 연동이 된다

• 주로 JSON이나 XML와 같은 형식을 사용하여 데이터를 주고 받는다
• 다양한 시스템에서 호출이 가능함
  • 앱 클라이언트(아이폰, 안드로이드, PC 앱)
    • 예) 앱 단말 → Web Server → WAS 서버 요청
  • 웹 브라우저에서 JS를 통한 HTTP API 호출
    • React, View.js 같은 웹 클라이언트
      • 예) 주문 시스템 → 결제 시스템 요청
• 웹 브라우저(Chrome) 에서는 해당 데이터를 그대로 보여준다
  • 실제 Browser를 통해 보면 JSON 형태의 데이터가 그대로 출력 된다

01-4. 서버 사이드 랜더링, 클라이언트 사이드 랜더링

SSR - 서버 사이드 랜더링

• 웹 브라우저에서 서버에 요청(/orders.html)을 수행
• 서버(WEB → WAS)에서는 주문 정보를 DB에서 조회 후 HTML을 동적으로 생성
• 웹 브라우저는 완전히 만들어진 해당 HTML을 랜더링 수행

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

• HTML 결과를 JS를 사용해 웹 브라우저에서 동적으로 생성해 적용
• 주로 동적 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경 가능
  • 예) 구글 지도, Gmail, 구글 캘린더
  • 관련 기술: React, Vue.js → 웹 프론트앤드 개발자

1. 웹 브라우저가 서버측에 요청(/orders.html)을 수행
2. 서버에 요청 후 해당 HTML 페이지는 텅텅 비어있다, 하지만 JS 링크만 내려준다
3. 후에 웹 브라우저에서는 서버에 JavaScript를 요청
   1. 해당 JavaScript 로직 안에는 클라이언트 로직, HTML 랜더링 코드가 존재한다
4. 웹 브라우저는 HTTP API를 통해 서버에 요청을 보낸다
5. 마지막으로 웹 브라우저가 랜더링을 수행 한다

어디까지 알아야 할까?

솔직히 풀스택도 좋지만 프론트, 백엔드 자기가 가고자 하는 방향성에 맞춰서
깊은 학습을 하는 것이 좋다고 필자는 생각한다.

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

---

02. 자바 백엔드 웹 기술의 역사?

02-1. 과거 기술

• 서블릿 - 1997
  • TCP/IP, HTTP 본문 메시지 파싱 등의 기능을 대신 제공, 개발자는 → 비즈 로직만 담당
  • 단점) 자바 코드를 사용해야 하기에 동적 HTML 생성이 어려움
• JSP - 1999
  • 자바 코드 작성이 가능
  • HTML 생성 편리함
  • 단점) 비즈니스 로직까지 너무 많은 역할 담당
• 서블릿, JSP 조합 MVC 패턴 사용
  • 웹 애플리케이션을 구축하기 위한 디자인패턴 중 하나로 클라이언트의 요청을 받아 해당 요청을 처리하는데 최적화된 설계 중 하나로, Model(데이터를 처리하는 컴포넌트), View(사용자 인터페이스 컴포넌트), 컨트롤러(View, Model 중계인 요청 흐름 제어)로 구성이 되어있는 패턴
  • 모델, 뷰, 컨트롤러 분리하여 개발
• MVC 프레임워크 춘추 전국 시대 - 2000년 초 ~ 2010년 초
  • MVC 패턴 자동화, 복잡한 웹 기술을 편리하게 사용할 수 있는 다양한 기능 지원
  • 스트럿츠, 웹워크, 스프링 MVC(과거 버전)

02-2. 현재 사용 기술

• 애노테이션 기반의 스프링 MVC 등장
  • @Controller
  • MVC 프레임워크 춘추 시대 마무리
• 스프링 부트의 등장
  • 스프링 부트는 내장 서버 내장
  • 과거에는 서버에 WAS(Tomcat) 직접 설치, 소스는 War 파일 만들어서 설치 후 WAS에 배포
  • 스프링 부트는 빌드 결과(Jar)에 WAS 서버 포함 → 빌드 배포 단순화

02-3. 최신 기술 - 스프링 웹 기술의 분화

• Web Servlet Stack → Spring MVC
  • 특징
    • 기본적으로 우리가 사용하는 스택
    • 서블릿 기반 컨테이너 서비스
    • 멀티 스레드(Multi Thread) 기능 제공
• Web Reactive Stack → Spring WebFlux
  • 특징
    • 비동기 Non-Blocking 처리
    • 최소 쓰레드(Thread)로 최대 성능 - 쓰레드 컨텍스트 스위칭 비용 효율화
    • 함수형 스타일로 개발 - 동시처리 코드 효율화
    • 서블릿 기술 사용 - X
  • 하지만
    • 웹 플럭스(Web Flux) 기술 러닝 커브 매우 높음
    • 아직 RDB 지원 부족
    • 일반 MVC의 쓰레드 모델(Thread Model)도 충분히 빠름
    • 실무에서 아직 많이 사용 안됨 (전체 1% 이하임)

02-4. 자바 뷰 템플릿 역사

HTML을 편리하게 생성하는 뷰 기능

• JSP
  • 속도 느림, 기능 부족
• 프리마커(FreeMarker), 벨로시티(Velocity)
  • 속도 문제 해결, 다양한 기능
  • 발전이 더딤
• 타임리프(Thymleaf)
  • 내추럴 템플릿: HTML 모양 유지, 뷰 템플릿 적용 가능
  • 스프링 MVC와 강력한 기능 통합
  • 최선의 선택, 단 성능은 프리마커, 벨로시티가 더 빠름