SPA란 무엇일까?

1. 기존 MVC가 가진 아쉬운 점.

기존의 웹 페이지는 한 게시글을 읽고 좋아요 눌르면 페이지 전체가 업데이트 됐었다.

 

1) 사용자가 게시물 주소로 접속할 때, 서버는 '이 사용자가 이 게시판의 이 게시물을 읽는구나' 확인.

2) 게시글을 데이터 베이스에서 불러오고 데이터베이스에서 좋아요 수와 댓글들을 그리고 이전 글과 다음 글의 제목과 링크들을 불러온다. 

3) 사이트에 기본적으로 보여지는 다른 내용들과 함께 이 데이터들을 HTML, CSS, JAVSCRIPT로 작성해서 사용자의 브라우저에 보내준다.

4) 사용자가 그 화면을 보고 글에 좋아요를 누르면 서버는 또 이 사용자가 이 게시판의 이 게시물에 좋아요를 했구나 인식

5) 해당 게시물에 사용자의 아이디로 좋아요를 추가.

6) 다시 데이터베이스에서 이 게시물의 내용, 좋아요들과 댓글들, 이전글과 다음글을 죄다 읽은 다음.

7) 이걸 또 나머지 내용들과 함께 HTML,CSS,JAVAscript로 작성해서 브라우저로 전송.

 

이거 하나 적용할라고 이 모든 걸 다 한다. 페이지를 통째로 다시 로드하는데 이미지가 있으면 데이터 낭비도 심하다.

 

2. AJAX가 나온 이후

http 통신으로 데이터를 전송하고 결과를 받아와서 사이트의 이 부분을 이렇게 변경해라 하고 자바스크립트로 명령을 줄 수 있게 됐다. 그러나 일일이 프로그래밍 해야 하는 불편함이 있다.

 

3. SPA의 등장.

예전에는 pc용 웹사이트 하나만 만들면 됐지만, 모바일 시대가 열리고, 앱이나 스마트폰 브라우저로

서비스들이 이용되기 시작하면서 갖춰진 사업을 하는 회사에서는 개발자들이 PC용 사이트,  모바일용 사이트,

아이폰과 안드로이드용 앱과 서버까지 개발해야 했는데. 개발 인력이 배로 들었다.

 

여기서 겹치는 부분을 해소하고, 업무를 분할할려고, 서버 개발자가 서버 개발에만 집중할 수 있게 해주는데...

이 일을 다 해주는 게 Angular, React, Vue 같은 SPA 프레임워크이다.

 

서버는 정적 웹처럼, htm, css, 자바스크립트로 된 코드들을 브라우저에 전송. 주어진 데이터에 따라 html 웹페이지를 랜더링. 기존의 동적 웹에서 서버가 하던 일을 이제는 사용자의 컴퓨터에서 브라우저가 해낸다.

 

SPA는 서버에서 데이터를 받아야 할 때마다 요청을 보내서 반환된 데이터로 사이트 내용을 갱신한다. 이렇게 되면 사이트에서 뭘 할 때마다 새로 접속하지 않고 한 번 로드된 화면에서 많은 기능을 사용할 수 있게된다. 그래서 Single page Application으로 불린다.

 

기존 MVC에서는 서버가 최종 결과물까지 요리해서 보내줬지만, 브라우저한테 여기 레시피를 줄테니 필요한 재료들만 따로 요청해서 네가 페이지를 요리해내하고 역할을 맡겨버리는 것.

 

전보다 사이트가 훨씬 효율적으로 동작하는 모습을 볼 수 있다. 코드들은 Vue나 react 등의 특수 형식이라 브라우저에서 이 코드가 바로 돌아가지는 않는다. 코딩을 다 하고 배포할 결과물로 빌드하면 이상한 형태의 자바스크립트 파일이 만들어진다. 브라우저가 읽을 수 있는 형식으로 변환된 거라고 생각하면 된다.

 

이걸 html, css 파일들과 패키징해서 서버에 진열하면 되는거다. 브라우저는 이 진열된 묶음을 받아간 다음. 이 레시피대로 데이터를 요청하고, 화면을 렌더링해서 모니터에 띄어준다.