10/22

Vue 인프런 강의 복습

Ref : https://www.inflearn.com/course/vuejs/

1. 보드 색상 변경

• branch : board/color

• commit : fbf7439

• Idea

  1. 색상 컴포넌트의 색상 클릭 시 api를 통해 보드의 배경색 데이터를 변경한다.
  2. body의 background-color 속성을 보드의 색상으로 변경한다.
  3. nav의 변경해서 dim처리 한다.
  4. 다시 홈 컴포넌트로 이동 시 body, nav의 색상을 기본 값으로 변경한다.
  5. 스토어를 통해서 로직 관리..?

• 자세한 로직

  1. 보드 수정 api 호출 => 데이터 수정
  2. 보드 fetch 함수 호출 => 수정된 데이터를 받아오고, 데이터의 bgColor를 통해서 스토어의 배경색 데이터 변경(보드 컴포넌트로 진입할때 배경색이 변경되어야 하므로)
  3. 보드 컴포넌트 진입 시 스토어의 배경색 데이터를 통해서 Body, nav 색상 변경
  4. 스토어의 배경색이 변경되면, DOM 엘리먼트 조작을 통해서 body, nav색상 변경
  5. 다시 홈 컴포넌트로 이동시, 같은 함수를 호출해서 body, nav색상을 기본 값으로 변경

• Vue Style 바인딩

1. 객체 형식으로 바인딩 할 수 있다.(케밥케이스, 카멜케이스 모두 사용가능)
   <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

• 잘못 알고 있던 개념 : Updated, mounted 훅

1. mounted : 컴포넌트가 돔에 생성(마운트)된 이후 => 컴포넌트($el), 템플릿, 렌더링 된 접근 가능!
2. updated : 컴포넌트에서 사용하는 반응형 속성들이 변경되거나 어떤 이유로 재렌더링이 발생되면 실행한다. => 데이터의 변경이 있을 경우!

=> Colors컴포넌트에서는 데이터의 변경이 일어나지 않아서 updated훅이 실행되지 않았다.

• 에러

1. :data-bg-color="color" Vue에 데이터셋 바인딩할때 ' : ' 를 빼먹어서 오류가 발생했다.

• 흐름 다시 정리하기

  1. api 호출(사용) 함수 생성 => 카드/보드/리스트 별로 로직(객체)를 분리한다. => 사용하기 편리하게!
  2. actions에 작성한 함수를 등록한다.
  3. 컴포넌트에서 actions에 등록된 함수를 사용한다.
  4. 스토어를 사용하지 않았다면, Colors에 보드를 수정하고, 이벤트를 발생시켜 Board컴포넌트까지 전달한 후 , Board컴포넌트에서 다시 데이터를 불러와야 하지만, 스토어에서 보드 데이터를 관리하므로, 스토어에 등록된 Board데이터 호출 함수를 실행만 하면된다!!!

• 코드

//Board.vue
setColor(color) {
  	    //2.
            document.body.style.backgroundColor = color ? color : "#fff";	
     	    //3.
            document.querySelector("#nav-bar").style.backgroundColor = color
                ? "rgba(0, 0, 0, 0.15)"
                : "#026aa7";
        },
updated() {
        //1.
        this.setColor(this.bgColor);
    },
destroyed() {
  		//4.
        this.$store.commit("SET_BG_COLOR", null);
  		//5.
        this.setColor(null);
      },

1. 보드 컴포넌트의 "created"훅에서 데이터가 업데이트된 후 setColor메소드에 스토어의 "bgColor"데이터를 전달한다.
2. body의 색상을 변경한다, destroyed훅을 위해서 null값을 인자로 넘길경우, 기본 배경색(흰색)이 되도록 작성
3. 마찬가지로 nav의 색상도 변경한다
4. 보드 컴포넌트의 "destroyed"훅에서 배경색을 기존 색상으로 변경하고, 스토어의 bgColor데이터를 널 값으로 초기화한다.
   => 좀더 효율적인 방법찾아보기!!!, setColor함수가 현재 Board 컴포넌트의 데이터가 변경될때마다 계속 실행된다..

2. Vue Watch

• 스토어의 데이터를 변경했는데 updated훅이 호출안되는 경우 발생
  => 데이터의 변화를 감지하기 위해 감시자(Watch)를 사용하기로 했다.

• 기본 사용법

watch : {
  	//1.
	a : function(newVal, oldVal) {
		...
	},
        //2.
      	b : {
	   handler : "method",
           immediate : true,
	}
}

1. 감시할 속성 "a" 와 핸들러를 등록 핸들러에는 새로 들어온 값 = newVal, 기존의값 = oldVal이 전달된다.
2. immediate : true 옵션을 주면 created 훅에서 호출한 것처럼 컴포넌트 생성시 바로 콜백함수를 실행한다.

• watch에서 methods의 함수 사용하기

bodyColor: {
            handler: function() {
                console.log(this); //1.
              	//3. 
              	this.someFunction()
            }
},

bodyColor : {
 	handler: () => {
                console.log(this); //2.
	}, 
}
      
      
},

1. this === Vue 인스턴스
2. this === undefined
3. watch 내에서 methods에 등록된 함수를 사용하려면 function(){}안에서 실행해야 한다!
4. handler : "some Function" 이렇게 함수를 직접 전달하려면 Vue 오브젝트 밖에 함수를 선언해야한다.

* Reference

1. Vue style 바인딩 :

https://kr.vuejs.org/v2/guide/class-and-style.html#%EA%B0%9D%EC%B2%B4-%EA%B5%AC%EB%AC%B8-1

2. Vue watch :

https://kr.vuejs.org/v2/api/#watch

3. watch에서 methods 사용하기 :

https://stackoverflow.com/questions/35755027/how-to-call-function-from-watch