📖 TIL - JavaScript 실전 팁: 숫자 처리부터 클래스 설계까지 🛠️

📌 학습 내용 정리

1. 숫자 처리 메서드

toFixed() vs Math.round()

// Math.round 사용
Math.round(e.vote_average * 100) / 100

// toFixed() 사용
const roundedVote = e.vote_average.toFixed(2)

toFixed()의 특징

• 반환값이 문자열
• 소수점 자릿수를 강제로 고정 (예: 3 → "3.00")
• 숫자로 변환 필요시 parseFloat() 사용

const num = parseFloat(e.vote_average.toFixed(2))

2. DOM 조작 최적화

문제상황: 마우스 hover 시 아이콘 변경 불안정

// 비효율적인 코드
$bookmarkIcon.addEventListener("mouseenter", () => {
  $bookmarkIcon.innerHTML = "";
  $bookmarkIcon.innerHTML = `<i class="material-symbols-outlined">bookmark_add</i>`;
});

해결방법 1: setTimeout 활용

$bookmarkIcon.addEventListener("mouseenter", () => {
  setTimeout(() => {
    $bookmarkIcon.innerHTML = `<i class="material-symbols-outlined">bookmark_add</i>`;
  }, 0);
});

해결방법 2: classList 활용 (더 효율적)

$bookmarkIcon.addEventListener("mouseenter", () => {
  const icon = $bookmarkIcon.querySelector('i');
  icon.textContent = "bookmark_add";
  icon.classList.add("bookmark-add-icon");
  icon.classList.remove("bookmark-icon");
});

3. 클래스 설계와 모듈화

Loading 클래스 예시

export class Loading {
  constructor(selector) {
    this.$element = document.querySelector(selector);  // DOM 요소 저장
  }
  
  toggle(show) {
    this.$element.style.display = show ? "block" : "none";
  }
}

클래스 설계 포인트
1. constructor의 역할

• 클래스 인스턴스 생성 시 초기 설정
• DOM 요소 선택 등 기본 설정

2. this의 의미

   • 현재 생성된 인스턴스를 가리킴
   • this.$element는 클래스 내부에서 공유되는 변수

3. 클래스 내부에서 다른 클래스 사용

class MovieList {
  constructor() {
    this.loading = new Loading("#loading");  // constructor에서 초기화
  }

  async initialize() {
    this.loading.toggle(true);  // 인스턴스 재사용
    // ... 
  }
}

✨ 새롭게 배운 점

1. 숫자 처리의 세밀한 제어

   • toFixed()와 Math.round()의 차이
   • 반환 타입에 대한 이해

2. DOM 조작 최적화

   • innerHTML 대신 classList 활용
   • 비동기 처리를 통한 렌더링 안정화

3. 클래스 기반 설계의 이점

   • 코드 재사용성 향상
   • 의존성 관리 용이
   • 유지보수성 개선

🚀 이런 점이 효율적이에요

• 숫자 처리시 상황에 맞는 메서드 선택
• DOM 조작 최소화로 성능 향상
• 클래스 기반 설계로 코드 구조화