Vue.js 실습 part.1 (React, Vue, Angular 소개)

frontend란 backend의 반대되는 말로
한 페이지를 웹브라우져 상에 표시하기 위해서는 데이터베이스 등에서 데이터를 가져오고 그 가져온 데이터를 보기 쉽도록 화면에 표현을 해주어야하는데,
데이터를 가져오는부분을 백엔드, 표현해주는부분을 프론트엔드라고 생각을 하면 편하다.

예전의 프로그래밍의 프론트엔드로는 서블릿언어 쪽에서 jsp나 자바스크립트, jquery 등을 많이 사용하였는데,
현재는 다양하게 많은 언어가 자바스크립트 기반으로 생겨났고,
그들중 가장 많이 사용하는 프론트엔드 프레임워크 top3는 현시점에서는 다음과 같다.

• React
• Vue
• angular

이미지는 다음과 같다.

특징은 SPA개발을 위한 프레임 워크로 복잡한 페이지 개발에 유용하다.
SPA 란 Single Page Application의 약자로
단일페이지 내에서 특정 부분만 업데이트 및 로딩을 하는 기술로 빠른 페이지 변환과 적은 트래픽을 사용하는것이 장점이다.
이들의 각각 장단점을 살펴보도록 하겠다.

React

라이브러리이지만 컴포넌트를 사용할 경우엔 프레임워크 규칙을 지켜야한다.
장점은 virtual dom이다. 트리를 추상화 하여 자바스크립트 객체로 만들고 변경되는 부분을 이 virtual dom에서 처리를 하여 성능을 높였다.

Vue

Vue.js라고도 쓰며 오픈소스 자바스크립트 프레임워크이다.
자바스크립트의 기본 스타일을 적용하고 있어서 학습하기가 쉬운 편이다.

Angular

현재는 자바스크립트보다 그의 상위버전이며 정적으로 처리가 되는 타입스크립트가 많이 사용되는데 이 타입스크립트를 기반으로 만들어져서 컴파일 시간은 좀더 걸릴순 있지만 더욱 안정적이다.
필요한 도구들을 많이 모아놓아서 all in one이라고 많이 알려져있으며 그러므로 배우기는 어렵다.
하지만 안정성이 큰 장점이라 큰 프로젝트에 적합하다.

이들중에 우리는 Vue.js에 대해서 실습을 해보도록 할것이다.

프론트엔드 개발자는 아니지만 간간히 공부한 것으로 작성하는 포스팅이기에 부족함이 있더라도 기초를 배우기에는 괜찮은 포스팅이 될것이라 믿으며 다음 포스팅에서부터 간단하게 vue를 시작하기 위한 실습을 진행하도록 할 것이다.

그전에 아래 참고 포스팅을 참고하여 vscode 설치까지는 미리 끝내두면 도움이 될것이다.

---

참고 포스팅

https://thenicesj.tistory.com/13

[flutter setting in mac] vscode설치

https://thenicesj.tistory.com/42

프레임워크 vs 라이브러리