simple

리액트, 앵귤러, 뷰와 같은 SPA 프론트앤드 프레임워크란?
먼저 이것들이 왜 나왔는지부터 알아둘 필요가 있습니다.
강력한 MVC 웹 프레임워크들이 등장하고 발전하면서 우리는 편리하고 빠르게 웹사이트를 개발할 수 있게 됐습니다.
하지만 기술이 발달해서 어떤 필요를 충족하고 나면, 또 다른 수요와 해결과제가 생기기 마련입니다.
기존 MVC 웹이 가졌던 아쉬움들 중에 두 가지를 살펴보겠습니다.

첫번째, 오래된 웹 사이트일수록 이런 사용자 경험이 많을 겁니다.
이것저것 많이 있는 웹사이트에서 한 게시글을 읽고 내용이 마음에 들어서 좋아요를 눌렀는데,
고작 하나 업데이트한다고 화면이 깜빡 하면서 페이지가 새로 로딩되는 거죠.

이 과정을 서버 입장에서 살펴보면 사용자가 이 게시물의 주소로 접속해왔을 때
서버는 '이 사용자가 이 게시판의 이 게시물을 읽는구나' 확인하고
먼저 게시글을 데이터베이스에서 불러오고 역시 데이터베이스에서 좋아요 수와 댓글들을,
그리고 이전글과 다음 글의 제목과 링크들을 불러온 다음 사이트에 기본적으로 보여지는 다른 내용들과 함께
이 데이터들을 HTML, CSS, Javascript로 작성해서 사용자의 브라우저에 보내줍니다.

사용자가 그 화면을 보고 이 글에 '좋아요'를 누르면
서버는 또 '이 사용자가 이 게시판의 이 게시물에 좋아요를 했구나'라고 인식한 다음
해당 게시물에 사용자의 아이디로 좋아요를 추가하고
다시 데이터베이스에서 이 게시물의 내용, 좋아요와 댓글들, 이전글과 다음글을 죄다 읽은 다음
이걸 또 나머지 내용들과 함께 HTML, CSS, javascript로 작성해서 브라우저로 전송해 주는 겁니다.

바뀐 것은 고작 좋아요 버튼 하나 뿐인데, 이거 하나 적용하려고 이 모든 작업을 다시 해야하는 거죠.
뭔가 크게 비효율적이죠?
사이트에 로드할 정보들이나 이미지가 많으면 데이터 낭비가 심할겁니다.
옛날에는 서버와 통신해서 사이트 화면에 뭔가 변화를 주려면 이렇게 페이지를 통째로 다시 로드해야 했습니다.
다행히 ajax란 기술이 나온 이후로는 http 통신으로 데이터를 전송하고 결과를 받아와서
사이트의 이 부분을 이렇게 변경해라 하고 자바스크립트로 명령을 줄 수 있게 됐죠.
대신 이걸 일일이 프로그래밍해야된다는 불편합이 있습니다.

예전에는 PC용 웹사이트 하나만 만들면 됐지만, 모바일 시대가 열리고 앱이나 스마트폰 브라우저로
서비스들이 이용되기 시작하면서 이제는 어느정도 갖춰진 사업을 하는 회사에서는
개발자들이 PC용 웹사이트, 모바일용 웹사이트, 그리고 아이폰과 안드로이드용 앱과 서버까지 개발해야 하게 되었습니다.

먼저 PC용 웹사이트, 접속이 들어오면 데이터베이스에서 정보들을 찾아서 그걸로 HTML, CSS, Javascript로 랜더링하고, 이걸 PC 브라우저에 보내줍니다.
반응형으로 만들지 않는다는 가정 하에 모바일용 사이트도 이 과정을 다 프로그래밍 해야하죠.

안드로이드나 IOS의 네이티브 앱은 앱 개발자들이 만든 앱에서 서버에 정보를 요청하면
데이터베이스에서 정보들을 찾아서 앱으로 전송하고
앱에서는 이 정보들을 받아서 안드로이드나 iOS 방식으로 폰 화면에 띄워주게 됩니다.
... 이것들을 다 해야하는 겁니다.
사이트 하나만 만들면 되던 예전보다 개발 인력이 배로 들겠죠?
여기서 겹치는 부분들을 최소화하고 업무를 좀 더 깔끔하게 분할할 수는 없을까요?

