HTML, HTTP API, CSR, SSR 기초
백엔드 개발자가 알아야 할 웹 기술의 핵심 😊
이번 포스팅에는 HTML, HTTP API, CSR, SSR 등에 대해 백엔드 개발자들이 주로 어떤 포인트를 개발하고 어디까지 알아야 하는지 말씀드리겠습니다.
정적 리소스 제공하기
여러분, 먼저 정적 리소스를 제공할 때는 보통 고정된 HTML 파일이나 CSS, JavaScript, 이미지, 영상 등을 제공합니다. 예를 들어 /hello.html을 요청하면 웹 서버에서 이미 생성된 파일들을 제공합니다. 주로 웹 브라우저에서 이러한 요청을 하게 되죠.
동적 HTML 페이지 제공하기
다음으로, 동적인 HTML 페이지를 요청할 수 있습니다. 예를 들어 ‘주문 내역을 보여주세요’라고 하면 애플리케이션 로직을 수행할 수 있는 WAS가 데이터베이스를 통해 주문 정보를 조회한 후, 동적으로 HTML을 생성합니다.
이때 주로 View Template이라고 하는 JSP나 Thymeleaf 등을 사용하여 주문 정보를 가지고 프로그램 코드를 넣어 HTML을 생성합니다. 이렇게 동적으로 생성된 HTML을 웹 브라우저에 내려주면, 웹 브라우저는 그 HTML을 해석하여 여러분에게 보여줍니다.
HTTP API 이해하기
또 한 가지 방식으로 HTTP API가 있습니다. 이는 단순히 HTML을 전달하는 것이 아니라 데이터를 전달하는 것입니다.
예를 들어 ‘주문 내역을 보여주세요’라고 요청하면, 아까는 HTML을 웹 브라우저에 전달했지만, 이번에는 주문 정보를 조회하여 JSON 형식의 데이터로 내려주는 것입니다. 예를 들어 주문 번호는 100번이고 금액은 5,000원입니다와 같은 정보를 말이죠.
하지만 웹 브라우저는 HTML을 해석해야 하는데, JSON이 오면 해석할 수 있을까요? 그렇지 않겠죠. 그냥 JSON 데이터를 보여주게 됩니다. 그래서 HTTP API는 웹 브라우저에서 HTML을 렌더링할 때 쓰는 것이 아니라, 다양한 시스템에서 데이터를 주고받을 때 사용됩니다.
HTTP API의 사용 사례
HTTP API는 주로 세 가지 상황에서 사용됩니다.
앱 클라이언트와의 통신: 아이폰이나 안드로이드 앱 개발자들은 UI 화면을 자체적으로 만들기 때문에 데이터만 필요로 합니다. 그래서 서버에 상품에 대한 데이터만 달라고 요청합니다. 그러면 WAS 서버는 주문 DB를 조회해서 JSON 데이터를 내려주면 됩니다.
웹 클라이언트와의 통신: 자바스크립트의 AJAX나 Fetch API를 통해 서버의 API를 호출할 수 있습니다. WAS 서버는 필요한 데이터를 내려주고, 자바스크립트에서 그 데이터를 사용하여 HTML을 동적으로 생성하여 화면에 뿌립니다.
서버 간 통신: 주문 서버와 결제 서버가 통신할 때도 HTML을 주고받을 필요가 없습니다. 데이터만 주고받으면 되기 때문에, HTTP 프로토콜 위에 JSON 데이터를 사용하여 통신합니다.
HTTP API의 정리
HTTP API는 주로 JSON 형태로 데이터 통신을 합니다. 접점은 두 가지가 있습니다.
- UI 클라이언트 접점: 앱 클라이언트(iOS, 안드로이드, PC 앱)와 웹 브라우저의 자바스크립트를 통해 HTTP API를 호출하는 경우입니다.
- 서버 간 통신 접점: 주문 서버와 결제 서버 간의 통신, 기업 간 데이터 통신, 마이크로 서비스 아키텍처에서의 서비스 간 통신 등에 사용됩니다.
서버 사이드 렌더링과 클라이언트 사이드 렌더링
요즘에는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)에 대한 이야기가 많이 나오는데요, 이에 대해 말씀드리겠습니다.
서버 사이드 렌더링(SSR)
서버 사이드 렌더링은 최종 HTML 결과를 서버에서 모두 생성하여 웹 브라우저에 전달하는 방식입니다. 예를 들어, 웹 브라우저에서 ‘주문 내역을 보여주세요’라고 요청하면, 서버는 주문 DB를 조회하여 HTML을 동적으로 모두 생성한 후 응답으로 보냅니다. 웹 브라우저는 그 HTML을 받아서 그대로 렌더링하여 사용자에게 보여줍니다. 이처럼 HTML 화면을 서버 사이드에서 모두 렌더링한다고 하여 서버 사이드 렌더링이라고 합니다.
클라이언트 사이드 렌더링(CSR)
클라이언트 사이드 렌더링은 HTML 결과를 처음부터 바로 얻는 것이 아니라, 자바스크립트를 사용하여 웹 브라우저에서 동적으로 생성하는 방식입니다.
CSR의 동작 방식
- 초기 요청: 웹 브라우저에서 서버에
/orders.html을 요청합니다. - 최소한의 HTML과 자바스크립트 로드: 서버는 내용이 거의 없는 HTML과 함께 애플리케이션을 구동하는 자바스크립트를 내려줍니다.
- 자바스크립트 로드: 웹 브라우저는 그 자바스크립트를 서버에 다시 요청하여 받아옵니다.
- 데이터 요청: 자바스크립트는 HTTP API를 사용하여 서버에 데이터를 요청합니다.
- 화면 렌더링: 서버는 주문 정보를 JSON으로 내려주고, 자바스크립트는 그 데이터를 이용하여 클라이언트 측에서 HTML을 동적으로 생성하여 화면에 표시합니다.
이렇게 클라이언트 측에서 HTML을 생성하기 때문에 클라이언트 사이드 렌더링이라고 합니다.
CSR을 사용하면 웹 환경을 마치 애플리케이션처럼 필요한 부분만 변경할 수 있어 동적인 화면을 구성하는 데 유리합니다. 대표적으로 React나 Vue.js 같은 프레임워크가 있습니다.
백엔드 개발자가 알아야 할 UI 기술 범위
이제 백엔드 개발자 입장에서 UI 기술에 대해 어디까지 알아야 할지 고민이 있을 수 있습니다.
서버 사이드 렌더링 기술 습득 필요성
백엔드 개발자는 서버 사이드 렌더링 기술인 JSP나 Thymeleaf 등을 학습하는 것이 필수적입니다. 화면이 정적이고 복잡하지 않을 때 사용하기 적합하며, 하루 정도면 충분히 학습할 수 있습니다. 간단한 어드민 페이지나 정적인 화면은 백엔드 개발자가 직접 빠르게 구현할 수 있기 때문에 이러한 기술을 알고 있어야 합니다.
클라이언트 사이드 렌더링 기술 학습 옵션
클라이언트 사이드 렌더링 기술인 React나 Vue.js는 웹 프론트엔드 개발자의 전문 분야입니다. 복잡하고 동적인 UI를 구성할 때 사용되며, 깊이 있는 학습과 숙련에 오랜 시간이 필요합니다. 백엔드 개발자가 선택과 집중을 통해 자신의 주 업무에 집중하는 것이 좋습니다.
선택과 집중이 필요합니다. 백엔드 개발자는 백엔드 기술에 깊이 있게 파고들고, 남는 시간에 웹 프론트엔드 기술을 학습하는 것이 좋습니다.
마무리
다음 시간에는 Java 백엔드 웹 기술의 역사에 대해 설명드리겠습니다. 감사합니다! 😊