SPA

프론트엔드분야를 공부하며 생길수 있는 의문점과 가져야할 지식에 대하여 공부하는 바를 적은 글입니다.

Single Page Application

• SPA란?
  - 말 그대로 단일페이지로 구성된 웹 어플리케이션
  • MPA(Multi Page Application)의 반대
  • 과거 서버가 수행하던 렌더링을 브라우저에서 처리한다.

    화면 구성에 필요한 모든 html을 클라이언트가 가지고 있고, 서버로부터 필요한 데이터를 JSON의 형태로 받아온다.

  • 최초 페이지 렌더링 이후, 변경되는 데이터만 서버에서 받아온다.
  • 주로 CSR 방식으로 렌더링 된다

• 장점
  1. 뛰어난 UX
  2. 필요한 부분만 요청하기 때문에 화면 전환시, 빠른 렌더링 가능
  3. 서버가 할 화면구성을 클라이언트에서 수행하여 서버 부담 경감
  
  

• 단점
  1. 최초 모든 리소스를 받아와 렌더링 하기 때문에 초기 렌더링이 느리다.
  2. 어려운 SEO

  클라이언트에서 자바스크립트로 렌더링 하기 때문에 자바스크립트를 읽지 못하는 검색엔진에 대하여 크롤링이 어렵다.

• SEO에 대한 해결책
  - SSR 사용 (추후 포스팅에서 자세히 다룰 예정)

  SSR : ServerSide Rendering의 약자로 서버에서 html, css, js등 모든 요소를 받아와서 렌더링 하는 방식

• SPA 프레임 워크
  

1. React
   • 가장 높은 점유율을 가진 프레임워크 (라이브러리)
   • 큰 생태계에서 오는 다양한 도구와 레퍼런스
   • 손쉬운 컴포넌트 재사용
   • 높은 자유도 (협업간의 규약 필요)
2. Vue
   • 리액트에 비해 낮은 러닝커브
   • "프레임워크"이기 때문에 협업시 용이 (리액트에 비해 낮은 자유도) => 개발 속도 단축
3. Angular (추후에 직접 사용해 볼 예정)