2022-01-17 T.I.L

정종훈·2022년 3월 12일

T.I.L

목록 보기

7/20

클래스를 이용한 모듈화 성취목표!

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

캡슐화 => 높은 응집도와 낮은 결합도를 유지할 수 있도록 설계해야 요규사항에 유연하게 대처할 수 있는데 캠슐화는 낮은 결합도를 유지할 수 있게 데이터(속성)와 기능(메소드)을 하나의 객체 안에 넣어 묶는 것!

상속 => 부모 클래스(기본 클래스) 의 특징을 자식 클래스(파생 클래스)가 물려받는 것
추상화 => 내부 구현은 복잡한데, 실제노출되는 부분은 단순하게 만든다는 개념

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

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

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

Intro

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

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

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

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

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

객체 Review

메소드 호출 실습하기

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

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

example) 메소드 호출의 예제

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

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

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

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!

function Car(color) { } // Car는 Class!
let avante = new Car('blue'); // new 키워드 사용!
let mini = new Car('cyan');

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

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

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

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

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

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

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

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

tip) 속성과 메소드의 차이 꼭 확인!!

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

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

객체 지향 프로그래밍(Object Oriented Programming)

- 우선 태초에 절차 지향 프로그래밍이 있음. C언어 같은

절차적 언어는 순차적인 명령의 조합.

그런데 객체 지향 언어로 바뀌면서

"클래스" 라고 부르는 대이터 모델의 청사진을 사용해 코드 작성

대표적으로 Java, C++, C# 임

자바스크립트는 프로토타입 기반 객체지향 언어라 객체 지향 언어는 아니지만 , 객체 지향 패턴으로 작성 가능!

OOP의 모든 것은 "객체"로 그룹화 됨

객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지됨

- 객체 내에는 "데이터와 기능이 함께 있다"는 원칙에 따라 메소드와 속성이 존재함.

예를 들어, 자동차는 빨간색 속성을 가지고 최고 속력은 200km/h를 내게 값을 부여하자!

OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있음.
OOP는 프로그램 설계 철학

클래스와 인스턴스

- 클래스는 일종의 원형으로, 속성(세부사항)이 들어가지 않은, 객체를 생성하기 위한 아이디어나 청사진. (세부사항 넣으면 객체!)

- 인스턴스는 클래스의 사례(인스턴스 오브젝트)

- 클래스는 객체를 만들기 위한 생성자함수(constructor) 포함! 이 생성자함수로 속성( 세부 사항 넣어줌) like 함수의 인자

속성과 메소드의 차이 비유

- 속성 : 자동차의 색상, 가격, 속력 등의 고유 소성

- 메소드 : 시작, 후진, 전진, 멈춤등 자동차의 기능

OOP Basic Concepts

Encapsulation (캡슐화)

- 데이터와 기능을 하나의 단위로 묶는 것

데이터(속성)와 기능(메소드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것

- 은닉: 구현은 숨기고, 동작은 노출시킴

객체 외부에서 필요한 동작(메소드)만 노출시킴

- 느슨한 결합: 언제든 구현을 수정할 수 있음

예를 들어 마우스 구동을 위한 코드 작성할때 스위치가 눌리고, 전기 신호가 생겨서, 전선을 타고 흐르고.. 와 같은 전 과정 ㄴㄴ

마우스의 상태를 속성으로 정하고 클릭, 이동을 메소드로 정해서 인스턴스 객체의 기능을 상상할 수 있게 함

Inheritance (상속)

- 부모 클래스(기본 클래스)의 특징을 자식 클래스(파생 클래스)가 물려받는 것

예를 들어 사람이라는 클래스에는 나이, 성별 등의 속성과 먹다, 자다 라는 메서드가 있음

여기서 학생이라는 클래스를 새로만들고 싶을때 사람이라는 클래스의 나이 성별은 상속받아도 됨!

Abstraction (추상화)

- 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념. 인터페이스가 단순해짐

- 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면,

추상화는 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스

클래스 정의 시, 메소드와 속성만 정의한 것을 인터페이스라 부름.

Polymorphism (다형성)

- 예를 들어 말하다 라는 동작의 본질은 같지만

동물들 마다 말하는 동작에서 다형성을 가짐!

DOM을 배울때 Textarea, Select, Checkbox 등은 HTML에서 요소라고 부름.

근데 이것들의 공통 부모인 HTML Element라는 클래스에 render라는 메소드를 만들고 상속을 받게 만 듬

핵심은 render라는 메소드가 각각 다르게 작동한다는거임...

Ex1) 만약 Polymorphism이 없다면

	
if (type === 'select') {
  renderSelect()
}
else if (type === 'text') {
  renderTextBox()
}
else if (type === 'checkbox') {
  renderCheckBox()
}
//...

기본 클래스에 종류별로 분기를 시켜 하나하나 다르게 만들어아햠...

그래서 render의 개념은 부모가 갖는게 합리적

OOP의 장점과 주요 개념.

- 캡슐화는 코드를 복잡하지 않게 만들고, 재사용성을 높임.

- 추상화는 단순화된 사용으로 인해 변화에 대한 영향을 최소화함

- OOP의 의미는 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론.

질문

추상화와 캡슐화는 어떻게 다른가요?
인터페이스(Interface)란 무엇일까요?
JavaScript에서 class 키워드를 사용하면, 메소드의 은닉이 가능한가요?

클래스와 프로토타입

before you learn

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

[Object prototypes - Web 개발 학습하기 | MDN

Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해

developer.mozilla.org](https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes)

Ex2) 예제.

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

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

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

console.log(Human.prototype)//
{constructor: ƒ, sleep: ƒ}


console.log(Human.prototype.constructor)//
class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

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

console.log(kimcoding)//

Human {name: '김코딩', age: 30}



Human.prototype.constructor === Human; // true
Human.prototype === kimcoding.__proto__; // true
Human.prototype.sleep === kimcoding.sleep; // true

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

프로토타입 체인

상속 DOM 버전비유

document.createElement('div') 하면 div 엘리먼트 만들기 가능

console.log 쳐보면 맽 밑에 prototype에 HTMLDivElement라는 클래스의 인스턴스라고 나옴

모든 DOM 엘리먼트는 textContent와 같은 속성, 또는 append() 같은 메소드가 있음.

EventTarget의 부모로는 모든 클래스의 조상인 Object가 존재함.

인스턴스의 __proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 트로토타입을 탐색 할 수 있음.

Ex)

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

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



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

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

정종훈

괴발개발자에서 개발자로 향해보자

이전 포스트

2022-01-07 T.I.L

다음 포스트

2022-01-17 T.I.L

T.I.L

클래스를 이용한 모듈화 성취목표!

Intro

객체 Review

메소드 호출 실습하기

example) 메소드 호출의 예제

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

클래스와 인스턴스

객체 지향 프로그래밍(Object Oriented Programming)

클래스와 인스턴스

속성과 메소드의 차이 비유

OOP Basic Concepts

Ex1) 만약 Polymorphism이 없다면

OOP의 장점과 주요 개념.

질문

클래스와 프로토타입

Ex2) 예제.

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

프로토타입 체인

상속 DOM 버전비유

Ex)

2022-01-07 T.I.L

2022-01-18 T.I.L

0개의 댓글