10/25

Vue 인프런 강의 복습

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

1. 리스트 생성

- 로직 생각

1. AddList.vue 컴포넌트를 생성, AddCard 컴포넌트를 재사용했다. => 추후 Slot을 통해 리팩토링 해보자
2. api/index.js에 list관련 로직을 생성, actions에 등록한다.
3. list 생성 api 호출 성공 시 => board 데이터를 다시 Fetch한다.

- 카드 생성, 리스트 생성 시 사용하는 배열의 마지막 엘리먼트 구하는 로직

//utils/helpers.js
export const getLastElement = (list) => {
    return list.length ? list[list.length - 1] : null;
};

//AddList.vue
//1.
const lastList = getLastElement(this.board.lists);

//2.
const _pos = lastList && lastList.pos ? lastList.pos *2 : 65535

1. 현재 보드에 있는 리스트 배열에서 마지막 엘리먼트를 가져온다.
2. lastList값이 null이 아니고, liastList에 pos 프로퍼티가 있는 경우 그 pos에 2를 곱한 값을 pos로 설정하고, 없을 경우에는 기본 pos 값인 65535로 설정한다.

• 리스트 생성 코드

this.CREATE_LIST({
                title: this.inputTitle,
                boardId: boardId,
                pos: pos,
            })
		//1. 생성 성공
                .then(() => this.$emit("close"))
                .catch((err) => console.error(err));

1. 생성 성공 시, close 이벤트를 트리거한다.

2. 리스트 제목 수정

- 로직

1. isEdit 이라는 변수를 통해서, input 태그와 제목을 보여주는 span태그를 토글한다.
2. input이 DOM에 마운트 될때 리스트의 제목을 값으로 받는다.
3. blur, keyup 이벤트를 통해 api를 호출한다.

- 수정 로직을 작성할 때마다 문제점

: keyup과 blur시 모두 api를 호출하도록 작성할 경우에, keyup 이벤트가 발생하면 무조건 blur이벤트가 같이 발생하여 api를 두번씩 호출했다.
: onBlur에 api호출 로직을 설정하고, keyup이벤트에서 onBlur를 호출해보는 방식을 적용해보았다.

- 코드

onKeyUp() {
  	    //3.
            // this.onbLur();
  
            //4.
            event.target.blur();
  	    //5.
  	    event.target.dispatchEvent(new Event("blur"));
        },
onBlur() {
            this.inputTitle = this.inputTitle.trim();
            const { id, title } = this.data;

  	    //1.
            if (!this.inputTitle) {
                alert("리스트 제목을 입력해주세요!");
                this.inputTitle = title;
                return false;
            }
	    //2.
            if (this.inputTitle === title) {
              this.restore();
            }

            this.UPDATE_LIST({
                id: id,
                title: this.inputTitle,
            })
                .then(() => this.restore())
                .catch((err) => console.error(err));
        },
          
restore() {
  this.inputTitle = "";
  this.isEdit = false;
}

1. Input 태그와 v-model로 바인딩되어있는 inputTitle이 빈 값("")일 경우, return false를 통해 이벤트핸드러를 종료하고, inputTitle의 값에 다시 기존 리스트의 데이터를 넣어준다.
2. Input 태그의 기존의 값과 같을 경우, 이벤트 핸들러를 종료해서 api를 호출하지 않는다.
3. keyup 이벤트시 onBlur()를 호출할 경우, keyup을 통해 실행되는 onBlur, blur시 또 다시 한번 onBlur메소드가 실행되어 api를 두번 호출한다.
4. keyup이벤트가 발생하면, element.blur()를 통해서 이벤트를 강제로 발생시켰다.
5. 4번과 같이 "dispatchEvent"를 통해서 이벤테를 강제로 발생시켰다.

- 이벤트 생성 및 트리거 -> 5번의 코드 수정

var event = new Event('build');

// 이벤트 리슨.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// 이벤트 디스패치.
elem.dispatchEvent(event);

- 에러

1. 위와 같은 방식을 사용하니, blur이벤트가 계속 두번 실행되어, 원하는대로 동작하지 않았다.
2. 우선 onBlur에서 restore이벤트를 호출하도록 하고, keyup이벤트 안에서만 api를 호출하도록 변경했다.

=> 찾아볼 것 : 같은 엘리먼트에 여러 이벤트와 이벤트 핸들러가 등록되어 있을경우, 하나의 이벤트가 실행중일 경우 다른 이벤트가 실행되는 것을 막는방법

Reference

1. Vue 엘리먼트 이벤트 트리거

: https://stackoverflow.com/questions/31917889/is-it-possible-to-trigger-events-using-vue-js

2. 이벤트 생성 및 트리거

: https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events

3. stopImmediatePropagation

: https://developer.mozilla.org/ko/docs/Web/API/Event/stopImmediatePropagation