웹 동작 원리 Advanced 두 번째 세션. 프로젝트를 하면서 프론트엔드에 데이터를 보내고, http 통신을 했다. 하지만 내가 엔드포인트 뒤에 숫자 혹은 querystring을 바꿀 때마다 어떻게 다른 데이터를 읽어와서 화면에 띄우는 지에 대해서는 전혀 몰랐던 것 같다 🤔

세션과 추가 검색을 통해 요 과정에 대해 더 자세히 알아보도록 하자 ❗️

🌈체크 포인트

✔️SPA가 무엇인지 설명할 수 있다.
✔️SPA가 어떻게 동작하는지 설명할 수 있다.
✔️CSR, SSR의 차이점을 설명할 수 있다.
✔️CSR, SSR의 차이점에서 오는 각각의 장점을 이해한다.
✔️웹에서 React.js와 Django가 무슨 역할을 하는지 정확히 이해한다.

<참고 사이트>
아몽 소프트웨어 : CSR, SSR, SPA, MPA? “요즘” 웹프로그래밍을 한다면 알아야하는 것
MDN : Introduction to the DOM
keycdn.com : Difference Between Static and Dynamic Websites

1. static & dynamic

- static website

정적인 웹 사이트. 화면에 보이는 모든 내용이 html 파일에 작성되어 있어, 서버에 저장된 대로 브라우저에 보이는 사이트이다. 회사 소개 페이지, 포트폴리오 페이지 등 언제 보든 똑같은 내용을 보여줄 때 보통 static website를 만든다.

Pros

• Less complex to develop 개발이 덜 복잡하다
• Usually faster loading times and smaller page size 보통 로딩 시간이 빠르고 페이지 사이즈가 작다
• All assets can be cached for even faster page speed 모든 asset은 페이지 스피드를 위해 저장된다

Cons

• Non-interactive 인터랙티브하지 않다
• Updates must be made directly within the HTML code 업데이트는 html 코드에 바로 반영되어야 한다
• Cannot perform the complex functionality required in many modern site 현대 사이트에 필요로 되는 복잡한 기능을 구현할 수 없다

- dynamic website

서버로부터 처음에만 페이지를 받아오고, 이후에는동적으로 페이지를 구성해(DOM을 구성해) html 파일이 만들어지는 형태다. 만약 무엇을 판매하는 사이트라면, 상품에 따라 다른 데이터를 백엔드 버서에서 가져와 html을 조작해, 상품 상세 페이지가 동적으로 만들어지게 된다.

airbnb 사이트를 예를 들어 보면, 업데이트 되지 않는 이상 사이트의 레이아웃은 그대로이지만 어제 추천해준 숙소와 오늘 추천해주는 숙소가 다르다. 숙소 이름, 장소, 숙소의 이미지 url 등이 다이나믹하게 변하면서 html 파일이 만들어지는 것이다.

Pros

• Dynamic content generation based on user 유저로부터 오는 동적 콘텐츠를 생산할 수 있다
• Easily update content when used with a CMS 저작물관리시스템(CMS)를 사용해 쉽게 컨텐츠를 업데이트할 수 있다
• Able to use it in more complex scenarios such as an online store, forum, social media platform, etc 온라인스토어, 포럼, 소셜미디어와 같은 복잡한 시나리오에 사용될 수 있다

Cons

• May be slower than a static site due to the increase in required resources 필요로 되는 자원이 많아지기 때문에 정적 사이트에 비해 느리다
• More complex to develop 개발하는게 더 복잡하다
• Greater risk of security issues 보안 이슈에 리스크가 있다(?)

2. CSR, SSR ?

Client Side Rendering, Server Side Rendering의 차이는 무엇일까? 결과를 우선 말해보자면 랜더링을 어디서 하느냐의 차이일 뿐, 비교 대상은 아니다.

- Client side rendering

CSR은 데이터가 없는 html 및 이미지 등 정적인 파일만 받아오고 그 이후 데이터를 요청해서 받아오는 방식이다. 만약 내 사이트의 링크 미리보기에 특정 컨텐츠가 나오게 하고 싶다면, 해당 부분은 CSR이 아닌 SSR을 적용해야 한다. (언제든 나오게 해야 하기 때문에!)

- Server side rendering

반면 SSR은 데이터까지 전부 삽입해 완성된 html을 받아온다. SSR의 장점은 CSR보다 SEO에 용이하다는 점이다. SEO(Search Engine Optimization), 즉 검색 최적화는 퍼블리싱한 웹사이트를 검색엔진이 잘 읽도록 최적화하는 기술인데, 페이지에 관련 데이터가 표시됨으로써 컴퓨터가 사이트를 더 잘 이해하도록 만든다.

---

만약 페이지가 여러개라면 SPA은 SSR만으로는 만들어질 수 없고, MPA도 마찬가지로 CSR으로만은 구현이 불가하다. SPA에서 처음 로드하는 페이지만 SSR을 하고 그 이후는 CSR을 하는 식이라면 SPA로도 만들 수 있다. 이 경우에는 SPA에서 SSR이 가능하다고 말할 수 있다.

