🪴 Spring MVC
🟦 백엔드 개발자가 서비스 제공할 때 고려해야 할 세가지
-
정적 리소스 어떻게 제공할지
-
동적으로 제공되는 HTML 페이지 어떻게 제공할지
-
HTTP API 어떻게 제공할지
🔷 정적 리소스 제공
HTML 파일, CSS, JS, 이미지, 영상 등 제공
(웹서버에서 폴더에 있는 이미 생성된 파일들 제공)
🔷 동적인 HTML 페이지 제공
WAS가 DB를 통해 정보 조회한 후 동적으로 HTML을 생성하여 제공
🔷 HTTP API 제공
WAS가 DB를 통해 정보 조회한 후 데이터 전달(주로 JSON 형태)
데이터만 주고 받음, UI 화면은 클라이언트가 별도 처리
앱, 웹 클라이언트, 서버to서버(HTML을 보여주는 전송을 제외한 모든 곳)
🟦 SSR - 서버 사이드 렌더링
서버에서 최종 HTML을 생성해서 클라이언트에 전달
- 웹 브라우저가 서버에 HTML 요청
- 서버는 DB를 조회해서 동적으로 HTML 생성
- 최종적으로 HTML을 서버에서 만듦
- HTTP 응답에 HTML 코드를 실어 웹브라우저에 전송
관련 기술 : JSP, Thymeleaf -> 백엔드 개발자
🟦 CSR - 클라이언트 사이드 렌더링
HTML 결과를 자바스크립트를 사용하여 웹 브라우저에서 동적으로 생성해 적용
- 웹 브라우저가 서버에 HTML 요청
- 서버는 내부에 내용이 없는 HTML을 응답, 자바스크립트 링크를 제공
- 웹 브라우저는 서버에 자바스크립트 요청
- 서버는 클라이언트 로직, HTML 렌더링 코드를 포함하는 자바스크립트 코드를 응답
- 웹 브라우저는 서버에 HTTP API를 가지고 서버에 호출(웹브라우저는 애플리케이션 로직 있음)
- 서버는 웹브라우저에 데이터 응답
- 웹 브라우저는 자바스크립트로 HTML 결과 렌더링
주로 동적인 화면에 적용 -> 웹 환경을 필요한 부분부분 변경 가능
관련 기술 : React, Vue.js -> 웹 프론트엔드 개발자
- 백엔드 개발자 입장에서의 UI 기술
✅ 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수 (Thymeleaf)
백엔드 개발자의 웹 프론트엔드 기술 학습 -> 옵션
백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야...
웹 프론트엔드를 깊이있게 잘 하려면 오랜 시간필요...인프런 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 (김영한) 참조
DDeo99