2024.08.08

React

• MPA와 SPA의 차이를 설명할 수 있습니다.
• 바닐라 JS로 SPA를 만들 때 Hashed Routing이 필요한 이유를 설명할 수 있습니다.
• 공유된 코드를 참조하여 JS로 SPA Routing을 구현할 수 있습니다.

 -  SPA 아키텍처 이해하기

* Architecture : 하나의, 서비스가 어떻게 구성되며 어떻게 동작이 된다 → 서비스의 동작 원리를 나타내는 것

 

 

 

- MPA

Multi Page Application의 약자로써, 2개 이상의 페이지로 구성된 애플리케이션

(출처: TeamSparta)

MPA 동작원리

: 요청 → (새로운  html 파일)생성 → 응답

 

최초 보여줬던 페이지 외외에도 새롭게 서버가 생성한 페이지가 존재

→ 여러 페이지로 이루어진 애플리케이션

 

SSR(Server Side Rendering)

초기 화면 로딩 시 서버에서 완성된 HTML 페이지를 만들어 브라우저에게 전송하는 방식

 

* 클라이언트와 서버 간의 협력으로 이루어지는 프로세스로, 

  웹 애플리케이션에서 클라인언트 측에서만 렌더링되던 부분을

  서버에서도 렌더링하여 완전한 HTML 문서를 클라이언트에게 제공하는 기술입니다.

 

SSR에서의 렌더링은 HTML 문서 자체를 생성하는 과정

→ 브라우저에서의 렌더링

 

(MPA)전통적인 페이지 라이프사이클

MPA vs. SPA (출처: Microsoft MSDN )

 

 

- SPA

Single Page Application의 약자로써, 하나의 페이지로 이루어져있는 애플리케이션

 

(출처: TeamSparta)

MPA 동작원리

: ( API 호출 형태 )요청 → (JSON 형태)응답 → (JS 처리 - DOM 업데이트 -  UI 반영) 렌더링

 

최초의 서버로부터 로드된 하나의 웹 페이지만 유지되며,

브라우저가 필요한 데이터만을 서버로부터 받아와서 동적으로 내용을 변경

 

CSR(Client Side Rendering)

사용자가 보게되는 화면을 재구성하는 주체 → 브라우저

브라우저에서 데이터를 기반으로 렌더링했다

 

SPA 라이프사이클

MPA vs. SPA (출처: Microsoft MSDN )

 

- Routing

웹서비스 내부에서 어느 페이지로 이동할지 안내해 주는 것

→  각 내비게이션의 메뉴를 선택하면 정해진 페이지로 이동한다

 

Hashed Routing

: # 해시 값을 기준으로(=hashed) 페이지를 이동하는(=routing) 기술

(출처: TeamSparta)

origin

: 웹서버가 있는 위치(로컬 컴퓨터로 웹서비스를 제공)

→  영역 요청

 

path, query string

: 어떤 `요청`에 대한 상세한 요구사항

 

Browser Routing

: 웹브라우저에서 제공하는 history API를 활용한 라우터

페이지가 갱신될 때마다 필요한 데이터를 백엔드 api로 요청

 

www.sample-homepage.com/#about

www.sample-homepage.com/about

*사용자 경험을 위해 Browser Routing 방식 채택