Vue.js Lecture Note

# Event, Instance, Component, Axios

# Event

Addeventlistener()는 onclick()과 비교했을 때 DOM이 많아졌을 때, 여러 개의 이벤트 타입들을 쉽게 바인딩할 수 있기 떄문에 사용한다.

<button id="btn" v-on:click="logText">click me</button>

이처럼 Vue에서는 v-on을 사용하여 버튼의 역할에 대해서 알기가 쉽다.

MVVM

즉, 오브젝트가 변경되었을 때, Vue가 알아서 처리를 해주는 것이 용이한 부분이다.

Vue는 MVVM 패턴의 프레임워크이다.

  • Model : 자바 스크립트 객체
  • View : DOM
  • ViewModel : 뷰와 모델을 연결하고 자동으로 바인딩하여 양방향 통신을 가능하게 함. 데이터가 변경되었을 때 즉시 View에 반영하도록 한다. 뷰모델이 없다면 제이쿼리 등을 이용하여 모델과 뷰를 직접 연결해주어야 하지만, 이것을 대신 수행해준다.

# 카멜케이스와 파스칼케이스

// 일반함수 - 카멜케이스
function sum(a, b) {
	return a + b;
}
console.log(sum(10, 20));

// 생성자함수 - 파스칼케이스
function Developer(name) {
	this.name = 'Sarah';
}
var sarah = new Developer();
console.log(sarah);

카멜케이스는 appleBananaPineapple 처럼 첫글자를 소문자로, 그 뒤에 구분되는 단어들의 첫글자를 대문자로 한다.

파스칼케이스는 AppleBananaPineapple 처럼 모든 구분 단어의 첫글자를 대문자로 한다.

# Vue Instance

인스턴스란 object를 생성자로 만든 것이다. Vue 3버전에서는 proxy로 object를 관리한다.

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

Vue 공식문서의 el 설명

# Vue Component

디버깅이 쉽고 재사용률을 높여준다.

전역 component는 어떤 component가 있는지 한눈에 보기 어렵기 때문에, 지역 component로 선언을 많이 한다.

일반적으로 컴포넌트의 template을 사용해서 tag를 정의하지만, 중복되는 경우에 HOC(High Order Component)를 사용한다. (render function과 jsx도 사용 가능하다)

Vue에서 권고되는 방법은 mixins 이나 scoped slot(data 중복시 사용)

참고로 React에서는 (function => function => ) 와 같은 형식으로 사용

# Vue Component 간 통신

React는 data를 아래 component에서 위 component로 올릴 수 없다.

Vue는 아래에서 위, 위에서 아래 모두 가능

  • 상위 -> 하위 : props 전달
  • 하위 -> 상위 : 이벤트 발생

Props (상위에서 하위로 data 보내기) : v-bind

Appheader.title 과 같은 형식으로 vue는 참조할 수 없다. 따라서 props를 사용한다.

<app-header v-bind:프롭스 속성이름="상위 컴포넌트의 데이터 이름"></app-header>
<app-header v-bind:propsdata="title"></app-header>

components : {
	// '컴포넌트 이름' : '컴포넌트 내용'
    'app-header' : {
    	template : '<h1> {{propsdata}} </h1>',
        props: ['propsdata']
        }
}

Event (하위에서 상위로 data 보내기) : v-on

Vue.component('app-contents', {
	template: `      
        	<main>             
        		전역 컴포넌트        
            	<button v-on:click="sendEvent">변경</button>       
            </main>`,
	method: {
		sendEvent: function() {
			this.$emit('change'); //아래서 위로 올릴 때 $emit 사용
		},
	},
});

<app-contents
	v-on:하위
	컴포넌트의
	이벤트이름="상위 컴포넌트의 메서드 이름"
></app-contents>

Vue.component('sibling-component', {
	props: ['propsdata'],
	template: `    
    	<div>     
        	{{ propsdata }}      
            <button> click me </button>   
            </div>`,
});

//vue component에는 최상위에 하나의 tag만 있어야함(<div>)
//이러한 문제로 프론트가 컴포넌트 설계하고, html,css 퍼블리셔에게 요청

이벤트 표기법으로는 케밥 표기법을 많이 쓴다. change-message 혹은 change:message와 같은 식으로 쓴다.

v-on:change:message === @change:message

# Vue와 React 비교

Vue

  • 화면 렌더링 라이브러리 (vue.js 코어 라이브러리)
  • 페이지 전환 라이브러리 Vue Router
  • 여러 컴포넌트의 데이터 관리 라이브러리 Vuex
  • 프로젝트 생성 도구 Vue CLI
  • 테스팅 도구 Vue Test Utils
  • 과거에는 HTTP 통신 라이브러리 Vue Resource 사용했으나 -> 현재는 jQuery의 ajax / axios / request 등 다양하게 씀

React

  • 화면 렌더링 라이브러리 (코어)
  • 여러 컴포넌트의 데이터 관리 라이브러리 1 Redux
  • 여러 컴포넌트의 데이터 관리 라이브러리 2 Mobx
  • React Router
  • React CLI (Create React App)

# 차이점

Model to view binding 방식에서 크게 차이가 난다. Model 변경 시 필요한 re-rendering을

  • Vue : 프레임워크가 알아서 해주는 편
  • React : 개발자가 해야 하는 편

따라서 Vue 코드가 더 간결하다. 자세히 말하자면 Vue에서는

  • React의 shouldComponentUpdate 가 필요 없음
  • Immutable update가 필요 없음

Vue 프레임워크가 알아서 해주지 않는 경우가 있는데, 배열의 각 element가 변경될 때이다. 배열의 각 element 별로 getter, setter 함수가 등록되지 않기 떄문에 이러한 경우 개발자가 개입을 해야한다.

또한 immutable update의 장점도 있기 때문에, 어느 한 프레임워크가 더 좋다고 단정지을 수는 없다.

# Axios

  • Axios는 promise based이다.
new Vue({
	el: '#app',
	data: {
		users: [],
		roomId: 42,
	},
	methods: {
		getData: function() {
			var vm = this;
			axios
				.get('https://jsonplaceholder.typicode.com/users/')
				.then(function(response) {
					console.log(response.data);
					vm.users = response.data;
				});
		},
		postData() {
			axios.post(
				'https://examplepostapi.com/rooms/',
				{
					roomid: this.roomId, // POST일 때는 url 뒤에 object를 넣어 BODY에 data를 넣어 줄 수 있음
				},
				{
					headers: {
						Authorization: `Token ${localStorage.getItem('access_token')}`,
					}, // 이와 같이 BODY data 다음에 headers options을 설정할 수 있음
				},
			);
		},
	},
});

Callback 함수안의 this는

var vm = this;

처럼 선언하지 않으면, this가 window(브라우저)를 가리킨다.

# Axios로 API 요청시 발생될 수 있는 문제들

  • Axios 사용시 기본 header가 아닌 경우
    • CORS 정책에 의해 제한되는 것임. 프록시 서버 설정 혹은 실제 서버 프로그래밍을 통해서 호출할 수 있다.
  • Mixed Content
    • https로 통신하다가 http로 연결되는 통신이 중간에 발생하면 brower에서 block.
    • 호출되는 서버를 SSL 구성함으로써 해결가능. (http -> https)

← Directives, npm, Vue CLI, Component →