HTML, HTTP API, CSR, SSR

jihan kong·2022년 7월 5일

CSR HTTP API SSR html

Spring MVC

목록 보기

4/12

본 시리즈는 인프런 학습 사이트의 김영한 강사님의 java spring mvc - 백엔드 웹 개발 핵심 기술 편을 학습한 내용을 바탕으로 정리하였습니다.

멀티스레드까지 해서 웹 애플리케이션의 전반적인 이해를 마쳤다. 추가적으로 HTML과 HTTP API, CSR, SSR에 대해서 학습하자. 각 항목에 대한 간략한 특징들을 다음과 같이 정리해보았다.

정적 리소스

고정된 HTML 파일, CSS, JS, 이미지, 영상 등을 제공
주로 웹 브라우저

HTML 페이지

동적으로 필요한 HTML 파일을 생성해서 전달
웹 브라우저는 단순히 HTML을 해석

HTTP API

HTML이 아니라 데이터를 전달
주로 JSON 형식을 사용
다양한 시스템에서 호출이 가능함
데이터만 주고 받음. UI 화면이 필요하면 클라이언트가 별도로 처리
앱, 웹 클라이언트, 서버 to 서버 등이 해당

여기서 등장하는 HTTP API는 그야말로 HTTP를 활용한 인터페이스이기 때문에 다양한 플랫폼과 결합이 가능하다.

💡 HTTP API는 다양한 시스템과 연동할 수 있다.

HTTP API는 주로 JSON 형태로 데이터 통신이 이루어지며 UI 클라이언트 와 서버 to 서버 에서 접점을 형성할 수 있다.

client에서의 통신

대표적으로 두 가지 통신이 가능한데 첫 번째로는 앱 클라이언트 사이드. 즉, 아이폰이나 안드로이드, PC 앱 등에서 HTTP API가 사용된다. 두 번째는 웹 브라우저이다. 웹 브라우저에서 자바 스크립트를 통해 HTTP API를 호출하는 방식으로 사용된다.

요즘 프론트에서 핫하게 사용되고 있는 React, Vue.js 와 같은 자바스크립트 기반의 라이브러리 혹은 프레임워크가 HTTP API 웹 클라이언트라고 볼 수 있다.

서버 to 서버 통신

클라이언트와 서버가 통신하는 경우도 있지만 서버와 서버가 통신하는 경우도 있다. 우리가 흔히 사용하는 배달 앱을 예로 들어보자. 수 많은 고객들의 수 많은 주문 건들이 있을 것이다.

방대한 양의 '주문 데이터' 를 처리하기 위해 '주문' 서버는 DB에서 '주문 데이터' 를 조회하여 '결제' 서버로 넘겨야 하는데 그 때 사용하는 것이 HTTP API이다. 또한, 기업 서버들 간의 데이터 통신을 하는 경우도 비슷하다.

서버사이드 렌더링, 클라이언트 사이드 렌더링

(사진 출처 : 디자이너 마리님의 블로그 https://mariedays.tistory.com/160)

~~(웹에서의 렌더링은 이런 3D 그래픽을 말하는게 아니니 오해하지 마시길!~~)

렌더링(rendering) 은 본래 3차원 컴퓨터 그래픽에서 사용되는 영상 처리 기법을 설명할 때 주로 언급되는 용어이다. 이것을 웹 쪽으로 가져온다면 html로 입력 받은 것을 표준 출력 장치 (모니터 등)로 출력해주는 개발 절차를 말한다. 즉, 쉽게 말해 사용자(client)가 웹 사이트를 방문할 때, 보기 쉽게 바꿔주는 것을 의미한다. 이 렌더링은 서버냐 클라이언트냐에 따라 두 가지로 나누어서 진행할 수 있다.