10/18

Vue 인프런 강의 복습

- ref : https://www.inflearn.com/course/vuejs/

* Card 생성

• 브랜치 : card/add

• Idea : 카드 생성하는 부분이 반복 => 컴포넌트화!

• 컴포넌트 구조 : Board > List > AddCard

  • AddCard가 보여지는 지 여부를 List의 isAddCard 속성으로 관리
  • AddCard에서 $emit("close") 이벤트를 트리거, List에서는 close이벤트를 통해 AddCard를 닫는다.

• 소스

//List.vue
<footer class="addCard-container">
  //1. 자식 컴포넌트에서 트리거한 이벤트를 핸들링
	<add-card v-if="isAddCard" @close="isAddCard = false" :id="data.id"></add-card>
	<a
		v-else
		class="addCard__toggle"
		@click="isAddCard = true"
	>
	&plus; Add a card..
	</a>
</footer>

//AddCard.vue
//2. $emit을 통한 이벤트 트리거
<a href="" class="addCard__close" @click.prevent="$emit('close')">
	&times;
</a>

1. List 컴포넌트에서는 "add-card" 컴포넌트를 사용하고, close이벤트를 통해 isAddCard 상태를 변경하여 컴포넌트의 렌더링 여부를 컨트롤한다.
2. AddCard 컴포넌트에서는 $emit()을 통해 "close" 이벤트를 방출하여, 부모 컴포넌트인 "List" 컴포넌트에게 Close 이벤트가 발생했음을 알린다.
   @click.prevent => e.preventDefault()랑 같은 효과

• 카드 생성 로직

카드 생성 api 호출 => AddCard 컴포넌트 닫기 => Board 데이터 다시 Fetch

1. AddCard에서 listId값을 사용하므로, "props"를 통해 부모 컴포넌트로부터 데이터를 전달 받았다.

props : ["listId"]

2. 오류 발생 : actions의 메소드를 인식 못했다. (오타..)

...mapActions["CREATE_CARD"]   => 오류 발생

...mapActions(["CREATE_CARD"]) => 정상 동작

3. 소스

//store/actions.js
//Create Card
//1. {dispatch, state, commit} = ctx
CREATE_CARD({dispatch, state}, { title, listId }) {
	return api.card.create({ title, listId })
    		//2.
		.then(() => {
        	dispatch("FETCH_BOARD", {id : state.board:id})
        })
        	//3.
		.catch((err) => Promise.reject(err));
},


//AddCard.vue
this.CREATE_CARD({
                title: this.cardTitle,
                listId: Number(this.listId),
            })
                .catch((err) => {
                    console.error(err);
                    alert("카드를 다시 생성해주세요");
                    this.focusInput();
                })
                //4.
                .finally(() => this.$emit("close"));
                

1. ctx : Store의 context객체 해체 문법 "{state, commit, dispatch} = ctx" 을 통해서 store의 state, commit, dispatch를 가져올 수있다.
2. 카드가 생성되면, 다시 Board 데이터를 fetch해서 애플리케이션의 Board 데이터 객체를 갱신하고, Board 컴포넌트를 다시 렌더링한다.
   2.1 이때, state.board를 통해 현재 애플리케이션의 보드 객체에 접근할 수 있고, 보드의 id값을 전달받는다.
3. Error 발생 시 , Promise의 reject 메소드를 통해서 axios error객체를 전달
4. 모든 로직이 완료된 이후에, List 컴포넌트에 close이벤트를 트리거한다.