Vue.js 입문

728x90

시작하기 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

v2.ko.vuejs.org

Vue.js는 웹 프론트엔드 프레임워크이다.

- 컴포넌트 기의 SPA(Single Page Application)을 구축할 수 있게 해주는 프레임워크

컴포넌트(Component)

-웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI dyth

- 재사용 가능하도록 구조화 한 것

SPA Single Page Applicaion)

- 단일 페이지 어플리케이션

-하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태

- 빠른 페이지 변환

- 적은 트레픽 양

React랑 Vue는 공통점을 공유함

-가상 DOM을 활용한다.

-반응적이고 조합 가능한 컴포넌트를 제공한다.

-코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.

velog

velog.io

가상 Dom의 이해

* DOM이란?

-Document Object Model

-다큐먼트(웹페이지)를 객체로 표현하는 모델

-javascript가 이용할 수 잇는 (메모리에 보관할 수 있는) 객체

-즉, DOM은 HTML과 스크립트언어를 서로 연결해주는 역할

* Virtual Dom 이 뭐임?

Vue.js 를 이용하려면 Virtual DOM이 필요한데 기존 DOM방식은 구조를 하나하나 체크하고 변경하는 방식이 너무 복잡해서 이걸 단순화/ 자동화 시키려고 만든게 V-Dom이다.

예를 들면 기존의 DOM방식은 친구를 불러올려고 해도 어느나라, 시, 구 , 동 거리와 등등 모두 알아야만 친구를 불러올 수 있었다. 여러 내용을 동시에 다루고 바꿔치기를 해야해서 다 기억을 해야하는데 이걸 '주소록' 처럼 간단하게 정리하고

알게 쉽게 만드는 역할이 Virtual DOM이다.

Vue.js 는 크게 3가지 구성으로 나눠져있다.

Vuex - 가상 돔이라 불리는 것을 관리하는 매니저 역할이다. 앱이나 웹을 이루는 개별 요소들의 정보가 변경되는지를 확인하고 해당 값들을 업데이트 시켜주는 역할을 한다.
Vue CLI - 프로젝트를 자동으로 생성/세팅해주는 자동화 역할을 한다. 웹개발의
Vue Router - 개별적인 vuex가 돌아다니며 확인을 해야할 V-Dom들을 향해 이동할 통로의 역할을 한다. Vuex상에 개별 컴포넌트들을 올려놓고 그걸 Router를 통해 간단히 끌어다가 다른 곳에서 반복적으로 사용할 수 있다. Vuex가 할일을 다 할 수 있도록 통로 역할을 하면서도 -이곳으로 이동하시오- 같은 '표지판 역할'도 한다고 보면 된다.

728x90

INDUSTRY BABY