SPA 프레임워크 라이브러리 React, Vue, Angular

SPA란?

SPA 개념

SPA(Single Page Application) : 단일 페이지 애플리케이션으로써 웹 개발 방법론의 하나이다.

일반 페이지 같은 경우는 Client/web Browser(프론트)가 server(백엔드)에게 html,javascript,css등 화면에 보여줄 데이터를 요청하고, 서버는 요청된 파일을 Client에게 뿌려주는 형태이다.

그러나 SPA는 Client(Browser)가 필요한 부분만 자바스크립트를 사용하여 업데이트 해 주는것이다.

그뜻은 SPA 앱 안에 html,css,자바스크립트 등 모든 정보가 이미 내장되어 있는 상태로, 새로운 데이터가 필요할때만 서버 API를 호출하여 필요한 데이터만 불러와 화면에 보여주는 식이다.

싱글 페이지라고 해서 한 종류인가?

NO👎

• 사용자에게 보여준 페이지는 한 페이지이지만, 사용자가 원하는 해당 페이지와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.
• 다른 주소에 다른 화면을 보여주는것을 라우팅이라고 한다.

리액트 라우팅 라이브러리

• 리액트 라우터(React-Router)
• 리치 라우터(Reach-Router)
• Next js
  가 있다고 함...

SPA 단점

앱의 규모가 커지면 자바스크립트 파일이 너무 커진다는 것이다. (페이지 로싱시 실제 사용자가 방문하지 않을 수도 있는 페이지의 스크립트도 불러오기 때문)

코드 스플리팅(code splittiing)으로 해결하는 방법이 있음

SEO, 클로러가 페이지 정보를 수집하지 못하여 페이지 검색이 힘듬. (구글,네이버,다음) 같은 대형 포털싸이트에 검색 안될경우도 있음.

왜 그럴까?
REACT 같은경우는 index.html파일에

<div id="root"></div>

가 있고, 우리는 index.js에

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

자바스크립트가 로딩이 되기 전에 DOM 은 비어있으니까 그렇다고 한다.
(자바스크립트가 실행될때 까지 페이지가 비어 있어서 로딩 대기중의 짦은 시간동안 빈페이지가 화면에 띄워져있는다)

SPA 프레임워크, 라이브러리 (React, Vue, Angular)

SPA를 잘 구동하기 위해서 서버에 있는 코드(back-end)보다 브라우저상 코드들(front-end)에 집중하기 위해 나옴.

리액트(React)

• 페이스북에서 지원
• 단방향 바인딩(model -> view)
• Virtual DOM
• jsx (js언어 내부에 html 태그를 사용)
• 컴포넌트 사용 (코드스플리팅에 용이)

앵귤러(Angular)

• 구글에서 지원
• 양방향 바인딩 (model <-> view)
• TypeScript 기반 (타입명시, 목적성 up/에러 down)

뷰 (Vue)

• 개인에서 지원
• 양방향 바인딩 (model <-> view)
• Virtual DOM
• 비교적 쉬운 문법