[FE - ConnecTo] DAY54 TILπŸ‘©πŸ»β€πŸ’»

JUNYΒ·2022λ…„ 9μ›” 27일
0

πŸ“šZeroBase ConnecTo Front-End

λͺ©λ‘ 보기
42/53
post-thumbnail

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 이벀트 내뢀에 μœ„ λ‚΄μš©μ„ μž‘μ„±ν•΄μ€ŒμœΌλ‘œμ¨ 이λ₯Ό ν•΄κ²°ν•΄μ£Όμ—ˆλ‹€.
profile
μ„±μž₯ν•˜λŠ” 개발자🌼

0개의 λŒ“κΈ€