웹사이트 계층구조 및 MPA vsSPA 차이정리

#웹사이트계층구조 #mpaspa차이 #mpa #spa

학습법 이론

학습을 하기 이전, 명심해야할 학습법이 있다.

​

1.이해가지 않는다고 뒤돌아가 다시 보지 말 것

2.외우지 말라

=> 자주 봐서 외워짐을 당하라

=> 구글검색하여 copy and paste하라

1. 이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

===> 응용이 가능해진다.

​

웹사이트의 계층구조

2계층구조

과거의 대부분의 웹사이트는 2개의 계층구조를 가지고 있습니다. 화면에 보이는 클라이언트 부분과, 데이터를 담당하는 데이터베이스로 나눠져있습니다.

클라이언트 부분에는 UI와 Business로직이 같이 담겨져 있습니다. 따라서 비교적 빠르고 쉽게 개발이 가능합니다. 하지만, 단점도 존재합니다. UI와 Business 로직이 함꼐있기 때문에 복잡한 웹서비스를 구현하기에는 어렵습니다.

​

3계층구조

3계층구조는 비교적 최근에 구조화되었습니다. 3계층구조와 2계층 구조의 가장큰 차이점은 3계층구조에는 UI와 Business 로직을 따로 분리한다는 점입니다. UI,Business,DB로 3계층구조를 가집니다.

​

3계층구조의 장점은 UI와 Business 로직을 각각 배포가 가능합니다. 현재는 UI부분을 프론트엔드(front-end)개발자가, Business 로직은 백엔드(back-end)개발자가 분업화 하여 웹사이트를 구성합니다.

​

MPA vs SPA

​

MPA

MPA는 Multi Page Aplication의 약자로 직역하면 다수페이지 어플리케이션입니다. 여기서 어플리케이션은 웹으로 보면 될 것 같습니다. 전통적인 웹 개발 방식이며 jsp,php등의 웹서버 언어로 구측된 웹사이트가 많습니다. 웹브라우저가 서버에 요청을 보내면 서버로 부터 데이터를 받습니다.

​

MPA는 웹페이지의 중심이되는 메인페이지와 더불어 여러 기능을하는 다수의 페이지로 구성됩니다. 각 페이지마다 경로가 다다르며 설계시 /name 형태로 페이지를 구성하게됩니다. 그래서 웹페이지에서 특정 링크나 기능을 클릭하면 화면이 잠시 깜빡이며 새로고침되고 로딩됩니다.

#

대표적인 예시로 네이버 웹페이지가 MPA로 구현된 웹페이지입니다. 네이버 블로그를 클릭하면 네이버 블로그 페이지에 해당하는 데이터를 받아와 화면에 나타냅니다.

SPA

SPA는 Single Page Aplication의 약자로 직역하면 하나의 페이지 어플리케이션입니다. 단 하나의 HTML파일을 받아오며, JavsScript를 활용하여 페이지를 동적으로 변환시킵니다.

​

초기 로딩에 html파일 및 모든 동적요소를 받아오기 떄문에 로딩속도가 느리지만, 로딩이 완료되면 페이지의 링크 및 기능을 수행할때 화면 깜빡임없이 매끄럽게 웹페이지가 동적으로 변합니다.

#

SPA 예시를 보여드리기 위해 pixelshop이라는 웹사이트를 잠깐보여드리겠습니다. 웹페이지의 상단 메뉴를 클릭하면 화면깜빡임 없이 부드럽게 화면이 스크롤되는 것을 볼 수 있습니다.

​

​