웹에서 MVC 패턴과 MPA, SPA, CSR, SSR 에 대하여

 

용어 간단 요약

용어에 대해서만 궁금해하는 분들도 많을 것 같아서 미리 간단 요약을 해본다.

 

- MVC: Model , View, Controller 의 약자로 어플리케이션을 세가지 구조로 나누어서 개발하는 디자인 패턴이다.

• Model 은 데이터베이스를 직접적으로 접근하는 로직을 말하고,
• View 는 유저가 실제로 보는 화면을 말한다. 그리고
• Controller 는 유저와 상호작용하는 로직을 말한다.

- MPA: Multiple Page Application 의 약자로 여러 페이지로 구성된 애플리케이션을 말한다.

- SPA: Single Page Application 의 약자로 한 페이지로 구성된 애플리케이션을 말한다.

- CSR: Client Side Rendering 의 약자로 클라이언트 측에서 View 를 만들어 유저에게 제공하는 방식을 말한다.

- SSR: Server Side Rendering 의 약자로 서버 측에서 View 를 만들어 유저에게 제공하는 방식을 말한다.

 

웹에서 MVC 패턴이란?

웹 개발에서는 MVC 패턴은 나는 직접 경험해보지는 못한 PHP 나, JSP 등이 이에 해당한다. 

 MVC 와 같은 패턴을 사용하여 웹 개발을 직접적으로 해본 적은 없지만, 주변에 웹 개발 국비지원 학원을 다니는 친구들을 보면 JSP 를 이용하여 웹 개발을 처음 배우는 것을 보았었다. 때문에 MVC 패턴으로 개발된 웹이 어떤 구조를 가지고 어떤 로직으로 웹이 동작하는지를 이해할 수 있었다.

 

  MVC 패턴의 기본적인 렌더링 방식은 SSR (Server Side Rendering)으로 서버측에서 완벽한 View를 생성하여 유저에게 html, css, js 파일이 전달되게 된다. 때문에 JSP 나 PHP 등과 같은 MVC 패턴으로 개발된 웹을 보면 유저가 특정 라우터로 접근 하였을 때, View 를 만들어서 전송하게 하는 로직이 담겨져 있다. 이와 같은 방식으로 개발된 웹은 사용자가 어떠한 동작을 할 때 마다 서버측에서 새로운 View 를 만들어서 제공하게 되므로 유저 입장에서는 매 동작마다 화면이 깜빡거리게 된다. 그렇기 때문에 사용자 입장에서는 좋지 못한 성능을 가진다. 

 

SPA 와 프론트엔드 / 벡엔드

 SPA 는 Single Page Application 의 약자로, 직역해보면 한개의 페이지로 이루어진 어플리케이션이다. 앞서 말한 SSR 과 다르게 CSR(Client Side Rendering) 의 렌더링 방식을 가지고 있다. CSR 은 서버측에서 View 를 생성하는 것이 아닌 클라이언트측에서 View를 생성하는 것이다. 서버측에서는 View 에서 보여줄 데이터들에 대해서만 http 통신을 통해 클라이언트 측에 전송하게 되고, 클라이언트 측에서는 서버에서 받은 데이터를 가지고 브라우저가 View 를 생성하게 된다. ( 브라우저가 읽을 수 있는 언어인 Javascript 를 이용하여 생성한다! )

 

 때문에 클라이언트 측 코드에는 http 통신을 통해 데이터를 받고 (변경된 부분만) 화면을 그리는 javascript 코드가 포함되어 있다. 이러한 과정을 쉽고 간편하게 사용할 수 있게 만든 프레임워크와 라이브러리가 React, Angular, Vue 이다. 

 

 위와 같은 개발 패턴으로 개발이 진행되면 서버측 입장에서 역할이 많이 줄게 된다. 서버는 http 통신을 통하여 데이터 베이스에 있는 데이터를 클라이언트 측으로 전송하는 API 를 제공하는 역할만을 하면 된다. 클라이언트 측에서는 해당 데이터를 가지고 웹을 만들어서 보여주면 웹개발이 되고 앱을 만들어서 보여주면 앱개발이 된다. 이렇게 서버는 API 를 제공하는 역할을 담당하고 클라이언트측에서는 받은 데이터를 렌더링해서 유저에게 보여주는 방식이 현재 가장 많이 사용되고 있는 웹 개발/ 앱 개발의 방식이다. ( 프론트엔드 / 백엔드 로 나누어서 작업이 진행되는 방식 )

 

---

 

잘못된 정보가 있다면 언제든지 댓글로 알려주세요. 감사합니다.