웹 애플리케이션 이해 - HTML, HTTP API, CSR, SSR, 자바 백엔드 웹 기술 역사

인프런 김영한님의 스프링 강의다.

20년전 서블릿 시절부터 시작되는 내용으로 스프링까지 오는 과정을 이야기한다.

1섹션 - 웹 애플리케이션 이해를 정리하며, 자세한 설명이 궁금하면 수강을 권장한다.  

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

---

HTML, HTTP API, CSR, SSR

정적 리소스

- 이미 생성되고 고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공

 

HTML 페이지

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

- 웹 브라우저는 HTML 해석.

HTTP API

- HTML과 비슷지만 데이터를 전달한다.

    - 주로 JSON 형식 {"주문번호":100, "금액":5000} 을 사용한다.

- 다양한 시스템에서 호출

- 데이터만 주고 받기 때문에 UI화면에서 필요하면 클라이언트가 별도로 처리해야한다.

 

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

SSR - 서버 사이드 렌더링

- HTML 최종 결과를 서버에서 만들어 브라우저에 전달

    - 주로 정적인 화면에 사용

관련기술) JSP, 타임리프 -> 백엔드 개발자

 

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

- HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용

    - 주로 동적인 화면에 사용, 웹 환경을 앱처럼 부분부분 변경가능

예) 구글지도, Gmail, 구글 캘린더,

관련기술) React, Vue.js -> 웹 프론트엔드 개발자

* 참고

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

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

 

* 어디까지 알아야할까요?

- 백엔드, 서버 사이드 렌더링 기술 (간단해서 2,3일이면 실무가능) 

    - JSP(거의 사장됨), 타임리프(지금 스프링이 미는 중)  

    - 화면이 정적이고, 복잡하지 않을 때 사용

- 웹 프론트엔드, 클라이언트 사이드 렌더링 기술

    - React, Vue.js

    - 복잡하고 동적인 UI 사용

    - 웹 프론트엔드 개발자의 전문 분야

- 선택과 집중

    - 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션

    - 백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술 공부가 필요

    - 웹 프론트엔드도 숙련에 오랜 시간 필요

---

자바 백엔드 웹 기술 역사

과거 기술

- 서블릿, 1997

    - HTML 생성이 어려움

- JSP, 1999

    - HTML 생성은 편리하지만, 비즈니스 로직까지 많은 역할 담당

- 서블릿, JSP 조합 MVC 패턴 사용

    - 모델, 뷰, 컨트롤러로 역할을 나누어 개발

- MVC 프레임워크 춘추 전국 시대, 2000~2010년 초

    - MVC 패턴 자동화, 복잡한 웹 기술을 편리하게 사용할 수 있는 다양한 기능 지원

    예) 스트럿츠, 웹워크, (구)스프링 MVC

 

현재 사용 기술

- 애노테이션 기반의 스프링 MVC 등장 (MVC 프레임워크 춘추 전국 시대 마무리)

    - @Controller

- 스프링 부트의 등장

    - 과거에는 서버에 WAS를 직접 설치하고, 소스는 War파일로 만들어 WAS에 배포

    - 스프링 부트는 서버(톰캣9)를 내장 -> 빌드결과에 WAS 서버포함, 빌드 배포 단순화

 

최신 기술 - 스프링 웹 플럭스(WebFlux)

- 장점

    - 비동기 넌 블러킹 처리

    - 최소 쓰레드로 최대 성능, 쓰레드 컨텍스트 스위칭 비용 효율화

    - 함수형 스타일로 개발, 동시처리 코드 효율화

    - 서블릿 기술 사용안함

 

- 단점

    - 기술적 난이도 높음

    - 아직은 RDB 지원 부족

    - 일반 MVC 쓰레드 모델도 충분히 빠름 (장비가 고성능) 

    - 실무에서 보기 힘듬

 

자바 뷰 템플릿 역사

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

- JSP : 속도 느림, 기능 부족

- 프리마커(Freemarker), 벨로시티(Velocity) : 속도 문제 해결, 다양한 기능

- 타임리프(Thymeleaf)

    - 내추럴 템플릿: HTML의 모양을 유지하면서 뷰 템플릿 적용 가능

    - 스프링 MVC와 강력한 기능 통합

    - 최선의 선택 (성능은 프리마커, 벨로시티가 더 빠름)