[Vue.js] 두 번째 정리 (비동기, non-blocking, computed, watch)

✔ 둘째 날, Vue Basics - 배운 내용 정리

• 콜백함수를 쓸 때는 화살표 함수를 사용한다.

• json-server의 paginate 기능 사용

• 배열 합치는 방법 3가지 👇

1. concat() 

2. spread 스프레드 :  arr3 = [...arr1, ...arr2] -> 스프레드가 가장 빠르고 효율적임

3. push와 spread 사용 : arr4= arr.push(...arr2)

 

• Vue instance 생애주기👇

[Vue Instance Lifecycle Hooks]

뷰 인스턴스는 created -> mounted -> updated -> destroyed 순으로 생성됐다가 소멸되는 생애주기를 갖는다.

 

• non-blocking 하게 동작하는 코드 두 가지 1. axios 2. setTimeout 둘다 비동기 처리에 해당.

 

✔ 동기와 비동기 / blocking, non-blocking 간단 정리

 

1. 동기(Synchronous) : 요청 즉시 응답의 결과가 동시에 일어나는 것, 함수 내부에 다른 함수 호출 시 함수의 결과를 호출한 쪽에서 처리한다.

2. 비동기(Asynchronous) : 요청과 결과가 동시에 일어나지 X,  함수 내부에 다른 함수 호출 시 함수의 결과를 호출한 쪽에서 처리하지 않는다.

e.g.) js의 axios와 setTimeout() 함수 모두 비동기 방식. 내부에 다른 함수 호출하여(콜백함수) 수행결과를 처리함

3. 블로킹(Blocking) : 수행결과가 끝날 때까지 제어권을 함수 자신이 가지고 있는다. 즉, 순차적으로 일을 수행하기 때문에 작업 하나가 끝나지 않으면 나머지 작업을 시작할 수 없다!

4. 논블로킹(non-blocking) : 호출되었을 때 자신을 호출한 쪽으로 제어권을 넘긴다. 즉, 우선순위에 따라 여러 가지 일을 병행할 수 있도록 해준다. 하나의 작업이 전체 작업 흐름을 막지 않는다!

 

> 보통 우리가 비동기적으로 처리한다는 말은 작업 수행이 논블로킹하다는 의미를 내포한다.

 

✔ computed 와 watch 차이

•  computed는 데이터를 create, update, delete 하지 않고 (데이터 변하지 않음) read(return)만 하고 싶을 때 사용한다. 즉, 데이터를 건들지 않고 무언가를 반환하고 싶을 때 사용하는 속성이다.

     computed : (

         안에 함수는 명사형으로 정의

      )

• computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행하여 캐싱된다. 따라서 데이터가 변경되지 않은 경우 호출되면 계산 과정없이 결과를 바로 반환해줄 수 있다.

• watch는 vue 인스턴스의 특정 프로퍼티가 변경되면 지정된 콜백함수를 실행하는 프로퍼티이다.

• computed로 구현 가능하다면 대부분의 경우 computed를 사용하는 것이 좋다.