JSP로 redirect하는 연습을 하다가 갑자기 SPA로 화면을 만드는 것과 어떻게 연관이 있는지 궁금해졌다.
일단 각각의 개념부터 살펴보자면,
MPA (multi page application)
사용자가 페이지를 요청할 때마다, 웹서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션
기존 웹은 요청시 마다 새로고침이 발생해서 서버로부터 리소스들을 받아 렌더링 하는 방식(SSR)이었다.
서버로 부터 form 데이터를 전달해 새로운 페이지 렌더링을 요청한다. 다시 말해 서버에서 html파일을 만들어두고 클라이언트가 요청하면 각종 프로그래밍 언어들을 통해 데이터베이스에서 데이터를 꺼내 ASP, JSP, PHP 같은 파일들에 넣어준 후 HTML 포멧으로 만들어 전송한다.
서버에 담긴 jsp파일이 있다면, 서버는 자바코드를 통해 데이터베이스와 연결해 데이터를 가져와 이 jsp파일에 담긴 결과물을 html 처럼 만들어 사용자에게 보여준다.
= 백에서 프론트의 역할까지 도맡아한다.
-> 최근에는 node.js 에 있는 템플릿 엔진을 이용해 유동적인 html 파일을 만들어주는 기능이 생겼다.
이렇게 작동하는 경우, 페이지를 이동할 때마다 새로운 html 파일을 계속 요청하면 사용자의 인터페이스에서 사용하고 있던 상태를 유지하기가 어려워지고 바뀌지 않는 부분까지 다시 불러와야하기 때문에 불필요한 로딩이 생긴다.
또한 다수의 클라이언트가 동작할 때마다 서버에 요청하게되면 서버가 과부하가 생기는 문제가 발생할 수 있다.
그래서 이를 보완하기 위해 나타난 것이 SPA이다.
SPA (single page application)
하나의 HTML파일을 기반으로 자바스크립트를 이용해 화면의 콘텐츠를 바꾸는 방식의 웹 어플리케이션
브라우저가 서버에 HTML과 JS파일 요청 후 로드되면, 사용자의 상호작용에 따라 JS를 이용해 동적 렌더링하는 방식(CSR)으로 사용된다. html파일만 가지고 안의 데이터들을 js의 dom조작을 이용해 채우게 된다.
= 페이지의 렌더링을 프론트에서 한다는 의미
데이터를 데이터베이스에서 가져오기 위해서 jsp를 사용해야하나, 서버에 얽메이지 않고 사용하기 위해 SPA에서는 REST API + AJAX를 사용한다.
아무쪼록 서버에 요청하는 횟수가 적어 서버에 부담도 상대적으로 덜 가고,
첫 로딩만 기다리면 동적으로 빠르게 렌더링 되기때문에 사용자경험에 이롭다는 장점이 있다.
반면 모든 스크립트 파일이 로드될 때까지 기다려야해서 js 실행 전까지는 페이지가 비어있기 때문에 흰 화면이 나올 수 있고 (SSR로 해결하거나 리소스를 청크단위로 묶어 요청시에만 다운로드받도록 하는 방식으로 완화 가능하다.), js로 데이터를 불러오기 때문에 html을 읽어 정보를 긁어오는 크롤링이 어려워 검색엔진 최적화의 문제가 있다.
결론
JSP는 server side scrpit라서 spa로 이용 못함.
이번에는 jsp를 써야하니깐 mpa 형식으로 만들고 spa 형식으로도 만들어보기
