SPA : Single Page Application 는 한 개(Single)의 Page로 구성된 Application
웹 어플리케이션 구동에 필요한 정적 리소스를 최초에 한번만 다운로드하고, 새로운 페이지 요청이 있을때만 페이지 갱신에 필요한 데이터만 전달(Virtual DOM)받아서 페이지를 갱신한다.
SPA를 CSR(Client Side Rendering) 방식으로 렌더링
첫 요청 시 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정(Virtual DOM)해서 보여주는 방식. 필요한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 UX 제공한다
장점
자연스러운 사용자 경험 (UX)
전체 페이지를 업데이트 할 필요가 없기 때문에 새로고침을 누르지 않는 이상 빠르고 깜빡거림이 없다.
Virtual DOM의 존재로 실제 DOM의 리렌더링 연산(리플로우, 리페인트)은 단 한 번만 일어나게 되어, 큰 성능의 이득
필요한 리소스만 부분적으로 로딩 (성능)
SPA의 Application은 초기 구동 시 서버에게 정적리소스를 한 번만 요청한다. 그리고 받은 데이터는 전부 저장해놓는다. (캐시=Cache)
서버의 템플릿 연산을 클라이언트로 분산 (성능)
컴포넌트별 개발 용이 (생산성)
모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능 (생산성)
단점
JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다. (Webpack의 code splitting으로 해결 가능)
code splitting : 사용자가 현재 필요로하는 것들만 lazy-load할 수 있으므로 앱의 성능을 크게 향상. 앱의 전체 코드 양을 줄이지는 않지만 사용자가 필요로하지 않은 코드를 로드하는 것을 피하고, 초기 페이지 로드시 필요한 코드만 받음
검색엔진최적화(SEO)가 어려움 (SSR로 해결 가능)
보안 이슈 (프론트엔드에 비즈니스 로직 최소화)
SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만 CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.
MPA : Multiple Page Application
새로운 페이지/새로고침을 요청할 때마다 정적 리소스(HTML, CSS, JavaScript) 다운로드로 매번 전체 페이지가 다시 렌더링
MPA를 SSR(Server Side Rendering) 방식으로 렌더링
장점
SEO 관점에서 유리
MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다. 따라서 검색엔진이 페이지를 크롤링하기에 적합하다.
첫 로딩 매우 짧다.
서버에서 이미 렌더링해 가져오기 때문
클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다
단점
새로운 페이지를 이동하면 ‘깜빡’인다. (UX)
매 페이지 요청마다 리로딩(새로고침) 발생.새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문
페이지 이동시 불필요한 템플릿도 중복해서 로딩 (성능)
서버 렌더링에 따른 부하
모바일 앱 개발시 추가적인 백엔드 작업 필요 (생산성)개발이 복잡해질 수 있다.
MVC : Model View Controller
어플리케이션을 3가지 역할로 구분한 개발 방법론. 유저가 컨트롤러를 조작하면 컨트롤러는 모델을 통해 데이터를 가져오고, 그 데이터를 바탕으로 뷰를 통해 사용자에게 전달. google의 앵귤러, 파이썬의 django, 페이스북의 react가 해당
Model : 데이터와 비즈니스 로직 관리. 데이터를 가진 객체
View : 레이아웃과 화면 처리. HTML, CSS, JS 해당
Controller : 명령을 모델과 뷰 부분으로 라우팅
MVC 장점
MVC 패턴을 사용하면 사용자 인터페이스로(화면)으로부터 비즈니스 로직을 분리하여, 유지보수를 독립적 수행 가능
Model과 View가 다른 컴포넌트들에 종속되지 않아 애플리케이션의 확장성, 유연성에 유리
중복 코딩의 문제점 제거
MVC 한계
View는 Controller에 연결되어 화면을 구성하는 단위 요소이므로 다수의 View를 가질 수 있음. 그리고 Model은 Controller를 통해서 View와 연결되지만, Controller에 의해서 하나의 View에 연결될 수 있는 Model도 여러 개가 될 수 있어 View와 Model이 서로 의존성을 갖음. 즉, Controller에 다수의 Model과 View가 복잡하게 연결되어 있는 상황이 발생할 수 도 있습니다.
+++ React VS Angular, Vue
React는 기본적으로 단방향 바인딩을 지원하지만 Angular와 Vue는 양방향 바인딩을 지원해서 잘못 사용하면 변화에 따라 DOM 전체 객체를 리렌더링 하거나 데이터를 바꿔서 성능이 저하될 수 있다.