10/21

* Vue 인프런 강의 복습

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

1. 카드 이동(리스트 내, 리스트 간)

• 코드
• branch : card/drag

//1.
onEnd({ to, item, newIndex }) {
  	    //2.
            const listId = to.dataset.listId;
  	    //3.
            const siblings = Array.from(to.querySelectorAll(".card-item"));
	    //4.
            const currentCard = {
                id: item.dataset.cardId * 1,
                listId: listId * 1,
                pos: 65535,
            };

            //5.
            const prev = newIndex === 0 ? null : siblings[newIndex - 1];
     	    //6.
            const next =
                newIndex === siblings.length - 1
                    ? null
                    : siblings[newIndex + 1];
	    //7.
            if (!prev && next) {
                currentCard.pos = next.dataset.cardPos / 2;
            } else if (prev && !next) {
                currentCard.pos = prev.dataset.cardPos * 2;
            } else if (prev && next) {
                const prevPos = prev.dataset.cardPos * 1;
                const nextPos = next.dataset.cardPos * 1;
                currentCard.pos = (prevPos + nextPos) / 2;
            } else {
                currentCard.pos = 65535;
            }

  	    //8.
            this.UPDATE_CARD(currentCard);
        },

1. 해체 문법(spread syntax)으로 인자로 전달되는 event객체로부터 필요한 데이터를 뽑아낸다.
2. to === 드롭된(도착한) 컨테이너로 부터 "listId"값을 추출한다 => api에 전달할 데이터!
3. 드롭된 컨테이너에서 자신을 포함한 "card-item"엘리먼트를 배열 형태로 생성한다. => 인덱스를 통해서 카드의 위치를 알기 위해서!, querySelectorAll의 결괏값이 유사배열이므로 Array.from()을 통해 배열로 만들어준다.
4. API에 전송할 기본 데이터를 세팅한다. => item === 현재 이동한 엘리먼트
5. newIndex === 드롭된 컨테이너에서 이동한 엘리먼트의 인덱스
   => newIndex의 값이 0 이면 제일 앞에 있다는 뜻이므로, prev를 null로 만들고, 인덱스가 0이아니라면 앞에 카드가 있다는 뜻이므로, siblings배열에서 엘리먼트를 가져온다.
6. 마찬가가지로 newIndex가 siblings배열의 마지막 인덱스라면 next를 null로 만들고, 그렇지 않다면 앞에있는 엘리먼트를 가져온다.
7. 경우의 수를 나눠서 전송할 position값을 변경한다.
8. pos값을 계산한 후에 데이터를 서버에 전송한다.

2. 카드 삭제

• branch : card/delete

• HTTP Request method : Delete, Post, Get, Put ...

• Rest API를 사용할때, http method와 데이터를 잘 이용!

• event.preventDefault()와 stopPropagation()을 같이 적용하는 방법?

//CardItem.vue
//1.
<router-link :to="`/b/${bid}/c/${data.id}`">
  	    //2.
            <button class="card-item__close" @click.prevent.stop="deleteCard">
                &times;
            </button>
</router-link>

1. routerLink가 렌더링되면 a태그가 되므로, button클릭시 a태그가 실행될 수 있습니다. => 따라서, z-index를 통해 button을 위로 올라오도록 만들었습니다.
2. @click.prevent.stop 예약어를 이용해서 preventDefault()와 stopPropagation()을 쉽게 적용하라 수 있다.
   => 그 외의 수식어 : https://kr.vuejs.org/v2/guide/events.html의 이벤트 수식어 참조

3. 뷰 클래스 동적 바인딩

• 예제

<div v-bind:class="{ active: isActive }"></div>

• 컴퓨티드 속성 사용하기

<board-setting :class="isOpenSetting" @close="isSetting = false" />

isOpenSetting() {
            return {
                //1.
                opened: this.isSetting,
            };
        },

• Computed를 통해 전달받은 객체를 class에 바인딩한다.

1. isSetting === true일때 opened 클래스가 적용된다.

Reference

1. 뷰 이벤트 핸들링 : https://kr.vuejs.org/v2/guide/events.html#%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%88%98%EC%8B%9D%EC%96%B4

2. 뷰 클래스 바인딩 : https://kr.vuejs.org/v2/guide/class-and-style.html