HTML, HTTP API, CSR, SSR

정적 리소스

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

ex) 

/hello.html 달라고 요청이 온다. => web Server에서는 이미 생성된 /폴더/web/hello.html같은 이미 생성된 파일을 제공을 한다.  주로 웹브라우저들에서 요청을함. 

 

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달 
• 웹 브라우저 : HTML 해석 

예를  들어서)

주문내역을 보여주세요라고 하면 애플리케이션 로직을 수행할 수 있는 WAS가 데이터베이스를 통해서 주문 정보를 조회한 다음에 이거를 동적으로 HTML 생성해야된다. 이런 것을 ViewTemplate이라고 한다.

주문 정보를 조회한 데이터랑 프로그램 코드를 넣어서 HTML을 동적으로 생성을 한 다음에 동적으로 생성이 된 것을 웹브라우저로 내려준다. 그러면 동적으로 생성이 된 곳에는 주문 내역에 대한 정보가 동적으로 다 들어가 있다. 웹브라우저는 

HTML만 받아서 이것을 해석해서 우리에게 보여줌. 

 

HTTP API

• HTML이 아니라 데이터를 전달
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출 

HTTP API는 웹브라우저에서 HTML을 렌더링 할 때 사용하지 않는다. 

 

• 다양한 시스템에서 호출 
• 데이터만 주고 받음, UI화면이 필요하면, 클라이언트가 별도 처리
• 앱, 웹 클라이언트, 서버 to 서버 

ex1) 앱개발자랑 일을 한다.

아이폰 , 안드로이드 앱개발자와 일을 하는데 UI화면에 대한건 UI컴포넌트가 있기 때문에 자체적으로 만든다. 

그래서 나한테 상품에 대한 데이터만 달라고 한다. 화면은 앱 컴포넌트로 그려준다.

여기서 was서버는 주문 DB 조회해서 그냥 데이터만 내려주면 된다. 

이렇게 HTTP 위에 데이터를 올려서 주는 것을 HTTP API라고 한다.

보통 요즘은 JSON방식으로 내려준다. 

 

ex2)자바스크립트의 Ajax, fetch이런 API들을 통해서 서버에 있는 API를 받을 수 있다.

자바 스크립트에서 필요한 것들을 동적으로 만들어서 뿌릴 수 있음 이것을 웹 클라이언트라고 한다. 

 

ex3) 서버 to 서버 

예를 들어서 위에 그림과 같이 주문 서버와 결제서버를 통신해야한다. 굳이 HTML을 서로 주고 받을 필요가 없다.

데이터만 주고받으면 된다.  

이때도 HTTP 프로토콜 위에 JSON데이터로 서로 데이터를 주고 받는다.  결제에 대한 정보를 주세요라고 하면 결제에 대한정보를 JSON으로 받는다. 

이런식으로 HTTP API는 사실 HTML을  주는 곳을 제외 모든 곳에서 데이터를 주고받고 실제 프로세스를 호출하고 이럴 때 다사용이 된다. 

 

HTTP API 다양한 시스템 연동 

• 주로 JSON형태로 데이터 통신
• UI 클라이언트 접점
  • 앱 클라이언트(아이폰, 안드로이드, PC 앱)
  • 웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
  • React, Vue.js 같은 웹 클라이언트 
• 서버 to 서버 
  • 주문 서버 -> 결제 서버
  • 기업간 데이터 통신

백엔드 개발자가 서비스 제공할 때, 위에 있는 세가지 종료 정적 페이지, 동적으로 제공되는 페이지, HTTP API를 어떻게 제공할지 3가지를 다 고민해야된다. 

HTTP를 통해서 데이터를 주고 받을 때 이 3가지를 고민하자. 

 

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

• SSR - 서버 사이드 렌더링
  • HTML 최종 결과를 서버에서 만들어서 웹 브라우저에 전달
  • 주로 정적인 화면에 사용
  • 관련기술 : JSP , 타임리프 -> 백엔드 개발자
• CSR - 클라이언트 사이드  렌더링 
  • HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
  • 주로 동적인 화면에 사용, 웹 환경을 마치 앱처럼 필요한 부분부분 변경할 수 있음
  • 예) 구글 지도, Gmail, 구글 캘린더
  • 관련기술: React, Vue.js -> 웹 프론트엔드 개발자 