안드로이드와 iOS에는 자체적인 소프트웨어와 시스템이 있어서 서버로부터 데이터만 전송받으면 화면이 보여질 수 있어요.
웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도 그걸 브라우저에서 HTML, CSS, JS로 랜더링해낼 수 있다면,
이제 서버는 어디서 정보를 요청하든 동일한 작업을 수행해서 데이터를 전송하면 될겁니다.
서버 개발자가 그런 일에만 집중할 수 있게 되는 겁니다.
웹사이트 개발은 이렇게 사용자 컴퓨터의 브라우저에서 돌아가는 프론트앤드와 서버에서 돌아가는 백앤드로 분리하는 거에요.

브라우저에서도 동작하는 자바스크립트란 언어로 강력한 라이브러리나 프레임워크를 만들면 이런게 가능하지 않을까요?
바로 그게 Angular, React, Vue 같은 SPA 프레임워크입니다.
정적웹은 진열된 웹페이지를 들고가는 편의점, 동적웹은 그때그때 요리해주는 페이지라면,
SPA, Single Page Application은 종업원들이 음식과 음식재료를 가져다주면
손님이 직접 요리해먹는 음식점이라 생각하시면 됩니다.

서버는 정적 웹처럼 HTML, CSS, JS로된 코드들을 브라우저로 전송합니다.
이때 전달해주는 JS에 포함된 코드는 기가막힌 기능을 수행하는데요,
주어진 데이터에 따라 HTML 웹페이지를 랜더링해냅니다.
기존의 동적웹에서 서버가하던 일을 이제는 사용자 컴퓨터에서 브라우저가 해내는 거죠.
SPA는 서버에서 데이터를 받아와야할 때마다 요청을 보내서 반환된 데이터로 사이트 내용을 갱신합니다.
이렇게되면 사이트에서 뭘 할 때마다 새로 접속하지 않고
한번 로드된 화면에서 많은 기능을 수행할 수 있겠죠.
그래서 Single Page Application이라고 하는 겁니다.

이러한 Angular, Vue, React는 사용자의 컴퓨터에서 실행됩니다.
기존의 MVC 웹페이지들은 서버가 요리까지 해서 전달해줬지만,
이제는 브라우저한테 '자 여기 이렇게 레시피를 줄 테니까 필요한 재료들만 따로 요청해서 너가 페이지를 요리해'하고 역할을 맡겨버린 거에요.
이렇게하면 전보다 사이트가 훨씬 효율적으로 동작하는 모습을 볼 수 있습니다.

angular, vue, react 모두 자바스크립트가아닌 angular, vue, react라는 특수 형식이라 브라우저에서는 이런 코드들이 바로 돌아가진 않습니다.
코딩을 다 하고 이제 배포할 결과물로 빌드하면, 브라우저에서 읽힐 수 있는 자바스크립트 파일로 컴파일이 되는 겁니다.
이걸 HTML, CSS 파일들과 패키징해서 서버에 진열하면 되는 겁니다.
브라우저는 이런 진열된 패키지를 받아간 다음, 이 레시피데로 데이터를 요청하고, 화면을 렌더링해서 모니터에 띄워주게 되는 겁니다.

Vue - Evan You라는 개인이 만듦
Angular - Google
React - Facebook

Vue는 코드가 깔끔하고 배우기 쉽다는 특성 때문에 다른 둘에 비해 후발주자임에도 불구하고 빠른 속도로 성장하고 있습니다.
React는 Facebook에서 만들었는데, 막강한 커뮤니티와 자료들을 갖추고 있죠.
다른 설계들에 잘 녹아들어가기 때문에 유연함을 요하는 서비스들에 권장됩니다.
Google에서 만든 Angular는 TypeScript라는 Javascript를 보완한 언어로 매우 안정적이고 탄탄한 프론트앤드 앱을 만들 수 있습니다.
대신 상대적으로 무겁고 배우기 어렵다는 단점이 있습니다.
Angular는 Framework의 구조가 뚜렷하다면, 나머지 둘, 특히 React는 라이브러리의 특성을 갖는다는 차이가 있습니다.

Angular, React, Vue가 뭔가요?