JavaScript 추상화 이해: 세탁기 예제로 배우기
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

자바스크립트에서 추상화의 이해: 세탁기 스타일로 배우기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

자바스크립트 초보자, 객체지향 프로그래밍(OOP) 개념을 배우는 개발자 및 학습자

핵심 요약

  • 추상화는 내부 복잡성을 숨기고 사용자에게 필요한 기능만 노출하는 OOP의 핵심 원칙
  • ES6 클래스를 통해 #private 필드/메서드로 추상화 구현 가능
  • 세탁기 예제로 설명: start()/stop() 공개 메서드만 노출, 내부 로직은 #turnOn()/#drain() 등 비공개 메서드로 처리

섹션별 세부 요약

1. 추상화의 정의 및 목적

  • 추상화는 사용자가 복잡한 내부 로직을 알 필요 없이 단순한 인터페이스로 사용 가능
  • 예: TV 리모컨의 버튼 클릭만으로 채널 전환 가능, 내부 회로 이해 필요 없음
  • 주요 이점: 간결성, 보안성, 유지보수성, 재사용성

2. ES6 클래스를 통한 추상화 구현

  • ES6 클래스는 프로토타입 기반의 상속을 더 직관적으로 표현
  • public/private 필드/메서드 구분 가능: #private은 외부에서 접근 불가
  • 예:

```javascript

class Sample {

publicField = "I'm public";

#privateField = "I'm private";

}

```

3. 세탁기 예제를 통한 추상화 적용

  • 사용자는 start()/stop() 메서드만 호출, 내부 로직은 비공개로 처리
  • 코드 예시:

```javascript

class WashingMachine {

#powerStatus = false;

start(cycle) {

if (!this.#powerStatus) this.#turnOn();

this.#fillWater();

this.#spin();

this.#drain();

this.stop();

}

#turnOn() { this.#powerStatus = true; }

#fillWater() { console.log("Water Filled."); }

}

```

4. 추상화의 실무적 이점

  • 비공개 필드/메서드로 내부 로직 보호 가능
  • 사용자에게 복잡성 감추고, 유지보수 시 내부 변경 없이 외부 인터페이스 유지 가능

결론

  • ES6의 #private 필드/메서드를 활용해 추상화 구현 가능
  • 세탁기 예제처럼 복잡한 내부 로직을 숨기고 단순한 인터페이스 제공
  • 핵심 팁: 공개 메서드만 사용자에게 노출하고, 내부 로직은 #private으로 처리해 유지보수성 향상