MPA,SPA에 대한 이해

#MPA #SPA

학습법 이론

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

​

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

2.외우지 말라

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

=> 크롬을 통해 copy and paste하라

1. 이해하는게 중요하다

=> 왜 생겨났는지?

=> 왜 사용하는지?

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

​

MPA동작원리

MPA란?

MPA란 Multi Page Aplication의 약자로 웹서비스가 다양한 페이지로 구성되어 있는 것을 의미한다. 예전부터 웹서비스를 만들때 사용한 방식이며, 오늘날에도 여전히 많이 사용하고 있다.

​

MPA동작방식

만약 게시글 서비스를 만든다고 가정해보자. 게시글 리스트가 보이는 페이지 , 게시글 내용이 보이는 페이지, 게시글 작성페이지, 게시글 수정페이지 등 각기능에 맞는 다양한 HTML파일을 서버가 준비해둔다. 브라우저가 해당 기능 페이지로 넘어가면 http통신을 통해 해당 서비스를 가진 HTML파일을 넘겨준다.

​

각 페이지마다 도메인이 다르며 보통 도메인/기능(detail) 이런식으로 파일명을 만들어둔다.

벡엔드 언어의 역할

JAVA,node js,Python등 백엔드언어의 역할은 서버를 구축하는 역할이다. 서버는 클라이언트에게 서비스를 제공한다. 하지만 사용자의 반응을 모두 예상하여 HTML파일을 준비해둘 수 없기 떄문에 데이터 베이스와 연동해서 사용한다.

데이터베이스

데이터가 저장된 공간으로 이해하면 편하다. 가장 많이 사용하는 데이터베이스는 Oracle,MySql이다. 벡엔드언어가 MySql과 연동하여 사용자의 반응에 따라 HTML파일을 변경시킨다.

SPA동작원리

SPA란?

SPA는 Single Page Aplication의 약자로 페이지 전환없이 웹사이트가 작동하는 것을 말한다. 비교적 최근에 많이 사용하기 시작했으며, SPA형태로 만든 웹서비스가 많아지는 추세이다.

​

SPA동작방식

SPA는 서버가 달랑 하나의 HTML을 전달한다. MPA와 달리 페이지가 하나밖에 없기 때문에 웹페이지 동작이 매우 매끄럽다. 특정 기능을 구현하기 위해서 서버로부터 API를 받아서 사용된다.

API

API는 하나의 약속이다. "이 버튼을 클릭하면 이런 화면을 보여줄게"라는 식의 기능을 서버가 구현해두었다. SPA는 서버로부터 API를 전달받고, HTML파일을 수정한다.