[FE - ConnecTo] DAY63 TIL👩🏻‍💻

22.10.12 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

🃏 Matching Cards 구현

• 카드 뒤집기 animation 구현
  • 기존 구조에서 뒤집기 기능 구현을 위해서 html 구조를 변형하였음.

    // 변경 전
    <div class="cards" data-id="1">?</div>
    
    // 변경 이후
    <div class="cards" data-id="1">
      <div class="card-inner">
        <div class="card-front">?</div>
        <div class="card-back"></div>
      </div>
    </div>

  • transform: rotate를 이용해서 카드 뒤집기 기능을 구현함.

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.5s;
      transform-style: preserve-3d;
    }
    
    .cards.opened .card-inner {
      transform: rotateY(180deg);
    }
    
    .card-front,
    .card-back {
      ...
      backface-visibility: hidden;
    }
    
    ...
    
    .card-back {
    	...
      transform: rotateY(180deg);
    }

💡 추가 지식
- transform-style
요소의 자식이 3D 공간에 배치하도록 하는 속성

- backface-visibility
요소의 뒷쪽에서 앞면이 보이게 할 지 말 지 결정하는 속성
- 기본값 : visible
- 상속 : No
- 애니메이션 : NO

• 클릭했을 때, 뒤집을 수 있도록 구현

  • click 이벤트를 사용해서, opened class를 토글시켜주었습니다.
    
    

• 카드 2장이 1쌍으로 일치하는지 여부 확인 로직 구현

  • 카드 뒤집었을 때, 일치하지 않는 카드를 다시 뒤집을 때, setTimeout의 시간이 끝나지 않았을 때, 다른 카드를 누르면 카드가 일치하지 않더라도 2개 이상이 열리는 문제가 발생함.

    // 이전
    let openCard = [];
    const completedCard = [];
    
    document.querySelector('.card-container').addEventListener('click', e => {
      if (
        !e.target.closest('.cards') ||
        e.target.closest('.cards').classList.contains('opened')
      )
        return;
      e.target.closest('.cards').classList.toggle('opened');
    
      openCard.push(e.target.nextElementSibling);
    
      if (openCard.length === 2) {
        if (openCard[0].textContent === openCard[1].textContent) {
          console.log('HOLYMOLY');
          completedCard.push(openCard[0]);
          completedCard.push(openCard[1]);
          openCard = [];
        } else {
          console.log('TRY AGAIN');
          setTimeout(() => {
            openCard[0].closest('.cards').classList.remove('opened');
            openCard[1].closest('.cards').classList.remove('opened');
            openCard = [];
          }, 500);
        }
      }
    });
    
    // 이후
    ...
    document.querySelector('.card-container').addEventListener('click', e => {
      if (
        !e.target.closest('.cards') ||
        e.target.closest('.cards').classList.contains('opened') ||
        openCard.length === 2
      )
        return;
      e.target.closest('.cards').classList.toggle('opened');
    
      ...
    });

    이전에 카드가 2개 이상 클릭되었을 때, setTimeout의 시간이 끝나기 전에 다른 카드를 클릭하면, 배열이 초기화되기 전에 openCard 배열에 다른 요소가 추가되기 때문에 생기는 문제임.

    그래서, 애초에 openCard 배열의 길이를 2가 넘어가지 않도록, 배열의 길이가 2일 때, early return 시켜주어서 해결하였음.

• 랜덤으로 이미지 / 글자 뿌려주기

  🔀 피셔 예이츠 셔플(Fisher-Yates Shuffle) 알고리즘 이용

  function shuffle(array) {
    const copyArray = [...array];
    for (let index = copyArray.length - 1; index > 0; index--) {
      const randomPosition = Math.floor(Math.random() * (index + 1));
  	[copyArray[index], copyArray[randomPosition]] = [copyArray[randomPosition], copyArray[index]];
    }
    return copyArray;
  }

• reset 버튼을 누르면 초기화
  • component가 아닌 따로 실험해본 파일에서는 reset 버튼 눌렀을 때, replay가 안됨. CBD 구조로 코드를 변경하였을 때 정상 작동을 함. 그런데, reset 눌렀을 때, transition이 동작하면서 바뀐 카드가 살짝 보이는 issue가 있음