[영상후기] Angular, React, Vue가 뭔가요? (+ Single Page Application)

이전 문제점 1 : 변경된것 하나 뿐이여도 반영하기 위해서 관련된 모든 것들을 재생산 해야하는 불필요 작업(페이지를 통째로 다시 로드)
ex) 좋아요 버튼 클릭 하여 증가 -> DB 갱신 -> 그에 따른 HTML 재응답
-> 사이트에 로드할 정보들이나 이미지가 많으면 데이터 낭비 심함

• ajax 기술 등장 이후 : http 통신으로 데이터 전송 및 결과를 받아와서 사이트의 이부분을 이렇게 변경해라로 자바스크립트로 명령 줄 수 있음(일일이 프로그래밍 해야하는 불편)

이전 문제점 2 : PC용, 모바일 웹사이트 + 아이폰, 안드로이드용 앱과 서버까지 개발 필요

• PC용 : 서버에서 DB를 활용해 정보를 찾아 HTML, CSS ,Javascript로 렌더링 하고 PC 브라우저에 보냄
• 모바일 웹 프로그래밍 / 모바일 앱에서 이 과정 반복
• 반복 작업 최소화 방법? SPA 프레임워크 등장(Angular, React, Vue)
  • 안드로이드, iOS에서는 자체적 SW와 시스템을 활용하여 서버로부터 데이터만 전송받으면 화면이 보여질 수 있음
  • PC나 모바일 웹에서도 데이터만 전송받아 화면이 보여질 수 있게 하면 해결
    -> 프론트엔드 / 백엔드 완전 분리
    -> SPA 프레임워크 등장(Angular, React, Vue)

SPA(Single Page Application)

• 서버는 정적 웹처럼 HTML, CSS, 자바스크립트로 된 코드를 브라우저 전송
• 주어진 자바스크립트는 주어진 데이터에 따라 HTML 웹페이지를 랜더링
  -> 이전에는 서버에서 하던 일을 사용자의 브라우저에서 진행
• 서버에서 데이터를 받아와야 할 때마다 요청을 보내고 반환된 데이터로 사이트 내용 갱신
  -> 사이트에서 뭘 할 때마다 새로 접속하지 않고 한번 로드된 화면에서 많은 기능 사용 가능 (좋아요 버튼 눌러서 증가 -> 새로 접속이 아닌 숫자만 증가해서 보여주게)

Vue 예시

• 페이지 열리면 특정 함수 실행 -> 함수 내에 get 요청 보내는 코드 포함 -> 요청이 오면 그에 따른 답을 하도록 하는 서버를 만들어 둠 -> 받은 데이터를 활용해서 프론트 단에 역할을 맡기기