2022-01-17 클래스를 이용한 모듈화

• 클래스와 인스턴스라는 용어를 이해할 수 있다 .
  • new 키워드의 사용법을 이해할 수 있다. => 클래스로 부터 새로운 인스턴스를 만들때 사용!
  • class 키워드의 사용법을 이해할 수 있다. => 새로운 클래스를 만들때 사용!
  • 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인할 수 있다.
• 객체 지향 프로그래밍 특징을 이해할 수 있다. => 객체 지향 프로그래밍은 프로그래밍을 수많은 '객체'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식.   객체란 하나의 역할을 수행하는 메소드와 속성 묶음!  JS는 프로토타입 기반 객체 지향 프로그래밍!

 

• 캡슐화 => 높은 응집도와 낮은 결합도를 유지할 수 있도록 설계해야 요규사항에 유연하게 대처할 수 있는데 캠슐화는 낮은 결합도를 유지할 수 있게 데이터(속성)와 기능(메소드)을 하나의 객체 안에 넣어 묶는 것!
• 상속 =>  부모 클래스(기본 클래스) 의 특징을 자식 클래스(파생 클래스)가 물려받는 것
• 추상화 => 내부 구현은 복잡한데, 실제노출되는 부분은 단순하게 만든다는 개념

캠슐화가 은닉화에 포커스를 맞추는 것과 달리 추상화는 사람이 필요하지 않은 메소드등은 복잡하게 노출시키지 않는 것

• 다형성 => 서로 다른 클래스의 객체가 같은 메세지를 받았을 때 각자의 방식으로 동작하는 능력

• JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다.
  • Prototype이 무엇인지 이해할 수 있다 => 공부 필요
• 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다.
  • 상속관계를 가진 현실 세계의 모델을 코드로 작성할 수 있다.
  • 클래스 상속의 원리를 이해할 수 있다.
  • Prototype chain을 이해하고 설명할 수 있다. (__proto__)

 

Intro

C언어는 절차 지향 프로그래밍. 절차는 순차적인 처리가 중요. 그러나

 

소프트웨어의 발달로 하드웨어속도가 소프트웨어의 속도에 못 따라감. 그래서 객체지향 프로그래밍이 나옴.

 

모듈화를 통해 하드웨어가 불필요한 연산을 하지않게 하고 모듈을 재활용함으로써 효율정 재고!

 

객체 지향 프로그래밍(Object-Oriendted Programming 이하 OOP)는 데이터와 기능을 한 곳에 묶어서 처리.

 

속성과 메소드가 하나의 "객체"라는 개념에 포함되며, JS의 object랑은 다르게 클래스(Class)라는 이름이 있음.!

 

객체 Review

 

메소드 호출 실습하기

 

- 메소드 호출은 객체.메소드()과 같이 객체 내에 메소드를 호출하는 방법을 의미

 

- 메소드 호출 이용시 화살표 함수 사용하지 않기!

 

Ex1) 메소드 호출의 예제

let counter1 = {
  value: 0,
  increase: function() {
    this.value++ // 메소드 호출을 할 경우, this는 counter1을 가리킵니다
  },
  decrease: function() {
    this.value--
  },
  getValue: function() {
    return this.value
  }
}

counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2

- counter1은 객체. 그 안의 매서드는 ircerase, decrease, getValue 3개!

 

 

클로저를 이용해 매번 새로운 객체 생성하기

 

Ex2) 클로저 모듈 패턴으로 구현한 여러개의 객체 생성

function makeCounter() {
  return {
    value: 0,
    increase: function() {
      this.value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체입니다
    },
    decrease: function() {
      this.value--
    },
    getValue: function() {
      return this.value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

 

클래스와 인스턴스

- 객체 지향 프로그래밍 : 하나의 모델이 되는 청사진(blueprint)를 만들고,

 

그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴!

 

- ex) Car 청사진을 만들고, 그걸로 Avante, mini, Beetles 등의 objct를 생성

 

여기서 청사진을 바탕으로 한 '객체'는 instance object 줄여서 instance, 청사진은 class!

 

Ex3) 클래스와 인스턴스 문법

 

function Car(color) { } // Car는 Class!

let avante = new Car('blue'); // new 키워드 사용!

let mini = new Car('cyan');

 

- 새로운 인스턴스를 만들때는 new 사용!

 

  각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게 됨.

 

- 클래스를 만드는 규칙으로 대문자, 그리고 일반명사 사용! (그냥 함수랑 다르게)

 

- 클래스를 만들때는 function 쓰거나 ES6에서는 class 키워드 사용!

 

Ex4) 클래스의 정의 법 두가지

 

function Car(brand, name, color) {
 // 함수로 정의하는 방법
}

class Car {
  constructor(brand, name, color) {
  // class키워드 사용법
  }
}

- 참고로 생성자 함수(여기서 쓴 함수)는 return값 만들지 않음

 

 

- 속성과 메소드의 차이..

 

예를 들어 자동차의 속성 : 브랜드, 차 이름, 색상, 현재 연료 상태

 

                          메소드 : 연료 주입, 속력 설정, 운전 등

 

 Ex5) 클래스 문법을 이용한 실습

 

class Counter { // Counter라는 클래스 만듦
  constructor() { // 계속 컨스트럭터 왜 쓰는거임? 인스턴스를 생성하고 초기화하기 위한 특수 메소드!
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스!!
    }
    increase() {
      this.value++
    }
    decrease() {
      this.value--
    }
    getValue() {
      return this.value
    }
  }


let counter1 = new Counter() // 생성자 호출 여기서 counter1은 인스턴스네.

counter1.increase() // increase 메서드
counter1.getValue() // 1