궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/TIL

[TIL] 230201 SPA

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

SPA?

Single Page Application - 한 개의 페이지로 이뤄진 앱

MPA(Multi Page Application) 과 상반된 개념

SPA가 좋은가?

 

MPA는 어떠한 이벤트가 발생할때마다 웹페이지가 Reload 되어 Re-rendering되 데이터를 많이 잡아 먹는 문제가 있다.

왜냐하면 SSR을 사용하기 때문! 하지만,

 

SPA를 사용하면 필요한 부분만 수정해 웹페이지가 Reload 되는 문제가 없다. SPA에는 대부분 CSR을 권장하고 사용하고 있다.

[CSR] / [SSR]
SSR - Server Side Rendering
서버쪽에서 랜더링 준비를 끝마친 상태로 클라이언트에 전달됨

CSR - Client Side Rendering
랜더링이 클라이언트 쪽에서 일어남

SPA 장점

  1. 딱 한개의 페이지 싱글 페이지로 구성된 앱
  2. 서버에 1회 리소스
  3. 필요한 데이터만 받아와 새로고침 없이 데이터 수정
  4. 자연스러운 UX 구현
  5. Angular, Vue가 비슷한 기술
  6. React를 사용하면 안드로이드/iOS 앱까지 만들 수 있음 (Expo에 대해 배워야함)

SPA 단점

  1. 싱글 페이지 이기 때문에 SEO에 취약함
  2. 이것을 보안하기 위해 Next.js가 등장 (ReactJS 베이스)

컴포넌트

  1. 재사용이 가능한 블럭 이라고 생각하면 됨.
  2. 헤더/바디/푸터 안에 많은 컴포넌트들이 존재
  • SPA 기반: 컴포넌트 단위로 변경사항을 반영 (Re-rendering 없음)
  • MPA 기반: 하나의 변경사항을 위해 전체 페이지 리로딩 (Re-rendering 됨)

'FRONT-END > TIL' 카테고리의 다른 글

[TIL] 230203 JSX  (10) 2023.02.05
[TIL] 230202 npm / yarn  (1) 2023.02.05
[TIL] 230130 백준 입력 템플릿  (2) 2023.02.01
[WIL] 230129 ES / ES5, ES6 문법 차이  (0) 2023.01.29
[TIL] 230128 유용한 함수  (0) 2023.01.29

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.