갓영한님 스프링 MVC 강의를 듣고 정리한 내용들입니다.
백엔드 개발자가 서비스를 제공할 때 고려해야 하는 3가지
1. 정적 리소스 (고정된 HTML 파일, CSS, JS, image, media 등) 어떻게 제공할 지?
2. 동적으로 제공되는 html를 어떻게 제공 할지( WAS 거쳐서 템플릿 엔진을(jsp, thymeleaf) 통해)
3. HTTP API를 어떻게 제공할건지?
HTTP API
• HTML이 아니라 데이터를 전달
• 주로 JSON 형식 사용
• 다양한 시스템에서 호출 (앱,웹 / 서버 to 서버)
-
UI 클라이언트 접점
앱 클라이언트(아이폰, 안드로이드, PC 앱)
웹 브라우저에서 자바스크립트를 통한 HTTP API 호출
React, Vue.js 같은 웹 클라이언트 -
서버 to 서버
주문 서버 -> 결제 서버
기업간 데이터 통신
SSR
- 서버 쪽에서 동적으로 HTML까지 다 만들고 웹 브라우저에 전달하면 그대로 렌더링해서 보여주는 방식
- 주로 정적인 화면에 사용
- 결과물(HTML)이 서버 사이드에서 완성되기 때문에 Server Side Rendering 이라고 한다.
- 관련기술: JSP, Thymeleaf (jsp는 잘 안쓰고 스프링에선 Thymeleaf을 미는중) -> 백엔드 개발자
CSR
• HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용
• 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음
• ex)예 Google Map, Gmail
• 관련기술: React, Vue.js -> 웹 프론트엔드 개발자
• 자세한 설명 : 강의
참고
• React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음
• SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능
백엔드 개발자 입장에서 UI 기술 어디까지 알아야 하나요? (ㅠㅠ감사합니다..)
-
백엔드 - SSR 기술
• 화면이 정적이고, 복잡하지 않을 때 사용함.
• 백엔드 개발자는 서버 사이드 렌더링 기술은 필수 ( Admin Page 같이 동적인 화면이 별로 필요 없을 경우, 현업에서도 그냥 백엔드 개발자가 SSR로 뚝딱 만든다. ) -
웹 프론트엔드 - 클라이언트 사이드 렌더링 기술
• React, Vue.js
• 복잡하고 동적인 UI 사용
• 웹 프론트엔드 개발자의 전문 분야 -
선택과 집중!!!!!
• 백엔드 개발자의 웹 프론트엔드 기술 학습은 옵션
• 백엔드 개발자는 서버, DB, 인프라 등등 수 많은 백엔드 기술을 공부해야 함. (겁나 많음)
• 웹 프론트엔드도 깊이있게 잘 하려면 숙련에 오랜 시간이 필요
