[스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술] 2. HTML, HTTP API, CSR, SSR

🌐 웹 개발 핵심 개념 정리: HTML, HTTP API, CSR, SSR

웹 개발에서 리소스를 전달하고 화면을 그리는 방식은 크게 4가지 관점에서 이해할 수 있습니다. 백엔드 개발자 입장에서 필수적인 내용을 중심으로 정리하였습니다.

1. 리소스 제공 방식

📁 정적 리소스 (Static Resources)

• 특징: 서버에 미리 저장된 파일을 그대로 전달합니다.
• 내용: 고정된 HTML, CSS, JS, 이미지, 영상 등.
• 경로: 주로 웹 브라우저가 특정 경로(/hello.html)를 요청하면 웹 서버가 해당 파일을 찾아 응답합니다.

📄 HTML 페이지 (Dynamic HTML)

• 특징: 사용자의 요청에 따라 서버에서 HTML을 동적으로 생성하여 전달합니다.
• 기술: JSP, 타임리프(Thymeleaf) 등.
• 동작: WAS가 DB에서 데이터를 조회한 후, 템플릿 엔진을 통해 HTML을 완성해서 브라우저에 보냅니다.

2. HTTP API

데이터 중심의 통신 방식으로, 화면(UI)이 아닌 데이터 자체를 주고받는 것이 목적입니다.

• 데이터 형식: 주로 JSON 형식을 사용합니다.
• 주요 활용 사례:
  1. 웹 클라이언트: React, Vue.js 같은 프레임워크에서 자바스크립트로 호출.
  2. 앱 클라이언트: 아이폰, 안드로이드, PC 앱 등에서 호출.
  3. 서버 간 통신 (Server to Server): 주문 서버가 결제 서버를 호출하거나 기업 간 데이터 연동 시 사용.

3. SSR vs CSR (렌더링 전략)

화면을 어디에서 완성하느냐에 따라 두 가지로 나뉩니다.

🖥️ SSR (Server Side Rendering)

• 정의: 서버에서 HTML 최종 결과를 모두 만들어 브라우저에 전달하는 방식입니다.
• 장점: 초기 로딩 속도가 빠르고 검색 엔진 최적화(SEO)에 유리합니다.
• 주요 기술: JSP, 타임리프 (백엔드 개발자의 영역).
• 적합한 곳: 정적인 화면, 정보 전달 위주의 페이지.

📱 CSR (Client Side Rendering)

• 정의: 서버는 뼈대(빈 HTML)와 자바스크립트 링크만 주고, 브라우저에서 자바스크립트가 API를 통해 데이터를 받아 화면을 동적으로 그리는 방식입니다.
• 장점: 필요한 부분만 업데이트하여 앱처럼 부드러운 사용자 경험을 제공합니다.
• 주요 기술: React, Vue.js (프론트엔드 개발자의 영역).
• 적합한 곳: 구글 지도, Gmail, 구글 캘린더 같이 복잡하고 동적인 UI.

4. 백엔드 개발자의 학습 방향

백엔드 개발자로서 기술의 우선순위를 정하는 것이 중요합니다.

필수 학습: 백엔드 UI 기술 (SSR)

• JSP, 타임리프 등 서버 사이드 렌더링 기술은 필수입니다.
• 복잡하지 않은 관리자 페이지나 단순 홍보 페이지 등을 직접 만들 때 유용합니다.

선택적 학습: 프론트엔드 기술 (CSR)

• React, Vue.js 등은 프론트엔드 개발자의 전문 영역입니다.
• 백엔드 개발자는 서버 로직, DB 설계, 인프라 구축 등 공부해야 할 양이 방대하므로 프론트엔드 기술은 이해 수준으로 시작하여 필요에 따라 깊이를 더하는 '선택과 집중'이 필요합니다.

핵심 요약

구분 SSR (서버 사이드) CSR (클라이언트 사이드)

렌더링 위치	서버	웹 브라우저
전달 데이터	완성된 HTML	빈 HTML + JS + JSON 데이터
주요 기술	타임리프, JSP	React, Vue.js
사용자 경험	페이지 이동 시 새로고침 발생	부분 업데이트로 부드러움 (App-like)