[C/F TIL] 22일차 - 객체 지향 프로그래밍

Code States
Front-end boost camp
Today
I
Learned

🌚 5월 11일.. 22일차 수업 시작,,

---

🌚 클로저 모듈 패턴

• 메서드 호출 방식에서는 화살표 함수 사용하지 않음
• 단순객체 사용 예시 ▼

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

• 클로저를 이용해 매번 새로운 객체 생성 예시 ▼

function makeCounter() {
  let value = 0;
  return {
    increase: function() {
      value++;
    },
    decrease: function() {
      value--;
    },
    getValue: function() {
      return value;
    }
  }
}

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

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

🌚 클래스와 인스턴스

• 객체 지향 프로그래밍 : 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴
  -- 청사진 : class
  -- 객체 : instance
• 객체를 만드는 방법? : 일반적인 함수 정의하듯 만듦
  -- 하지만 일반 함수와 구분하기 위해 보통 대문자로 시작해 일반명사로 만듦 (일반 함수는 적절한 동사 포함 소문자로 시작)
• 하지만 이용할 때는? : 그냥 실행하지 않고 'new' 키워드를 써서 만든다.
  -- 새로운 인스턴스를 만드는 방법
  

---

• 속성과 메소드 : 클래스에 속성과 메소드를 정의하고 인스턴스에서 이용함
  -- 예시 ▼
  
• this : 인스턴스 객체를 의미
  -- parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값
  -- this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미
  
• 메서드 : prototype이라는 키워드를 사용하여 정의 할 수 있다
  -- ex) Car.prototype.refuel
  -- class 키워드 안쪽에 묶어서 정의함
  
• 인스턴스에서의 사용
  
• 알아두기
  
• 실전예제로 이해하기 : 배열 ▼
  
  -- 그동안 만들었던 배열은 전부 Array의 인스턴스
• 클래스 문법을 이용해 카운터 만들어 보기

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1

🌚 객체 지향 프로그래밍

• 절차적 언어 : 초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부름
  -- 이는 순차적인 명령의 조합이다.
  -- 객체 지향의 개념이 없었다.
• OOP : 프로그램 설계 철학, 모든 OOP는 '객체'로 그룹화, 재사용성
• 클래스와 인스턴스 :
  -- 클래스 : 객체를 생성하기 위한 아이디어나 청사진
  -- 인스턴스 : 클래스의 사례
  -- 클래스는 객체를 만들기 위해 생성자(constructor)함수를 포함합니다.
  -- 생성자를 통해 세부 사항(속성)을 넣어준다. (함수에 인수를 넣듯)
  
• OOP Basic Concepts
  -- Encapsulation(캡슐화) : 코드가 복잡하지 않게 만들고 재사용성을 높임
  -- inheritance(상속) : 불필요한 코드를 줄여 재사용성을 높임
  -- Abstraction(추상화) : 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화함
  -- polymorphism(다형성) : 동일한 메서드에 대해 if/else와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것 가능

🌚 객체지향 차이점

• 은닉화의 한계
  -- Java나 TypeScript 프로그래밍 언어는 클래스 내부에서만 쓰이는 속성 및 메서드를 구분시키기 위해 'private'이라는 키워드 제공
  -- 은닉화를 도와주는 기능을 Javascript는 지원하는 브라우저가 적다.
  -- TypeScript 예제 : 'private'키워드 사용으로 클래스 내부에서만 사용 가능 ▼

// TypeScript 문법입니다.

class Animal {
  private name: string;

  constructor(theName: string) {
    this.name = theName;
  }
}

new Animal("Cat").name; // 사용 불가
// Property 'name' is private and only accessible within class 'Animal'. 

-- js에서는 은닉화를 돕기 위해 일반적으로 클로저 모듈 패턴 사용

• 추상화(interface 키워드) 기능의 부재
  -- 속성과 메서드의 이름만 노출시켜서 사용을 단순화한다는 의미를 가짐
• 인터페이스의 단순화를 의미
• java/ typescript 언어의 주요 기능인 interface 예제 ▼
  -- "이 클래스는 메서드 이름이 의도한 바대로 작동할 것이다"라는 것을 명백히 드러나게 해줌
  -- 어떤 클래스가 외부 공개용으로 모듈처럼 작성할 때에 빛을 발함
  -- 대표적인 사용 예시 : API(Application Programming Interface)

// TypeScript 문법입니다.

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  setTime(d: Date) {
    this.currentTime = d;
  }
  constructor(h: number, m: number) {}
}

🌚 프로토타입과 클래스

• Javascript는 프로토타입(prototype) 기반 언어
  -- 여기서 프로토타입은 원형 객체
• OOP 패턴으로 구현한 Human 예시

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human; 
Human.prototype === kimcoding.__proto__; 
Human.prototype.sleep === kimcoding.sleep;

• Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계
  

• Array(배열) 클래스와 인스턴스, 그리고 프로토타입의 관계
  

🌚 프로토타입 체인

• 클래스 Human의 속성과 메소드 예시

let kimcoding = new Human('김코딩', 30);

// 속성
kimcoding.age;
kimcoding.gender;
// 메서드
kimcoding.eat();
kimcoding.sleep();

• 학생은 학생이기 이전에 사람이다. 따라서 클래스 'student'는 'human'의 기본적인 메서드를 상속받을 수 있다.
  -- 박해커가 학생이라고 하여 age, gender와 같은 속성이 존재하지 않거나 sleep()이나 eat()이라는 메서드를 사용할 수 없을까? -> No!
  -- 부모 클래스(Human) : 속성과 메서드를 물려줌
  -- 자식 클래스(Studens) : 물려받는 클래스
  -- 이 과정을 상속이라고함

let parkhacker = new Student('박해커', 22);

// 속성
parkhacker.grade;
// 메서드
parkhacker.learn();

---

• DOM과 프로토타입
  -- 브라우저에서 DOM을 이용하면

document.createElement('div')로
새로운 div엘리먼트를 만들 수 있다.

이렇게 생성된 div엘리먼트는
HTMLDivElement 라는 클래스의 인스턴스임!!

• DOM 엘리먼트는 innerHTML, append()와 같은 메서드가 있음. 각각 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해 Element라는 공통의 부모가 있음을 알 수 있죠?
• div 엘리먼트의 상속 관계 ▼
  
  -- 화살표 방향을 부모를 가르킴
  -- EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재한다.
  -- 인스턴스의 proto 를 이용하면 이를 더 확실하게 확인 가능

🌚 22일차 수업을 마치며...

🌚는 내얼굴 낯빛