step4 캐로셀

CardsUI

아침에 눈을 떴는데 문득 나의 아마존 사이트가 (내 소중한 자식이!!) 다른 자식들에 비해 너무 빈약한 거 같은 기분이 들었다…
기능 구현 위주로 하다보니 마크업은 나중에 하자 하고 미뤄었는데, 아침에 갑자기 삘 꽂혀서 cardUI를 만들었다.

See the Pen amazon-css by developersoom (@developersoom) on CodePen.

feb-26-2019 20-38-33

아이- 이쁘다~!!

addEvent() {
    document.addEventListener("click", ((event) => {
        const target = event.target.parentElement;
        this.removeSelected();
        if (target.matches('.cards-items')) target.classList.add(this.selectedClass);
    }), false);
}

removeSelected() {
    this.cardsItems.forEach((card) => {
        if (card.classList.contains(this.selectedClass)) card.classList.remove(this.selectedClass);
    });
}

CardUI 구현하면서 사용한 것

event delegation: 이 사이트를 참고하여 처음으로 event delegation을 구현해보았다. 간지!
removeSelected() 너무 잘 만든거 같아…
transform: scale(1.3)을 사용해서 카드를 zoom했다. (zoom 속성도 있던데, 나중에 써봐야지!)

리팩토링

step4가 머지되었다 (!)
그리고 크롱이 주신 피드백은 아래와 같다.

constructor 속성 줄이기
getData URL 인자로 받기 (재사용성 고려)
pushData()에서 배열 복사하지 말고 다른 방법 고안
this.xxx 보다 함수에서 인자로 받을 수 있도록 
최대한 arrow function으로
event delegation 활용

다른 내용들은 금방 수정했는데, 3번 부분이 애매했다.
예전에 templating 공부했던 부분을 복습하면서 해봤는데, loop를 돌면서 innerHTML을 하는 부분이 헷갈렸다.

addDataTags(srcArr) {
    srcArr.forEach((data, i) => this.container.appendChild(this.templateData(data ,i)));
}

templateData(src, i) {
    return `
    <div class="carousel-item">
    <img src="${src}" alt="img${i}">
    </div>
    `
}

뭔가.. 이렇게 하면 될 거 같은데… 어떻게 하면 될 거 같은데…! 될 거 같은데~~~ 하다가!

    addDataTags(srcArr) {
        let tagContainer = "";
        srcArr.forEach((data, i) => tagContainer += this.templateData(data, i));
        this.container.innerHTML = tagContainer;
    }

    templateData(src, i) {
        return `
        <div class="carousel-item">
        <img src="${src}" alt="img${i}">
        </div>
        `
    }

이렇게 loop 돌면서 변수에 전체 태그를 저장해 놓고, 그것을 innerHTML 해주었더니 되었습니다! 너무 감동이니까 이렇게 큰 글씨로 볼드체로 쓸거야…너무 기쁘다!!

이제 오늘 남은 시간은 STEP5 강의 들어야지~
룰루랄라 ~