Vue.js 강의노트 04. [Event bus, 라이프사이클, ES6]

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/04.html

Event Bus, Life Cycle, ES6 | Vuejs Lecture Note

---

component / instance option 순서

 

권고되는 순서이다.

https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended

Style Guide — Vue.js

---

다른 component로 값을 보내는 방법

 

이벤트 명이 같으면 안된다.

 

1. event + props

일반적으로는 다른 컴포넌트에 값을 보내줄 때

-> 위쪽 컴포넌트(ex> root)에 값을 올린 후에 다시 내려줘야함

 

2. event bus

src 밑에 utils 폴더 -> bus.js 생성

export var bus = new Vue(); // export : 다른 곳에서 쓰기 위함

import { bus } from '../utils/bus' // ctrl 클릭하면 그 파일로 갈 수 있다

 

- this.$emit('...') : 밑에서 위로 올려보낼 때 사용 (이벤트 트리거)

removeAll: function() {
            localStorage.clear();
            this.$emit('remove-all'); // event bus -> 컴포넌트간 data 전달 가능 
            bus.$emit('remove-all');
        },

beforeMount: function() {
        bus.$on('remove-all'); //이벤트를 받기 위함
}

위 방식은 기본 최상위 컴포넌트인 root로 가는 것이 아니라 외부의 root라는 bus를 통해서 data를 전달하는 방식이다.

- 복잡해질수록 나중에 tracking하기가 어렵다. (규칙에 의한 방식이 아니라, 일종의 편법이기 때문)

- 따라서 위 방식을 팀 프로젝트 내에서 쓰려면 코딩 컨벤션을 따라야 한다. 

- 대개는 event로 올리고, props로 내리는 방법을 채택하고, 이 계층이 깊어지면 Vuex를 채택한다.

 

beforeDestroy: function() { // event를 제거할 때 
        bus.$off('remove-all', this.removeItems)
}

- $on으로 event를 생성한 이후에, event queue에 쌓이기 때문에, $off로 제거하는 것이 필요하다.

---

vue project 디버깅

 

1. 디버깅 할때 어떤 컴포넌트인지 확인한다.

(ex>

found in

---> <TodoList> at src/components/TodoList.vue

       <App> at src/App.vue

         <Root>

)

2. 큰따옴표 "" 안에 어떤 item인지 확인한다. (ex> "todoItems")

---

props 작성 방식

 

vue의 event bus를 사용할 때에 app에서 data를 내려 보내기 위해 props 사용

 

1. 

props: ['list']

2.

props: {
    list: Array
}

---

v-on 이벤트 작성 방식

 

<todo-footer v-on:clear="todoItems = []"></todo-footer>

이것도 가능하지만, 유지보수를 위해 method로

this.todoItems = [];
localStorage.clear();

이렇게 작성해주는 것이 좋음

 

vue.js Event Bus에 대해 잘 정리된 글이 있어 공유합니다. https://jsdev.kr/t/vue-js-event-bus/2926

 

- 리스트의 값이 바뀌고 화면이 바로 바뀌는 것을 reactivity라고 말한다.

---

자바스크립트 for문 문법

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47

 

1.

for (var i =0 ; i < arr.length ; i ++){
	console.log(arr[i]);
}

2.

arr.forEach(function(value,index){
	console.log(value, indexedDB);
});

3.

for (var key in arr) {
	console.log(key, arr[key]);
}

 

+ Vue에서는 이렇게 쓴다.

<li v-for="(item, index) in list" :key="index">

- key는 unique한 값 (key는 id나 index값을 주로 사용함)

---

event, emit, payload

 

1.

this.$emit('add:todo', value); // 동작: 대상

2.

payload : 인자

this.$emit('remove-each', item, index); // payload의 순서대로 들어감

payload의 순서대로 들어갔음을 알 수 있다.

 

---

vue 파일에서 style 적용

 

<template>
  <h1>Todo App</h1>
</template>

<style scoped>
h1 {
  color: blue;
}
</style>

- style에 scoped 속성 추가하면 그 component의 file에만 적용되는 스타일이 된다.

---

Mounted

 

template이 string에서 tag로 변경되는 시점이다.

export default {
  //vcrea
  created() { // document 생성 x
    var h1 = document.querySelector('h1');
    console.log('created', h1);
  },
  //vbm
  beforeMount() { // document 생성 x 
    var h1 = document.querySelector('h1');
    console.log('before mount', h1);
  },
  //vm
  mounted() { // template가 실제 dom에 있지 않고 string 상태에서, mounted가 되어야 tag로 변환된다.
    var h1 = document.querySelector('h1');
    console.log('mounted', h1);
  },
};
</script>

created-beforeMount,Mounted 순서로 뜨는 것을 볼 수 있다.

---

form tag

 

form 태그는 submit 되면 새로고침이 되는 특징이 있다.

-> 이것을 막기 위해서

event.preventDefault();

혹은

<form v-on:submit.prevent="submitForm">

이런 처리들을 해줘야한다.

 

이와 비슷한 event modifiers에는 prevent를 포함해 6가지 종류가 있다.

https://vuejs.org/v2/guide/events.html#Event-Modifiers

---

Babel

 

최신 JS 문법(ES6 이상)이 여러 브라우저에서 돌아갈 수 있게 해주는 것이 Babel이다.

https://babeljs.io/

Babel을 쓰는 이유는 IE 때문임을 알 수 있다.

---

자바스크립트 최신문법 (ES6)

 

1. destructuring

var {name, id} = data;

 

2. 변수 선언

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

let a = 2 // 한 번 선언한 것은 다시 선언 할 수 없다.

const c = 20 // const도 마찬가지

 

3. for문

JS는 ES6 이전에 var 선언으로 마지막 값에 접근이 가능한 타 언어 개발자들이 기겁할만한 문제가 있었지만,

let을 통해서 해당 문제를 해결하였음.

---

화살표 함수

 

arr.forEach((value, index) => {
    console.log(value, index);
});

만약에 인자가 하나라면 괄호를 없애도 된다.

var sum = (a, b) => {
    return a + b;
};

 

 var vm = this;
    return axios
      .get('https://jsonplaceholder.typicode.com/posts/1')
      .then(data => {
        this.post = data.post; // 화살표 함수를 쓰면 vm이 아닌 this를 사용해도 된다.
      })

인스턴스 option 속성에는 화살표를 쓰면 안된다. 

-> 왜냐하면 바로 위의 this의 범위가 달라지기 때문이다.

fetchItems() { 
	… 
} 

-> 대신에 이런 식으로 작성이 가능하다.

---

Enhanced Object Literal

 

향상된 객체 리터럴(표기법): key와 value가 같아질 때 사용한다.

var obj = {
    num, // num: num,
};

-> vue의 component 정의에서도 예를 들어 TodoInput이 html에서는 todo-input으로 바뀌기 때문에 사용 가능하다. (대소문자 구별을 하지 않기 때문임)

---

import, export

 

- 값이나 변수가 나가는 곳에서 export var a

- 받는 곳에서 import {값 or 함수} from '가져오는 위치'

 

export default

-> 해당 파일에서 무조건 하나만 들고 오겠다면 default를 붙인다.

-> 이때는 무조건 하나만 들고 오기 때문에, import sum from '...' 처럼 { } 없이 들고 올 수 있다.