1. 웹에서 백엔드 개발자가 고민해야 할 3가지
백엔드 개발자는 다음 세 가지 방식으로 클라이언트에 데이터를 제공하는 방법을 고려해야 한다.
1. 정적 리소스 제공: HTML, CSS, JS, 이미지 등의 파일을 그대로 제공.
2. 동적 HTML 제공: WAS가 애플리케이션 로직을 수행한 후, 동적으로 HTML을 생성하여 반환.
3. HTTP API 제공: JSON 등의 데이터를 반환하여 클라이언트가 직접 렌더링을 수행.
2. 정적 리소스 제공
- 요청이 들어오면 웹 서버(Nginx, Apache)가 미리 저장된 HTML, CSS, JS, 이미지, 영상 등의 정적 파일을 반환.
- 예)
GET /hello.html요청 →hello.html파일 반환.
3. 동적 HTML 제공 (서버 사이드 렌더링, SSR)
- 웹 서버가 아니라 WAS(Web Application Server)가 처리
- DB 조회 후 JSP, Thymeleaf 등의 템플릿 엔진을 사용하여 HTML을 동적으로 생성하여 반환.
- 예)
GET /orders요청 → DB에서 주문 내역 조회 → HTML 생성 → 응답 반환.
4. HTTP API 제공
HTML이 아닌 데이터를 JSON, XML 등의 형식으로 반환하여 클라이언트가 직접 렌더링을 수행하는 방식.
주로 3가지 방식으로 활용됨.
1) 모바일 및 PC 애플리케이션을 위한 API 제공
- 안드로이드, iOS, 데스크탑 애플리케이션 등에서 UI를 자체적으로 구현하므로, 백엔드는 데이터(JSON)만 반환.
- 예)
GET /orders요청 →{ "orderId": 100, "amount": 5000 }응답.
2) 웹 클라이언트 (자바스크립트 기반 동적 UI)에서 사용
- 웹 페이지에서
fetch,Ajax등의 API를 사용하여 데이터를 비동기적으로 요청하고 화면을 동적으로 업데이트. - 예) React, Vue.js 등의 프레임워크에서 JSON 데이터를 받아 화면을 렌더링.
3) 서버 간 통신(Server-to-Server API)
- 백엔드 서비스 간 데이터 교환.
- 예) 주문 서버 → 결제 서버 요청 (
POST /payments), 결제 서버가 결제 결과를 JSON으로 응답.
5. 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)
1) 서버 사이드 렌더링(SSR)
- 서버에서 HTML을 완성하여 응답을 반환.
- WAS에서 DB 조회 → HTML 생성 → 클라이언트에게 최종 HTML 반환.
- 장점:
- 초기 로딩 속도가 빠름.
- 검색 엔진(SEO) 최적화가 용이.
- 단점:
- 전체 페이지를 새로고침해야 하므로 사용자 경험(UX)이 제한적.
사용 기술: JSP, Thymeleaf 등
2) 클라이언트 사이드 렌더링(CSR)
- 서버에서 HTML을 제공하지만, 실제 화면(UI)은 자바스크립트가 동적으로 생성.
- 웹 브라우저에서 React, Vue.js 등의 프레임워크를 사용하여 화면을 조작.
- 동작 방식:
- 브라우저가 빈 HTML과 함께
app.js등의 자바스크립트 파일을 다운로드. - 자바스크립트가 HTTP API를 호출하여 데이터를 가져옴.
- 가져온 데이터로 HTML을 생성하여 화면을 렌더링.
- 브라우저가 빈 HTML과 함께
- 장점:
- 화면 일부만 동적으로 변경 가능하여 UX 개선.
- 앱처럼 부드러운 화면 전환 가능.
- 단점:
- 첫 로딩이 느림 (자바스크립트 다운로드 및 실행 필요).
- 검색 엔진 최적화(SEO)가 어려움.
사용 기술: React, Vue.js
6. 백엔드 개발자가 알아야 할 범위
1) 서버 사이드 렌더링(SSR) 기술 필수 학습
- 백엔드 개발자는 기본적으로 서버 사이드 렌더링 기술(JSP, Thymeleaf)을 학습해야 함.
- 간단한 웹 서비스, 관리자(Admin) 페이지 등을 개발할 때 활용 가능.
- 학습 난이도가 낮고, 몇 일 정도만 학습해도 쉽게 적용 가능.
2) 클라이언트 사이드 렌더링(CSR) 기술은 선택 사항
- React, Vue.js 등은 웹 프론트엔드 개발자의 영역이므로 필수 학습 대상은 아님.
- 다만, 웹 프론트엔드 기술을 이해하면 협업이 용이하고, 복잡한 UI를 다룰 때 유용.
- 풀스택 개발자가 되려면 학습이 필요하지만, 백엔드에 집중하는 것이 더 현실적.
프론트엔드 개발자