[알쓸 IT] Angular, React, Vue

📢 개요

강력한 MVC 웹 프레임워크들이 등장하고 발전하면서 우리는 빠르고 편리하게 웹사이트를 개발할 수 있게 되었습니다.

하지만 기술이 발달해서 어떤 필요를 충족하고 나면, 항상 또 다른 수요와 해결과제가 생기게 되죠 ?

기존 MVC 웹이 가졌던 아쉬움들 중에서 2가지 예시를 보면

1. 오래된 웹사이트일수록, 이것저것 많이 있는 웹사이트에서 한 게시글을 읽고, 내용이 마음에 들어 "좋아요"를 눌렀다.

👉 이거 하나 눌러서, 전체 좋아요 수가 증가하는 것을 업데이트하려고, 화면이 "깜빡"하면서 페이지가 새로 로딩된다.

게시물 페이지 접근시

 

게시물 페이지에 좋아요를 반영한 경우

좋아요를 눌렀을 경우, 위에 두 그림같은 과정이 매번 좋아요 버튼을 누를경우 반복될 것입니다. 

바뀐건 좋아요 하나뿐인데, 위에 모든 작업을 매번 새로하다보니, 굉장히 비효율적이지요.

사이트에 로드할 정보들이나 이미지가 많으면, 데이터 낭비도 심할 것입니다.

결과적으로, 이건 옛날 방식 !

2. 옛날에는, PC용 웹사이트 하나만 만들면 되었지만, 요즘같은 모바일 시대에서는, 앱이나 스마트폰 브라우저로 서비스들을 이용하면서, 이제는 어느정도 갖춰진 사업을 하는 회사에서는, PC용 웹사이트, 모바일용 사이트,안드로이드,ios 서버까지 개발하게 되었습니다.

👉 반응형 웹사이트를 만든것이 아니라는 전제하에, PC나 모바일 페이지에 접속하는 방식은 위 그림과 비슷한 과정을 보이며, 안드로이드나 ios에서는 자체적인 OS환경에서 페이지가 로딩되도록, 따로 프로그래밍을 해야합니다.

사이트 하나만 만들면 되던 예전보다, 개발 인력이 배로 들것입니다.

여기서, 겹치는 부분을 최소화하고, 업무를 좀 더 깔끔하게 분할할 수는 없을까요 ?

예를들어, 안드로이드와 ios에는 자체적인 SW와 시스템이 있어서, 서버로부터 데이터만 전송받으면 화면이 보여질 수 있으니, 웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도, 그걸 서버가 아닌 "사용자의 브라우저"에서 HTML/CSS/JS로 렌더링해낼 수 있다면, 서버는 어디서 정보를 요청하든, 동일한 작업을 수행해서 데이터만 전송하면 될 것 입니다.

사용자 컴퓨터의 브라우저에서 돌아가는 👉 프론트엔트(Front_End)
서버에서 돌아가는 👉 백앤드(Back_End)

로 철저하게 분리하는 것이지요.

 

📢 Angular, React, Vue 는 SPA Framework

브라우저에서도 동작하는 "JavaScript" 로 강력한 라이브러리나 프레임워크를 만든 것이 바로

👉 Angular, React, Vue 같은 "SPA 프레임워크" 입니다.

SPA = Single Page Application 이라고 하는데요.

비유를 하면, 종업원들이 고기와 쌈재료를 가져다주면, 주방장이 아닌, 손님이 직접 불판에 구워먹는 고기집이라고 생각하면 됩니다.

게시물 페이지 SPA 방식

이렇게 되면 사이트에서 뭘 할 때마다 새로 접속하지 않고, 한 번 로드된 화면에서 많은 기능을 수행 할 수 있게 됩니다.

그래서 Single Page Application, SPA 라고 불리는 것입니다.

 

📢 마무리

왼쪽에서부터 React / Angular / Vue

Angular, React, Vue 에 대한 자세한  설명까지하는것은 이 글의 취지는 아니어서 생략하겠습니다.

다만, 대표적인 이 3가지의 SPA 프레임워크는 방식들은 조금씩 다르지만, 기본 원리와 아이디어는 유사합니다.

특징만 간단히 말하자면

• Vue : 코드가 깔끔하고 배우기 쉽다. Angular, React에 비해 후발주자지만 빠르게 성장하고 있습니다.
• React : Facebook에서 만들었는데, 막강한 커뮤니티와 자료들을 갖추고 있습니다. 다른 서비스에 잘 녹아들어 유연함을 요하는 서비스들에 권장됩니다.
• Angular : Google에서 만들었고, TypeScript라는, JavaScript를 보완한 언어로, 매우 안정적이고 탄탄한 프론트엔드 앱을 만들 수 있다고 합니다. 대신 상대적으로 무겁고 배우기 어렵다고 하네요.

 

 

문제나 잘못되었거나 미흡한것이 있다면 알려주세요.🙏

---