[WEB CS] SPA(Single Page Application) 에 대해 간단 개념 정리!

안녕하세요.

 

스파 브랜드의 그 SPA가 아닌

 

웹에 사용하는 SPA 에 대해 다뤄보겠습니다.

 

 

 

 

SPA(Single Page Application) ?

---

  -  페이지가 하나인 어플리케이션 (!)

 

  -  주로 페이지 이동 시 Ajax로 동적 데이터를 요청하고, 받은 json 결과를 View에 바로 뿌려주는 Application. 그래서, 페이지는 하나. 

 

 

SPA 사용 이전까지는 페이지 요청 시 웹 서버에서 HTML을 만들고, 꾸미고 해서 그걸 받아 렌더링했었습니다. (뷰는 서버 - 사이드에서 담당)

그 결과, 웹의 규모가 커질수록 데이터 전송 과부하로 점점 속도가 느려졌습니다. 

 

이를 해결하기 위해 SPA가 나왔는데요.

 

 

 

 

 

서버 단에서 HTML을 만들어서 클라이언트는 그 결과만 화면에 출력했다면,

 

SPA는 클라이언트 - 사이드 에서 뷰를 담당하기 때문에, 서버에서 기본 틀(상단, 하단, 메뉴와 같이 별도의 동적 데이터 처리가 필요 없는 부분들) 만 담긴 HTML을 받아 클라이언트에서 로딩하고, 나머지 정적 데이터 부분은 Ajax를 통해 비동기적으로 받아와서 그때마다 클라이언트에서 출력합니다.

 

 

 

SPA의 장점

  -  사용자 친화적인 UI(반응성이 빨라 화면 출력 또한 빠릅니다.)

 

  -  서버 요청이 적음.

 

  -  개발이 간단하고 능률적이다. (페이지를 렌더링하기 위해 서버에 코딩할 필요가 없이 바로 파일을 만들어 시작할 수 있습니다.)

 

  -  크롬에서 디버깅이 쉽다. (앱 : chrome inspect, 웹 : chrome 개발자 도구)

 

  -  프론트엔드와 벡엔드의 분리로 인한 개발업무 분업화 및 협업이 용이하다.

 

 

SPA의 단점

  -  초기 구동 속도 (한 번에 모든 웹 결과를 가져와서 출력하기 때문에, 초기 출력 속도는 느립니다.)

 

 

 

이전 웹 과 SPA의 차이 (출처 : https://www.excellentwebworld.com/what-is-a-single-page-application/)

 

 

 

SPA를 사용하는 프레임워크는 주로 React.js, Vue.js, Angular.js 등 이 있습니다.

 

*** 라우팅(Routing) : 주소에 따라 다른 View를 보여주는 것.

 

 

 

이상입니다.

 

감사합니다!