Vue.js 의 정의와 구조파악

Vue.js 란?

"웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크"

웹 프론트엔드 시장에서 가장 많이 쓰이는 스택은 현재, React, Angular, Vue.js 순입니다. 후발주자로 Svelte 가 빠르게 치고 올라오고 있지만, 아직 React 나 Vue.js 를 대체할 수준까진 아닙니다.

Vue.js 를 배워야겠다고 확신했다면, 왜 배워야하는지 알아야 합니다.

그건 바로 접근성과 낮은 러닝커브( Learning curve )입니다.

웹 개발을 처음 시작한 사람이나 혹은 초보자들에게 가장 쉽게 접근할 수 있고, 쉽게 입문할 수 있기 때문입니다.

뿐만 아니라, 타 프론트엔드 툴과 견주어도 뒤쳐지지 않는 퍼포먼스를 낼 수 있다는 장점이 있습니다.

 

React vs Vue

( 라이브러리 vs 프레임워크 )

리액트와 차별되는 점은 React 는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 표현하고 있습니다. 라이브러리는 개발자들이 개발을 최소한으로 편리하게 하기 위해 만든 모듈인데요.

가구에 빗대어 표현하면, 라이브러리는 어떤 책상을 만드는 데 필요한 재료들이고, 프레임워크는 이러한 가구들이 미리 조립이 되어 있는 상태를 말합니다. 그래서 그 가구들을 활용해 리모델링을 이루죠.

이처럼 프레임워크느 라이브러리의 집합체, 더 큰 개념이라고 이해할 수 있습니다.

따라서 라이브러리 같은 경우에는 기능상의 통제권이 개발자 즉, 사용자게에 있는 반면, 프레임워크는 통제권이 프레임워크 자체에 있습니다.

때문에 프레임 워크는 큼직한 기능들이 미리 세팅이 되어 있는 완성형 도구라고 생각할 수 있습니다.

그러므로 Vue.js 는 기타 개발도구들보다 자유도는 비교적 낮을 순 있지만, 협업에 있어 약속된 기능들을 사용하기 때문에 코드가 명시적이라는 장점이 있습니다.

 

 

 

Vue.js 의 구조파악

Vue.js 의 구조는 딱 2가지만 명심하면 됩니다. 

 

1. SPA 구조

첫 번재로는 SPA 구조입니다.

SPA 구조는 Single Page Aplication 의 약자로 말 그대로 하나의 페이지에서 유저가 원하는 정보만 보여주는 방식입니다.

간단하게 설명하면, 페이지를 구성하는 HTML 파일이 하나만 있다는 것을 의미합니다. 그래서 이 HTML 파일 안에서 사용자가 요청하는 페이지의 정보만 불러오는 구조인거죠.

즉, 하나의 HTML 파일의 body 태그 안에 보여지는 것들이 유저의 요청에 의해 바꿔치기 되는 형식이라고 보면 됩니다.

 

 

2. SFC 구조

두 번째로는 SFC 구조입니다.

Vue.js 파일 확장명은 .vue 입니다. 그리고 이 파일 안에서는 HTML, CSS JavaScript, 이 세 가지 언어가 관리됩니다. 그래서 이 세 가지 언어를 하나의 컴포넌트 안에서 관리가 된다고 해 Single File Component 라고 부릅니다.