Angular, React, Vue가 무엇인가요?

이것들은 SPA 프론트엔드 프레임워크입니다.

 

질문: 왜 Augular, React, Vue가 나오게 되었나요?

강력한 MVC 웹 프레임워크들이 등장하고 발전하면서 우리는 편리하고 빠르게 웹사이트를 개발할 수 있게 되었습니다. 하지만 기술이 발달해서 어떤 필요를 충족하고 나면 또 다른 수요와 해결과제가 생기기 마련입니다. 

기존 MVC 웹이 가졌던 아쉬움들 중에 두가지를 살펴보겠습니다.

 

첫번째, 오래된 웹사이트일수록 이런 사용자 경험이 많을거에요. 이것저것 많이 있는 웹사이트에서 한 게시글을 읽고 내용이 마음에 들어서 '좋아요'를 눌렀는데 '좋아요' 하나 업데이트 한다고 화면이 깜빡하면서 화면전체가 새로 로딩되는 현상을 많이 보셨을 겁니다. 이런 현상이 일어나는 이유는 일단 서버입장을 봐야합니다.

사용자가 이 게시물의 주소로 접속해왔을 때 서버는 '이 사용자가 이 게시판의 이 게시물을 읽는구나' 확인하고 먼저 게시글을 데이터베이스에서 불러오고 역시 데이터베이스에서 좋아요 수와 댓글들을, 그리고 이전글과 다음글의 제목과 링크들을 불러온 다음, 사이트에 기볹거으로 보여지는 다른 내용들과 함께 이데이터들을 HTML, CSS, Javascript로 작성해서 사용자의 브라우저에 보내줘야합니다. 사용자가 그 화면을 보고 이글에 '좋아요'를 누르면 서버는 또 '이 사용자가 이 게시판의 이 게시물에 좋아요를 했구나' 하고 인식한 다음 해당 게시물에 사용자의 아이디로 좋아요를 추가하고 다시 데이터베이스에서 이 게시물의 내용, 좋아요들과 댓글들, 이전글과 다음글을 죄다 읽은 다음 이것들을 나머지내용들과 함께 HTML, CSS, Javascript로 작성해서 브라우저로 전송해주는겁니다. 바뀐건 고작 '좋아요' 버튼 하나뿐인데, 이거 하나 적용하려고 이 모든 작업을 처음부터 다시 해야하는겁니다. 듣기만해도 매우 비효율적이죠?

사이트에 로드할 정보들이나 이미지가 많으면 데이터 낭비도 심할겁니다. 옛날에는 서버와 통신해서 사이트 화면에 뭔가 변화를 주려면 이렇게 페이지를 통째로 다시 로드해야했습니다. 다행이 ajax라는 기술이 나온 이후로는 http 통신으로 데이터를 전송하고 결과를 받아와서 사이트의 '좋아요' 버튼 부분을 변경해라 하고 자바스크립트로 명령을 줄 수 있게 되었습니다. 하지만, 또 단점이 있는데 대신 이걸 일일이 프로그래밍해야한다는 겁니다. 

 

 

두번째, 예전에는 PC용 웹사이트 하나만 만들면 되었지만 모바일 시대가 열리고, 앱이나 스마트폰 브라우저로 서비스들이 이용되기 시작하면서 이제는 어느정도 갖춰진 사업을 하는 회사에서는 개발자들이 PC용 사이트, 모바일용 사이트, 그리고 아이폰과 안드로이드용 앱과 서버까지 개발하게 되었습니다. 반응형으로 만들지 않는다는 가정하에 예시를 들겠습니다. 접속이 들어오면 데이터베이스에서 정보들을 찾아서 그걸로 HTML, CSS, Javascript로 렌더링하고 이걸 PC 브라우저에 보내줍니다. 모바일용 사이트도 이 과정을 다 프로그래밍 해야하는겁니다. 안드로이드나 IOS는 앱 개발자들이 만든 앱에서 서버에 정보를 요청하면 데이터베이스에서 정보를 찾아서 앱으로 전송하고 앱에서는 이 정보들을 받아서 안드로이드나 IOS의 방식으로 폰화면을 띄어주게 됩니다.

그래서 사이트 하나만 만들려면 되던 예전보다는 개발이 배로 늘게 되는겁니다. 그래서 여기서 겹치는 부분들을 최소화하고 업무를 좀 더 깔금하게 분할 할 수 없을까 생각을 하게 되었습니다.

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

 

브라우저에서도 동작하는 이 자바스크립트란 언어로  강력한 라이브러리와 프레임워크를 만들면 가능하지 않을까요?

바로 그게 Angular, React, Vue 같은 SPA 프레임워크 입니다.

 

예전에 쿼리셀럭터나 jquery로 일일이 화면 요소들을 변경해주지 않아도 되는겁니다. 기존에 MVC에서는 서버가 최종 결과물까지 요리해서 보내줬지만, 이제 브라우저한테 '자 여기 이렇게 레시피를 줄테니까 필요한 재료들만 따로 요청해서 너가 페이지를 요리해내' 하고 역할을 맡겨버리는겁니다. 서버에서는 이것들을 받아서 데이터베이스에 입력합니다.

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

 

 

Vue.js 특징

다른둘에 비해 후발주자임에도 불구하고 사용하고 배우기가 너무 쉽습니다. 빠른속도로 성장하고 있습니다.

 

 

 

React 특징

페이스북에서 만들었는데 막강한 커뮤니티와 자료들을 갖추고 있습니다. 다른 설꼐들에 잘 녹아들기 때문에 유연함을 요하는 서비스들에 권장됩니다. 

 

 

 

Angular 특징

구글에서 만들었는데 TypeScript라는 Javascript를 보완한 언어로 매우 안정적이고 탄탄한 프론트엔드 앱을 만들수 있습니다. 대신 상대적으로 무겁고 배우기 어렵다는 단점이 있습니다.

 

 

 

Angular는 Framework의 구조가 뚜렷하다면, 나머지 둘, 특히 React는 라이브러리의 특성을 갖는다는 차이가 있습니다.