HTML, HTTP API, CSR, SSR
Last updated
Was this helpful?
Last updated
Was this helpful?
정적 리소스를 제공할 때는 고정된 HTML, CSS, JS, 이미지, 영상 등을 제공한다.
브라우저에서 리소스를 요청하면 서버에서 보내준다.
동적으로 HTML을 생성해서 전달하기도 한다.
애플리케이션 로직을 처리하는 WAS가 DB로 주문 정보를 조회한 후 JSP나 타임리프 같은 것을 통해 동적으로 HTML을 생성한다. 브라우저는 이 HTML을 해석해서 표현한다.
HTML을 단순히 전달하는 게 아니라 데이터를 전달한다.
주문 정보를 조회해서 json 형식의 데이터를 내려준다. 웹 브라우저는 json을 해석하지 못하기 때문에 json 포맷 그대로 출력한다. 따라서 API 방식은 화면에 뿌려주는 용도가 아니라 다양한 시스템에서 사용할 때 활용된다.
데이터만 주고 받고 UI 화면이 필요하면 클라이언트가 별도로 처리한다. 앱/웹/서버 to 서버에서 사용된다.
요청 하면 그냥 상품에 대한 데이터만 내려준다. 이렇게 데이터만 주고 받는 것을 HTTP API라고 한다.
주로 json 형태로 데이터 통신한다.
UI 클라이언트와의 접점이 된다.
앱 클라이언트
웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
React, Vue 같은 웹 클라이언트
서버 to 서버
서버 개발자는 정적 리소스, HTML 페이지, HTTP API 이렇게 세 가지를 어떻게 뿌려줄지 고민하는 사람이다.
HTML 최종 결과를 서버에서 만들어 웹 브라우저에 전달한다.
주로 정적인 화면에 사용한다.
JSP, 타임리프
요청이 들어오면 서버가 최종적으로 HTML을 렌더링해서 전달한다. HTML 만드는 과정을 서버에서 다 끝내고 클라이언트는 받은 것을 보여주기만 한다.
자바 스크립트를 사용해 HTML 결과를 브라우저에서 동적으로 생성해서 사용한다.
주로 동적인 화면에 사용한다.
웹 환경을 마치 앱처럼 필요한 부분부분만 변경할 수 있다.
클릭할 때마다 url이 바뀌거나 하지 않는다.
구글 지도, Gmail, 구글 캘린더
React, Vue
SSR을 사용하더라도 자바 스크립트를 사용해 화면 일부를 동적으로 변경할 수 있다. React, Vue로 CSR + SSR을 동시에 지원하는 웹 프레임워크도 있다.
웹 브라우저에서 서버에 HTML을 요청한다.
HTML을 서버가 응답하지만 내용은 없다.
대신 자바스크립트를 하나 내려준다.
웹 브라우저는 이제 이 자바 스크립트에 요청을 한다.
자바 스크립트에 있는 로직이 HTTP API으로 데이터를 요청하고 서버가 데이터를 반환한다.
해당 데이터를 HTML과 렌더링해 예쁘게 보여준다.
JSP, 타임리프
화면이 정적이고 복잡하지 않을 때 사용한다.
JSP는 사장됐고 스프링에서 미는 타임리프를 사용하자.
백엔드 개발자는 서버 사이드 렌더링 기술 학습이 필수다.
어드민같은 것은 간단하게 만들어낼 수 있다.
React, Vue
복잡하고 동적인 UI가 필요할 때 사용한다.
웹 프론트엔드 개발자의 전문 분야다.
백엔드 개발자의 프론트 기술 학습은 옵션이다. 백엔드는 서버, DB, 인프라 등 수 많은 기술을 공부해야 한다. 프론트까지 깊이있게 하려면 오랜 시간이 필요하다.
