SPA 프레임워크/라이브러리 React, Vue, Angular - FE study6

1. SPA 개념

SPA : 단일 페이지 애플리케이션

서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트이다. (위키백과)

• 기존방식 : link를 통해 refresh (매 동작마다 페이지 새로고침과 리렌더링)
• SPA : 한 페이지에서 리렌더링 없이 필요한 동작 수행

이런 성능적인 측면으로 User 의 입장에서 native-app을 이용하는 경험을 얻음.(실제로 배포도 가능. ionic, react-native 등)

2. SPA 단점

1. 검색엔진 최적화 (SEO) 잘 안됨.

초기 렌더링 시 얻는 HTML가 실제 컨텐츠를 포함한 HTML이 아닌 경우가 많기 때문 -> 서버사이드렌더링이 필요함

2. 초기 구동 속도

처음에 모든 정적 리소스를 모두 불러옴 -> 코드 스플리팅

• 코드스플리팅 : 여러 페이지 중에 필요한 페이지만 불러오는 기능

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

• 프레임워크와 라이브러리의 차이 : 둘다 개발에 필요한 인터페이스들을 포함하는 도구들이지만, 프레임워크가 좀더 틀, 지켜야할 규칙이 명확하고 라이브러리는 그에 반해 좀 더 자유롭다.

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

1. 리액트 (React)

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

2. 앵귤러 (Angular)

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

3. 뷰 (Vue)

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