• 참고 
  • React, Vue.js 를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
  • SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능

SSR - 서버 사이드 렌더링 

서버에서 최종 HTML을  생성해서 클라이언트에 전달 

웹 브라우저에서 주문 내역을 주세요라고 요청을 한다. 그러면 서버는 주문 DB를 조회해가지고 HTML을 동적으로 다 생성을 한다음에 JSP, 타임리프 같은 걸 가지고 생성을 한다음에 최종적으로 HTML 서버에서 다 만드는 것이다. 

그래서, 서버사이드에서 렌더링한다고 한다. 이 HTML 화면을 다 렌더링해서 웹브라우저 화면에 HTML을 코드를 다 실어서 응답을 보내면 웹브라우저는 이를 다받아서 응답이 왔네 하고 HTML을  그대로 렌더링해서 우리에게 보여준다. 

결국 HTML을 다 만드는 과정은 서버에서 다 끝내고 웹 브라우저는 단순하게 완전하게 생성된 것을 보여주기만 한다.

이거를 동적으로 생성된 최종 결과물이 서버에서 다 생성이 된다해서  이것을 서버사이드렌더링이라 한다. 

 

클라이언트 사이드 렌더링 

 

예전에는 백엔드에서 HTML을 만드는 과정을 다 백엔드해서 했는데 이것을 웹브라우저에서 동적으로 만드는 것을 하는 것이 바로 클라이언트 사이드 렌더링이다. 그 다음에 자바 스크립트에서 InnerHTML해서 웹브라우저 자바스크립트에서 넣을 수 있는데 이를 동적으로 HTML 건들여서 웹브라우저에서 부분 바뀌게 만드는 것이다. 이거를 이제 클라이언트 쪽에서 HTML을 만든다고 해서 클라이언트 사이드 렌더링이라고 한다. 웹 환경을 부분부분 변경할 수 있게 됨. 

첫 번째, 웹 브라우저에서 먼저 서버쪽에서 /orders.html을 요청하는 것까지는 똑같다.

클라이언트 사이드 렌더링이든, 서버사이드 렌더링이든 똑같다. 

클라이언트  사이드 렌더링인경우 /orders.html을 서버에서 응답을 한다. 근데  이 html안에 내용은 하나도 없다.텅 빈html을 내려준다. 대신에 애플리케이션을 구동하는 자바스크립트에 대한 것에 링크를 하나 내려준다. 

 

두 번째, 웹브라우저가 이 자바스크립트를 서버에 요청을 한다. 이 자바스크립트 코드안에는 클라이언트의 로직도 들어있고 HTML을 자바스크립트로 렌더링할지에 대한 로직도 다들어있다. 서버에서 이를 응답을 한다.  

그다음에 애플리케이션 로직이 있다.

 

세 번째, 웹브라우저가 HTTP API를 가지고 서버에 호출을 한다.  그러면 서버에서 주문 정보를 조회해서 위에있는 데이터를 내려준다.  JSON으로 상품 데이터를 내려주면된다. 그러면 웹브라우저에 클라이언트랑 HTML 렌더링 코드가 들어있는데 이 클라이언트로직에서 데이터를 API로 다 조회를 했기 때문에 이거를  가지고 HTML 렌더링 코드에 섞어 가지고 이쁘게 웹브라우저에서 HTML을 동적으로 만들어서 클라이언트에서 보여주는 것이다.

 

위에 순서로 클라이언트 사이드 렌더링을 통해서 HTML을 만들어준다. 

 

  SSR, CSR 의  각각의 장점이 있다. 

백엔드 개발자 입장에서 UI기술을 어디까지  알아야하는지 대충 알려주신다고 하셨다.. 하지만 너무 여기에 갇히지말자. 

 

서버 사이드 렌더링은 대충 해보면 잘할 수 있음. 백엔드개발자는 서버사이드렌더링은 꼭 해봐야 한다. 

간단한 것이라면 백엔드 개발자가 타임리프를 통해서 HTML을 내려주는게 편함. 

 

• 프론트로 UI하나 제대로 꽂히는거 굉장히 사실 어렵다. 
• 백엔드  개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야함. 
• 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.