250x250
Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

y.developer

[TIL] Day 19 MPA vs SPA 본문

카테고리 없음

[TIL] Day 19 MPA vs SPA

y.developer 2023. 10. 31. 22:35
728x90

2023.10.31 화

 

영화 검색 사이트 제작을 마치고 팀이 재편성되었다.

그리고 본격적인 React 공부가 시작되었다.

 

Today

  • Chapter 3-1 주특기 입문 (React)
  • 자바스크립트 SPA 특강
  • 리액트 입문 강의

 

 

학습내용

자바스크립트 SPA 특강

 

  • MPA vs SPA
  • CSR vs SSR
  • 랜딩
  • hash
  • 모듈번들러

 

 

MPA vs SPA

MPA(Multi-Page App) & SSR(Server Side Rendering)

2개 이상의 페이지(html)로 구성된 애플리케이션

 

 

 

SPA(Single-Page App) & CSR(Client Side Rendering)

1개 페이지(html)로 구성된 애플리케이션

 

 

 

SPA 장점

 

  • 자연스러운 사용자 경험 / 깜빡임 현상 X, 네이티브 앱에 가까운 자연스러운 페이지 이동
  • 웹 성능 향상 / 필요한 리소스만 받아 부분적 렌더링, 서버 템플릿 연산 부담을 클라이언트로 위임
  • 개발 생산성 향상 / 컴포넌트별 개발 용이 (협업 업무 분담, 유지보수), 검색엔진최적화(SEO)에 취약

 

SPA 단점

 

  • 첫 랜딩 속도가 느림 / 한 번에 모든 파일 다운 → Code Splitting 고려 필요
  • 검색엔진최적화(SEO)에 취약함

 

 

CSR vs SSR

TTV : Time To View

TTI : Time To Interact

Landing  : 클라이언트가 첫 HTML을 여는 것

클라이언트의 경험 시간에 작용하는 요소라고 볼 수 있다.

 

 

CSR(Client Side Rendering)

TTV = TTI

 

  1. 클라이언트가 사이트에 접속
  2. 서버에게서 index 파일을 받아온다 → 텅 빈 태그와 JS파일 링크 → 빈화면
  3. 해당 웹 앱에 필요한 모든 로직이 담긴 링크된 JS파일 요청 → 빈화면
  4. 동적으로 HTML을 생성할 수 있는 웹 앱 로직이 담긴 JS파일을 받아옴 → 웹 사이트 노출, 상호작용

CSR은 4번부터 웹 사이트가 사용자에게 보임과 동시에 사용자와의 상호작용이 가능해진다.

즉, CSR은 TTV와 TTI가 동시에 이뤄진다.

 

 

 

SSR(Server Side Rendering)

TTV → TTI

 

  1. 클라이언트가 사이트에 접속
  2. 서버에서 이미 잘 만들어진 index 파일을 받아온다 → 웹 사이트 노출
  3. 동적으로 제어할 수 있는 로직이 담긴 링크된 JS파일 요청 → 웹 사이트 노출
  4. 사용자와 상호작용이 가능한 JS 파일을 받아옴 → 웹 사이트 노출, 상호작용

SSR은 2번부터 웹 사이트가 사용자에게 보이지만, 4번부터 사용자와의 상호작용이 가능해진다.

따라서 사용자가 웹 사이트를 볼 수 있는 시간과 상호작용 할 수 있는 공백 시간이 꽤 있는 편이다.

즉, SSR은 TTV와 TTI 사이의 공백 시간이 존재한다.

 

 

 

효율적인 사용 방법

웹 사이트의 성능을 분석할 때 UX 측면을 고려해 볼 때 TTV와 TTI도 중요한 기준치가 된다.

 

CSR의 비중이 높은 경우, 최종적으로 번들링 해서 클라이언트에게 보내주는 JS파일을 어떻게 하면 효율적으로 분할해서 사용자가 첫 화면을 볼 때 필수적인 것들만 보낼 수 있을지 고민해봐야 한다.

 

SSR의 비중이 높은 경우, 사용자가 보고 상호작용 할 수 있는 이 시간의 차이를 줄일 수 있는 방법에 대해 고민하거나 어떻게 하면 매끄러운 UI/UX를 제공할 수 있을지 고민해봐야 한다.

 

▶ 첫 랜딩 시 일부 SSR, 그 이후 CSR

 

 

Hash

Hashed Routing

Hash(Fragment) 값이 변경됨에 따라 페이지 이동 처리

 

Hash Routing 사용 이유 (url에 해시(#)가 붙는 이유)

 

  • 브라우저는 url에 #가 있으면 #포함 그 이후부터 페이지로 받아들이지 않는다.
  • “http://example.com/#about”로 첫 랜딩 또는 새로고침이 되어도 브라우저는 역시 index.html이라는 하나의 파일만을 로 더한다.
  • “http://exmaple.com/about"로 첫 랜딩 또는 새로고침이 되면 브라우저는 호스팅서버에 “/about”에 해당하는 별도의 페이지를 요청할 것이다. (404 Not Found)

 

 

모듈번들러

모듈번들러를 통해서 SPA 유지 및 구현

 

 

 

널병합연산자

널 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어 있는’ 변수를 찾을 수 있다.

 

x = a ?? b의 평가 결과

 

  • a가 null도 아니고 undefined도 아니면 a
  • 그 외의 경우는 b
  • 풀어쓰면 x = (a !== null && a !== undefined) ? a : b;

 

회고

널병합연산자 활용해서 영화 검색 사이트로 만든 로튼오젠지의 영상 타입이 트레일러가 아닐 때 작동하는 로직을 간단하게 변경 가능할 것 같다.

 

영화 영상을 가져올 때 메인 영상인 Trailer를 가져오는 코드를 작성했다.

하지만 Trailer가 없는 영상들도 존재했고, 이럴 때 영상 목록 중 첫 번째 영상을 가져오도록 작성했다.

이를 if문을 한번 더 작성하는 대신 널병합연산자를 통해서 간단하게 구현할 수 있었다.

 

  // Type = Trailer 값 출력
  
 // 기존 코드
  let TrailerType = movies.find((item) => {
    const type = item.type;
    if (type.includes("Trailer")) {
      return true;
    }
  });

  if (typeof(TrailerType) === "undefined") {
    TrailerType = movies[0];
  }
  
  // 널병합연산자 적용
  const TrailerType = movies.find((item) => {
    const type = item.type;
    if (type.includes("Trailer")) {
      return true;
    }
  }) ?? movies[0];

 

 

컴포넌트별 개발 장점

  • 현업에서 업무 분담 방법
  • 유지보수 용이

 

 

JSDOC

주석처리 시스템을 이용한 협업 기능 강화 가능

/**
* (함수내용) hello 콘솔로그 입력
*/
function hello() {
	console.log("hello");
}

 

 

 

 

하루를 마치며

본격적인 React 공부에 들어가기 앞서 SPA에 대해서 정리해 볼 수 있었다.

단점도 분명 존재하지만, 장점이 크기 때문에 많은 부분에서 SPA 방식을 채택하고 있는 것 같다.

널병합연산자를 통해서 기존에 작성했던 로직을 개선해 볼 수 있었던 점도 많은 공부가 되었다.

추후 코드에 불필요한 로직을 줄이거나, 유지 보수하는 과정에서도 도움이 될 것 같다.

 

 

오늘의 한 줄
React Remind

 

 

728x90