HTML , HTTP API ,CSR ,SSR

정적 리소스

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

HTML 페이지

• 동적으로 필요한 HTML 파일을 생성해서 전달
• 웹브라우저 : HTML 해석
• 예를들어 주문내역을 보여달라고 하면 와스 애플리케이션 로직을 수행할 수 있는 와스가 데이터베이스를 통해서 주문 정보를 조회한 다음에 이것을 동적으로 html을 생성을 한다. 이런걸 View Template라고하는데 jsp나 timeleaf 같은걸 사용해 주문정보 조회한 데이터랑 프로그램 코드를 넣어서 html을 동적으로 생성한 다음에 그 동적으로 생성이 된것을 웹브라우저에 내려준다!!
  그럼 웹 브라우저는 그냥 html만 받아서 그걸 해석한후 우리에게 보여주는것이다.

HTTP API

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

HTTP API 다양한 시스템 연동

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

이렇게 보면 백엔드 개발자가 고민해야할 포인트는 3가지이다!
1. 정적 리소스 어떻게 제공할것인가?
2. 동적으로 제공되는 HTML페이지를 어떻게 제공할것인가?
3. HTTP API를 어떻게 제공할것인가?

웹브라우저에 만약 주문내역 주세요! 하고 서버에 요청하면 서버는 주문DB를 조회해서 HTML을 jsp나 타임리프 같은것으로 동시적으로 다 생성한 다음 최종적으로 HTML을 서버에서 다 만드는것이다 . 그래서 서버사이드에서 랜더링 한다고 이야기를 한다!html을 다 렌더링 해서 웹브라우저의 http응답에 html코드를 다 실어서 응답을 보내면 웹 브라우저는 그걸 받아서 html이 왔구나 하고 html을 그냥 그대로 렌더링해서 보여주는것이다.
즉 html을 다 만드는 과정은 서버에서 다 끝내고 웹브라우저는 단순하게 완전히 다 생성된것을 보여주기만 하는것이다. 이런 동적으로 생성된 최정 결과물 HTML이 서버에서 다 생성된다고 해서 서버사이드 렌더링 이라고 한다!!

웹브라우저에서 서버측에 요청한다. order.html에 요청하는것 까지는 서버사이드 렌더링과 똑같다! 그런데 클라리언트 사이드 렌더링의 경우에는 HTML 을 서버에서 응답을 하지만 HTML안에 내용이 하나도 없다. 텅빈 HTML을 내려주고 대신 그 자바스크립트에 대한 , 애플리케이션을 구동하는 자바스크립트가 있는데 그 자바스크립트를 하나 내려준다.
그 링크를 내려주면 웹브라우저가 그 다음에 자바스크립트를 서버에 요청을 한다.
근데 이 자바스크립트 코드 안에는 클라이언트의 로직도 들어있고 HTML을 어떻게 자바스크립로 렌더링 할지에 대한 로직도 여기 다 들어있다.서버에서 그걸 응답을 한다.
그다음 웹브라우저가 가진 애플리케이션 로직이 있는데 HTTP API를 가지고 서버를 호출한다.그럼 서버에서 주문 정보를 조율해서 서벌에서 딱 그 데이터를 내려주면 된다.
json으로 상품명이랑 가격 상품 데이터를 쭉 내려주면 된다!
즉 동적으로 자바스크립트 코드로 html을 만들어서 그걸 이제 html을 동적으로 해서 html이 보이는것이다. 즉 클라이언트 사이드에서 html을 만들어내는것 이것을 클라이언트 사이드 렌더링이라고 한다!

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

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

어디까지 알아야 하나요!! 백엔드 개발자 입장에서 UI기술

• 백엔드 - 서버 사이드 렌더링 기술

  • JSP , 타임리프
  • 화면이 정적이고, 복잡하지 않을 때 사용
  • 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수!

• 웹 프론트엔드 - 클라이언트 사이드 렌더링 기술

  • React , Vue.js
  • 복잡하고 동적인 UI사용
  • 웹 프론트엔드 개발자의 전문 분야

• 선택과집중

  • 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
  • 백엔드 개발자는 서버 , DB ,인프라 등등 수 많은 백엔드 기술을 공부해야 한다.
  • 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.