3. SPA vs MPA

Dynamic website를 SSR이라고 말하는 사람들도 있고, SPA를 CSR이라고 말하는 사람도 있다. 하지만 SPA도 SSR이 될 수 있다.

- Single pasge application

SPA는 다른 페이지임에도 하나의 html, css, js 파일을 가진다. html 파일에서 불러온 js파일 안에는 메인 페이지일 때, 다른 페이지일 때를 변수로 정의해 각 부분에 대한 함수를 만들게 된다. 페이지가 한번 로딩되면 데이터를 수정하거나 다른 데이터를 조회하더라도 페이지가 새로고침되지 않는다.

- Multi page application

MPA는 다른 페이지가 서로 다른 html, css, js 파일을 가지고 있다. 서버로부터 완전한 페이지를 받아오기 때문에 이후 데이터가 수정되거나 다른 데이터를 조회한다면, 다른 페이지로 이동한다.

그 외의 용어

- hydration

client-side framework가 서버에서 전송한 정적 문서(html)를 데이터 변경에 반응할 수 있는 동적 형태로 변환(=DOM으로 수정)하는 client 측의 process를 말한다.

Hydration refers to the client-side process during which javascript framwork takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.

- isomorphic javascript

해당 단어는 강의 설명이 짧아 위키피디아를 번역했다. 다른 말로는 Universal Javascript라 불리며, 클라이언트와 서버에서 모두 돌아가는 javascript application을 말한다.

SPA의 문맥에서 작동한다. 전형적인 SPA에서 라우팅과 같은 대부분의 application logic은 클라이언트로 보내지는 자바스크립트 파일 묶음에 응축된다. isomorphic javascript는 많은 요청들을 처리할 필요가 없기 때문에 서버를 자유롭게 만들고, 전체 application이 클라이언트로 보내져야 하기 때문에 클라이언트의 첫 로드가 느려지게 한다.

클라이언트 웹페이지가 서버로부터 처음 요청을 받았을 때, 페이지의 뷰는 server-side dynamic web pages와 유사하게 서버를 기반으로 만들어지고 클라이언트로 보내진다. 그 다음 클라이언트는 페이지 뷰를 즉시 render하고, 첫 번째 뷰가 render된 뒤에 완성된 SPA가 백그라운드에서 다운로드 된다. 그 뒤의 액션들은 Client-side에서 핸들링하는 구조다.

Isomorphic JavaScript, also known as Universal JavaScript, describes JavaScript applications which run both on the client and the server.

Isomorphic JavaScript works in the context of a single-page application(SPA). In a typical SPA, most of the application logic, including routing, is encapsulated in a bundled JavaScript file that is sent to the client. Whilst this frees up the server, as it does not have to handle so many requests, it also makes the initial load slow for the client, as the entire application needs to be sent over to the client.

With Isomorphic JavaScript, when a client web page is first requested from the server, the view of the page is generated on the server, similar to server-side dynamic web pages, and sent over to the client. The client can then render the view immediately. After the initial view is rendered, the complete SPA is downloaded in the background, and subsequent actions are handled client-side.

- DOM

javascript 기본을 배울 때 잠깐 지나갔던 개념인 것 같은데 python을 배우면서 잊고...😂 또 중요한 것 같아서 검색해보았다. MDN이 너무 이해하기 어렵게 번역되어 있어서 영문을 보고 나름대로 의역해보았다.

The Document Object Model, DOM은 웹 문서의 구조와 컨텐츠를 구성하고 있는 객체들의 데이터 표현(Data representatio)이다. DOM은 html, xml 문서(documents)의 프로그래밍 interface인데, DOM이 데이터를 나타냄으로써 프로그램이 문서의 구조, 스타일, 컨텐츠를 바꿀 수 있게 된다.

DOM이 html, xml 문서를 nodes와 objects로 표현하기에 프로그래밍 언어들이 페이지와 연결될 수 있다. DOM은 웹페이지의 객체 지향적 표현이며, 이러한 특징이 자바스크립트와 같은 scripting languate로 변경될 수 있게 한다.

예를 들어, 표준 DOM 에서는 문서 안에서 모든

elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다:

var paragraphs = document.getElementsByTagName("P");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔다.

페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

API (web or XML page) = DOM + JS (scripting language)

- Semantic web(시멘틱 웹)

자꾸 나도 모르게 세멘틱...이라고 읽게 제목에 발음까지 넣었다^^; 단순히 테이블 요소, 혹은 div 요소가 아니라 요소의 이름에 기능을 넣어줌으로써 html 요소들이 의미를 가지게 된 것이다. 웹이 너무 방대해지면서 컴퓨터가 사이트에 대해 이해하기 위해 생겨났다.

<!--Formatic html-->
<div id="header"> 내용 </div>
  
<!--Semantic html-->
<header> 내용 </header>