SPA, MPA, MVC

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 전체 객체를 리렌더링 하거나 데이터를 바꿔서 성능이 저하될 수 있다.
•