[FE - ConnecTo] DAY54 TIL👩🏻‍💻

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

4번

$container.addEventListener('dragover', e => {
  e.preventDefault();
});

• drop 이벤트 타입의 경우 dragover 이벤트 타입을 막아주어야(e.preventDefault()) 제대로 작동하는 것을 알게되었다.

// drag시 정보 저장
$container.addEventListener('dragstart', e => {
  if (!e.target.matches('.draggable')) return;

  e.dataTransfer.setData('from', e.target.previousElementSibling.textContent - 1);
});

// drop시 정보 판독
$container.addEventListener('drop', e => {
  if (!e.target.matches('.draggable')) return;

	...

  const from = e.dataTransfer.getData('from');
  ...
}

• drag하여 drop한 위치로 변경해야 하는데, 그러기 위해서는 drag 했던 정보를 기억해야 하는데, 이를 위해서 DataTransfer 개체를 사용해야 하는 것을 알게 되었다.
  • DataTransfer 개체는 dragstart 이벤트에서 설정되고, drop 이벤트에서 판독/처리 된다.
  • drag 동작으로 데이터 저장 : e.dataTransfer.setData(<key>, <value>))
  • drop 동작으로 데이터 판독 : e.dataTransfer.getData(<key>)

// 이전 (스왑)
const arr = [1, 2, 3, 4, 5];

let temp = arr[1];
arr[1] = arr[2];
arr[2] = temp;

console.log(arr); // [1, 3, 2, 4, 5]

// 이후 (구조 분해 할당)
const arr = [1, 2, 3, 4, 5];

[arr[1], arr[2]] = [arr[2], arr[1]];

console.log(arr); // [1, 3, 2, 4, 5]

• drag & drop 후 두 요소의 위치를 바꿀 경우 기존에는 스왑 방식을 사용하였지만, 구조 분해 할당 방식을 알게되어 이를 적용하여 가독성을 높일 수 있었다.

---

5번

• 초기 렌더링시, 순간 모든 시 / 분 /초침이 12시 방향을 가리켰다가 원래 시간으로 렌더링하는 이슈가 발생하였다. 이 이유는, 초기 렌더링 시 현재 시간을 받아오지 못했기 때문이었다. 그래서, 우리가 처음에 만들어둔 analogClock 함수를 사용하여, 초기 렌더링 때 한 번 더 호출함으로 해결할 수 있었다.
  

// 1번
document.querySelector('.hour').style.setProperty('--deg', moveHour);

// 2번
$container.querySelector('.hour').style.setProperty('--deg', moveHour);

• 이전에는 시간을 렌더링 할 때, 1번과 같이 불러왔더니, 첫번째 analogClock의 hour에만 렌더링이 되어 재사용 할 수 없었다. 그 이유는, document.querySelector 로 불러오게 되면, 해당 요소들 중 첫번째 요소만 불러올 수 있기 때문이다. 그리고, app.js 파일에서 재사용이 가능하도록 forEach 문을 사용하고 있는데, 그걸 간과하고 파일 작성을 해서 해당 문제점이 발생하였다.
  • 그래서 2번과 같이 적용함으로써 이를 해결할 수 있었다.

---

6번

// 이전
const addStars = () => {
  const starCount = +$container.dataset.maxRating;
  const starArray = new Array(starCount).fill(null);
  $container.innerHTML = `
    <div class="star-rating-container">
      ${starArray.map(_ => `<i class='bx bxs-star'></i>`).join('')}
    </div>
  `;
};

// 이후
const addStars = () => {
  const starCount = +$container.dataset.maxRating;
  $container.innerHTML = `
    <div class="star-rating-container">
      ${`<i class='bx bxs-star'></i>`.repeat(starCount)}
    </div>
  `;
};

• 처음에는 dataset으로부터 별의 개수를 받아 그 개수만큼 배열 요소를 만들어 map을 돌려주었다.

  • 이후에는, 어차피 같은 문자열을 반환하기 때문에 String.repeat(count) 함수를 사용해도 된다는 것을 알아 이를 적용하였다.

• link 태그를 추가하는 addLink 함수의 경우 처음에 StarRating 함수 내부에 작성하였을 때, 해당 StarRating 함수가 호출된만큼 추가가 되었다.

  • 이후에는, 이 addLink 함수를 StarRating 밖으로 꺼내 한 번만 호출되도록 해주었다.

• 별을 클릭하였을 경우 해당 인덱스 이전의 요소들을 선택하기 위해서 조건문이 필요했는데, 내가 선택한 별이 몇 번째 index에 존재하는지 알 수가 없었다.

  let rating = 0 // 초기값 0
  
  $container.addEventListener('mouseover', e => {
  	...
  
  	rating = [...$container.querySelectorAll('.star-rating-container > i')].indexOf(e.target)
  	...
  }

  • 전역에 내가 mouseover 하거나 click한 별의 index 값을 indexOf 메서드를 사용하여 상태로 저장하여 이를 해결해 주었다.

• 커스텀 이벤트을 다음과 같이 만들었지만 실제로 적용이 안되는 문제가 존재했다

  const event = new CustomEvent('rating-change', {
    detail: rating + 1,
  });
  
  $container.dispatchEvent(event);

  • 처음에는 전역 위치에 커스텀 이벤트를 만들고 dispatch 해주었다.
  • 커스텀 이벤트 내부 detail 값이 변경될 경우 이 이벤트가 실행되는데, 요구사항은 click 했을 경우에 그 값을 화면에 표시하는 것이기 때문에 click 이벤트 내부에 위 내용을 작성해줌으로써 이를 해결해주었다.