눈이 녹으면 Spring - MVC 1월 2일 1회차 모각코

오늘 할 일

1. 스프링 강의를 듣고 개념익히기
2. HTML, HTTP API, CSR, SSR에 대해 알아보기
3. Aimers 강의 듣기

스프링 강의를 듣고, 개념을 익히는 것에 오늘은 중점을 둬서 아래와 같은 내용을 공부했다.

HTML, HTTP API, CSR, SSR

정적 리소스

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

HTML 페이지

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

HTTP API

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

• 데이터만 주고 받음, UI 화면이 필요하면, 클라이언트가 별도 처리
• 앱, 웹 클라이언트, 서버 to 서버

다양한 시스템 연동

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

백엔드 개발자가 고민해야할 것. 정적리소스 어떻게 제공할지, 동적으로 제공되는 HTML 페이지 어떻게 제공할지, HTTP API 어떻게 제공할지 고민해야한다.

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

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

SSR - 서버 사이드 렌더링

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

서버에서 생성한 HTML을 그대로 브라우저에서는 보여주기만 한다.

CSR - 클라이언트 사이드 렌더링

어디까지 알아야 하나요?

백엔드 개발자 입장에서 UI 기술

• 백엔드 - 서버 사이드 렌더링 기술
  • JSP, 타임리프
  • 화면이 정적이고, 복잡하지 않을 때 사용
  • 백엔드 개발자는 서버 사이드 렌더링 기술 학습 필수
• 웹 프론트엔드 - 클라이언트 사이드 렌더링 기술
  • React, Vue.js
  • 복잡하고 동적인 UI 사용
  • 웹 프론트엔드 개발자의 전문 분야
• 선택과 집중
  • 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
  • 백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야 한다.
  • 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요하다.

•