TIL - 클래스

정의

클래스는 간단히 말하면 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀입니다. ES6 (ECMAScript 2015)부터 클래스가 공식적으로 JavaScript에 추가되었습니다. 

class MyClass {
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }

  // 메서드 정의
  method1() {
    // 메서드 내용
  }

  method2() {
    // 메서드 내용
  }
}

// 클래스의 인스턴스 생성
const myObject = new MyClass(arg1, arg2);

 

• class 키워드를 사용해서 클래스를 정의하고 클래스 명에 대문자로 시작하는게 일반적인 관습입니다.
• constructor 메서드는  클래스의 인스턴스를 생성하고 초기화하기 위한 특별한 메서드입니다.
• 클래스 내에는 여러 메서드를 정의할 수 있습니다. 이러한 메서드는 클래스의 인스턴스에서 호출될 수 있습니다.
• 클래스 내부의 메서드와 속성은 this 키워드를 사용하여 접근할 수 있습니다.
• new 키워드를 사용해서 클래스의 인스턴스를 생성할 때 호출됩니다.

 

클래스 getter와 setter 이용하기

Getter와 setterGetter는 멤버 변수의 값을 반환하는 메서드이며, setter는 멤버 변수의 값을 설정하는 메서드입니다.

class Circle {
  constructor(radius) {
    this._radius = radius; // underscore(_)로 시작하는 변수는 관례적으로 private 변수를 나타냅니다.
  }

  // Getter 메서드
  get radius() {
    return this._radius;
  }

  // Setter 메서드
  set radius(value) {
    if (value <= 0) {
      throw new Error('반지름은 0보다 커야 합니다.');
    }
    this._radius = value;
  }
}

const myCircle = new Circle(5);
console.log(myCircle.radius); // 5

myCircle.radius = 10; // Setter 호출
console.log(myCircle.radius); // 10

myCircle.radius = -1; // Setter에서 예외 발생

this에 언더스코어(_)를 시작하는 이유는 반환하는 return이 메서드와 같아서 무한 루프가 되기 때문입니다. 유효성 검사를 수행하고 외부에서 클래스의 멤버 변수에 직접 접근하는 것을 방지하고, 내부 구현을 숨기는데 도움이 됩니다. 이는 코드의 유지보수성과 안정성을 향상시키는 데 도움이 됩니다.

 

 

 

클래스 사용의 장점

• 코드 재사용성 및 모듈화: 클래스를 사용하면 코드를 재사용할 수 있습니다. 비슷한 기능을 가진 객체들을 만들기 위해 클래스를 정의하고 이를 필요한 곳에서 인스턴스화하여 사용할 수 있습니다. 이는 코드의 모듈화를 촉진하고 유지보수를 용이하게 합니다.
• 상속과 다형성: 클래스는 상속을 통해 다른 클래스의 특성과 동작을 상속받을 수 있습니다. 이를 통해 코드 중복을 줄이고 효율적으로 확장 가능한 구조를 만들 수 있습니다. 또한 다형성을 통해 하나의 인터페이스로 여러 타입의 객체를 다룰 수 있습니다.
• 캡슐화와 정보 은닉: 클래스는 데이터와 메서드를 하나의 단위로 묶어 캡슐화할 수 있습니다. 이를 통해 객체의 상태를 보호하고 외부에서의 직접적인 접근을 제한함으로써 데이터의 무결성을 유지할 수 있습니다. 정보 은닉은 객체의 내부 동작을 숨기고 외부에서는 객체에게 정의된 인터페이스를 통해 상호 작용할 수 있도록 합니다.
• 유연성과 확장성: 클래스를 사용하면 추상화를 통해 더 유연하고 확장 가능한 코드를 작성할 수 있습니다. 클래스를 적절하게 설계하면 요구 사항의 변경에 더 쉽게 대응할 수 있습니다.
• 의사소통: 객체지향 프로그래밍에서는 현실 세계의 개념을 모델링하기 때문에 코드가 보다 의미 있는 방식으로 의사소통할 수 있습니다. 이는 코드의 가독성과 이해도를 높여주며 개발자들 간의 협업을 용이하게 합니다.

 

 

결론 

오늘은 팀 프로젝트 과제를 제출하는 날이 이여서 코드를 제출하고 나서 회고를 하는 시간을 가졌는데 영화 카드를 foreEach 메서드를 이용해서 순회하면서 요소를 생성했었는데 클래스를 이용해서 영화 카드를 생성했더라면 코드를 체계적으로 구성하면서 유지보수가 더 용이할 것이라고 예상 했습니다. 클래스를 사용하면 각각의 카드를 개별 객체로 관리할 수 있으므로, 카드의 속성이나 동작을 수정하거나 추가할 때 클래스 정의 내에서만 수정이 가능하기 때문이죠.

 

 

class MovieCard {
  constructor(movie, category) {
    this.title = movie.title;
    this.posterPath = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
    this.voteAverage = movie.vote_average.toFixed(1);
    this.id = movie.id;
    this.category = category;
    this.genres = movie.genre_ids;
  }

  // 카드 HTML을 생성하는 메서드
  generateHTML() {
    return `
      <div class="movie-card" data-id="${this.id}" data-section="${this.category}" data-genre="${this.genres}">
        <a href="movieDetail.html?movieId=${this.id}&section=${this.category}">
          <img src="${this.posterPath}" class="card-img-top" alt="${this.title}">
        </a>
        <div class="cardTextBox">
          <h5 class="card-title">${this.title}</h5>
          <i class="card-vote">평점: ${this.voteAverage}</i>
        </div>
      </div>`;
  }
}

// 영화 항목 별 카드 생성 함수
function createCategoryCardsHTML(moviedata) {
  const categoryHTML = {
    now_playing: [],
    upcoming: [],
    top_rated: [],
  };
  for (const category in moviedata) {
    moviedata[category].forEach((movie) => {
      const movieCard = new MovieCard(movie, category);
      const html = movieCard.generateHTML();
      categoryHTML[category].push(html);
    });
  }
  return categoryHTML;
}