티스토리 뷰

IT/vue.js

Vue.js란 무엇인가?

Stv 2024. 6. 30. 16:59

MVVM 패턴의 뷰모델(View Model) 레이어에 해당하는 화면(View)단 라이브러리

View : 사용자 화면
DOM : 해당 객체를 이용하여 자바스크립트 이용
DOM Listeners : 이벤트 청취
Model : 자바스크립트 특정 로직 발생
Data Bindings : 이벤트 발생하며 동작하고 화면에 반영

Vue의 핵심은 Reactivity

Vue Instance

인스턴트는 아래와 같이 생성할 수 있다.

new Vue();

인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔창에서 확인 가능

var vm = new Vue();
console.log(vm);

인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.

new Vue({
	el: ,
    template: ,
    data: ,
    methods: ,
    created: ,
    watch:
});

el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
template : 화면의 표시할 요소 (HTML, CSS등)
data : 뷰의 반응성 (Reactivity)가 반영된 데이터 속성
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
created : 뷰의 라이프 사키을과 관련된 속성
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

Vue Components

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다.
화면의 영역별로 구분해서 코드로 관리하고자 함.

// 전역 컴포넌트
        Vue.component('app-header', {
            template: '<h1>Header</h1>'
        });
        Vue.component('app-content', {
            template: '<div>content</div>'
        })

        new Vue({
            el:'#app',
            // 지역 컴포넌트 등록 방식
            components: {
                'app-footer': {
                    template: '<footer>footer</footer>'
                }
            }
        });

Components Communications

컴포넌트는 각각 고유한 데이터 유효 범위를 갖는다. 컴포넌트 간에 데이터를 주고 받기 위해선 위와 같은 규칙을 따라야한다.
- 상위에서 하위로는 데이터를 내려줌, 프롭스 속성
- 하위에서 상위로는 이벤트를 올려줌, 이벤트 발생

컴포넌트 통신 규칙이 필요한 이유
- Data의 흐름 추적에 용이하다.

Vue Router

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리
뷰 라우터 설치
- 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식, NPM방식 2가지가 있다.
  - CDN 방식
  - NPM 방식

<!-- CDN -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js">

-- NPM
npm install vue-router

뷰 라우터 등록
- 뷰 라우터를 설치하고 나면 라우터 인스턴스를 하나 생성하여 뷰 인스턴스에 등록

 var router = new VueRouter({
            
        });


        new Vue({
            router: router
        });

뷰 라우터 옵션
- routes : 라우팅 할 URL과 컴포넌트 값 지정
- mode : URL의 해쉬 값 제거 속성

ar router = new VueRouter({
			// 해쉬 제거
			mode : 'history',
            // 페이지의  라우팅 정보
            routes : [
                // 로그인 페이지
                {
                    // 페이지의 url
                    path: '/login',
                    // 해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                }
            ]
        });

라우터 뷰 : 브라우저 주소 창에서 URL이 변경되면, 앞에서 정의한 routes 속성에 따라 해당 컴포넌트가 화면에 뿌려진다. 이때 뿌려지는 지점이 템플릿의 <router-view>이다.

<div id="app">
        <router-link></router-link>
</div>

라우터 링크 일반적으로 웹 페이지에서 페이지 이동을 할 때는 사용자가 url을 쳐서 이동하지 않기 때문에, 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해줘야 하는데 바로 이부분이 <router-link>이다.

<router-link to="이동할 URL"></router-link>

Axios

뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)이다. Promise 기반의 HTTP 통신 라이버르리이며 상대적으로 다른 HTTP 통신 라이브러리에 비해 문서화가 잘되어 있고 API가 다양하다.
- javascript 비동기 처리 패턴
  - 1. callback
  - 2. promise
  - 3. promise + generator
  - 4. async + await
액시오스 설치
- CDN 방식
- NPM 방식

<!-- CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

-- NPM
npm isntall axios

Template

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.
- 데이터 바인딩 : 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.
- 디렉티브 : 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있다. 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있다.

<!-- 데이터 바인딩 -->
<div>{{ message }}</div>

new Vue({
	data : {
    	message: 'Hello Vue.js'
    }
});

<!-- 디렉티브 -->
<div>
	Hello <span v-if="show"></span>
</div>

new Vue({
	data : {
    	show : false
    }
});

Vue CLI

버전의 간단한 차이점
- [Vue CLI 2.x]
  - 명령어
    - vue init '프로젝트 템플릿 유형' '프로젝트 폴더 위치'
    - vue init webpack-simple' '프로젝트 폴더 위치'
  - 웹팩 설정 파일 : 노출 O
  - 프로젝트 구성 : 깃헙의 템플릿 다운로드
  - ES6 이해도 : 필요 X
- [Vue CLI 3.x]
  - 명령어
    - vue create '프로젝트 위치'
  - 웹팩 설정 파일 : 노출 X
  - 프로젝트 구성 : 플러그인 기반으로 기능 추가
  - ES6 이해도 : 필요 O
vue-cli-service serve
- 서버 실행 명령어 : npm run serve

티스토리 뷰

Vue.js란 무엇인가?

Vue Instance

Vue Components

Components Communications

Vue Router

Axios

Template

Vue CLI

티스토리툴바