-
SPA(Single Page Application) 란 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. 전통적인 웹 방식은 요청 시 마다 새로고침이 일어나면서 서버로 부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이였다.
-
클라이언트 사이드 렌더링은 사용자의 요청에 의해 변경되야 하는 부분만 다시 렌더링 하여 화면을 보여 주는 반면, 서버 사이드 렌더링은 화면 전체를 새로 다시 렌더링 해야 한다. 클라이언트 사이드 렌더링이 더 빠른 인터렉션을 기대할 수 있다.
❓ 장고 템플릿을 이용하는건 서버 사이드 렌더링. 서버 사이드 렌더링을 한다고 해도 Ajax 기능을 위해 클라이언트 렌더링 요소가 포함될 수 밖에 없나 ?
- HTML을 서버에서만 렌더링하던 시절에는 HTML과 자바스크립트를 분리해놓아도 문제가 없었고, 자바스크립트는 글자를 반짝이게 하는 수준의 단순한 기능만 구현했다. 반면에 요즘의 SPA 는 복잡한 사용자 입력을 처리하고 브라우저에서 렌더링을 수행한다.
- SPA 아키텍쳐는 서버보다 클라이언트, 즉 브라우저에 로직이 더 많은 fat client 이다.
- SPA 는 HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결
- SPA 는 브라우저에서 렌더링 되므로 데이터도 브라우저에서 처리한다. 데이터를 이용해 html 을 추가하거나 기존에 렌더링한 html 변경
- React는 데이터를 전달해서 html을 렌더링 하는 목적
클라이언트 사이드 렌더링, 서버 사이드 렌더링
사용자가 https://exampleurl.com/ 으로 검색창에 엔터 하는 순간 서버는 사용자가 요청한 화면을 전달해 주어야 한다. 이때 화면을 렌더링 하는 위치, 유저의 요청에 따른 데이터 변화로 해당 데이터가 변화된 화면을 만들어 주는 위치가 어디인지에 따라 서버 사이드 렌더링, 클라이언트 사이드 렌더링으로 나뉜다.
서버 단에서 변화된 데이터로 화면을 미리 만들어서 완성본을 전달해 줄 것인가 (서버 사이드 렌더링) 아니면 변화된 UI를 유저의 브라우저에서 만들게 할 것인가 (클라이언트 사이드 렌더링) 이렇게 두가지로 나눌 수 있다.
React 는 V 라구..?
-
Angular는 별도의 템플릿 코드 분리 없이 뷰와 데이터를 연동 시킨다. 기본 HTML 자체가 템플릿 파일이 된다. (흠 근데 Angular를 잘 몰라서 그런지 정확히 어떤식으로 돌아가는지 이해는 잘 못하겠다)
-
Angular 처럼 MVC 를 표방하는 것이 아니라 React는 V에 집중하여 훨씬 가벼워졌다.
-
React를 만든 이유는 다음 문제를 해결하기 위해서 고민하다가 만들어졌다고 한다. [출처 : 리액트 교과서]
여러 가지 데이터를 가져와서 입력 자동완성을 구현 하는 일 ! 자동완성에 필요한 데이터는 백엔드에서 비동기적으로 가져왔다. 개발을 진행하면서 새로운 행을 추가할 지점을 정해 DOM 요소를 재사용하는 것이 점점 복잡해 졌다. 결국 DOM 요소를 매번 새롭게 생성하기로 했다.
React와 서버 사이드 렌더링
-
일반적으로 JS 라이브러리/ 프레임 워크를 사용하면 서버는 빈 html 만 제공하고 클라이언트에서 부터 페이지를 그리는 것이 일반적이다.(클라이언트 사이드 렌더링) 그러나 JS 라이브러리/ 프레임워크에서 서버 사이드 렌더링이란 개념은 서버에서 JS 라이브러리/ 프레임워크를 이용하여 미리 페이지를 그려서 클라이언트에 보내고, 클라이언트 단에서 바뀔 부분이나 클라이언트에서만 존재하는 기능(event) 에 관한 작업을 하게 된다.
: 출처 React에서 SSR을 알아보자
서버단에서 Application을 만들때 MVC 디자인 패턴을 이용한다라는 말을 들었었는데 클라이언트에서 또 MVC 패턴을 적용한다고...? 무슨 말이지...클라이언트에서 Model을 ..?
참고한 문서들
