공부시간 : 19:30 ~ 22:00 + α

오늘의 공부
[JS/Node] 객체 지향 JavaScript : 클래스를 이용한 모듈화, Prototype

💡 클래스를 이용한 모듈화

💜 클래스와 인스턴스

🤍 객체 지향 JavaScript

1. 객체 지향 프로그래밍
   : 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴
   : 청사진은 클래스(class), 청사진을 바탕으로 한 객체를 인스턴스 객체(instance object)라고 생각하면 이해가 쉬움

2. 객체를 만들고 이용하는 방법
   : 일반적인 함수를 정의하듯이 만들면 되지만, 이용하는 방법은 조금 다름
   : new 키워드를 이용하여, 새로운 인스턴스를 만들어서 실행
   : 클래스를 만들 때에는 보통 대문자, 일반명사로 만드는 것을 암묵적인 규칙으로 가지므로 다른 함수와 구별 가능
   : 클래스를 만드는 새로운 문법이 ES6 에 도입되어, 최근에는 ES5 가 아닌 ES6 방식을 주로 이용

// 예시 1. 클래스 만들기
class Car {
  constructor(brand, name, color) {
   // 인스턴스가 만들어질 때 실행되는 코드
  }
}

// ES6 에서는 class 라는 키워드를 이용해서 정의
// 인스턴스가 만들어질 때 실행되는 코드 부분의 함수를 
// 객체지향 프로그래밍에서 생성자(constructor) 함수라고 함


// 예시 2. 인스턴스 만들기
let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');

// 인스턴스를 만들 때는 new 키워드 사용
// 생성자 함수가 실행되어, 변수에 클래스의 설계와 동일한 새로운 인스턴스가 할당됨
// 각각의 인스턴스는 클래스의 고유한 속성과 메소드를 가지게 됨

3. 속성과 메소드
   : 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용 가능
   : 자동차를 예로 들자면, 속성에는 브랜드, 차종이름, 색상 등이 있을 수 있으며 메소드(객체에 딸린 함수)에는 연료주입, 운전 등이 있을 수 있음

// 예시 1. 속성
class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

// 여기서 this 는 인스턴스 객체를 의미
// parameter 로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성시 지정하는 값
// this 에 할당한다는 것은, 만들어진 인스턴스에 해당 브랜드, 차종이름, 색상을 부여하겠다는 의미

// 예시 2. 메소드
class Car {
  constructor(brand, name, color) {
    /* 생략 */
  }
  rafuel() {
  }
  drive() {
  }
}

// ES6 에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의해야 함

4. 용어 살펴보기

• prototype : 모델의 청사진을 만들 때 쓰는 원형 객체(Original form)
• constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수
• this : new 키워드로 인스턴스를 생성했을 경우, 해당 인스턴스가 바로 this 의 값

💡 Prototype

💜 객체 지향 프로그래밍

🤍 절차적 언어

• 객체 지향 프로그래밍이 등장하기 전 절차 언어가 있었음
• 초기의 C, 포트란 등의 언어들이 객체 지향의 개념이 없는 절차 언어
• 절차적 언어는 순차적인 명령의 조합으로 이루어짐

🤍 객체 지향 언어

• 객체 지향 프로그래밍이 등장하면서, 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어서, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어 내는 방식이 고안됨
• 즉, 데이터와 기능이 별개로 취급되지 않고, 한꺼번에 묶어서 처리할 수 있게 됨
• "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성
• 현대의 언어들은 대부분 객체 지향의 특징을 지님
• 대표적으로 Java, C++, C# 과 같은 언어들이 있음
• JavaScript 는 엄밀하게는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성 가능

🤍 OOP

• OOP 는 프로그램 설계 철학
• OOP 의 모든 것은 '객체'로 그룹화되며, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지됨
• OOP 의 4가지 주요 개념을 통해 재사용성을 얻을 수 있음
• 객체 내에는 '데이터와 기능이 함께 있다'는 원칙에 따라 메소드와 속성이 존재

📌 OOP Basic Concepts

1. Encapsulation(캡슐화)
   : 데이터와 기능을 하나의 단위로 묶는 것
   : 데이터(속성)과 기능(메소드)들이 느슨하게 결합(= 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합)되므로, 언제든 구현을 수정 가능
   : 구현은 숨기고, 동작을 노출시키는 '은닉(Hiding)' 특성을 가짐
   : 추상화에 비해, 포커스가 코드나 데이터의 은닉에 맞춰져 있음
   : 코드가 복잡해지지 않게 만들고, 재사용성을 높인다는 장점이 있음

2. Inheritance(상속)
   : 기본 클래스(Base class)의 특징을 파생 클래스(Derive class)가 물려받는 것
   : 불필요한 코드를 줄여 재사용성을 높인다는 장점이 있음

3. Abstraction(추상화)
   : 내부 구현은 복잡한데에 비해, 실제로 노출되는 부분은 단순하게 만든다는 개념
   : 추상화의 과정을 통해 너무 많은 기능이 노출되지 않아 인터페이스가 단순해지므로, 예기치 못한 사용상의 변화가 일어나지 않도록 만듦
   : 캡슐화에 비해, 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고 단순히 이름으로 정의하는 것에 포커스가 맞춰져 있음
   : 코드가 복잡해지지 않게 만들고, 단순화된 사용으로 인해 변화에 대한 영향을 최소화한다는 장점이 있음

4. Polymorphism(다형성)
   : 같은 메소드라 하더라도 다른 방식으로 구현될 수 있음을 의미

🤍 클래스와 인스턴스

• 클래스는 일종의 원형(Original form)으로, 세부사항(속성)이 들어가지 않은 단순히 객체를 생성하기 위한 아이디어나 청사진을 의미
• 인스턴스는 클래스에 세부사항(속성)이 들어간 객체로, 클래스의 사례(Instance object)를 의미
• 생성자 함수(Constructor)는 세부사항(속성)을 넣어 객체를 만드는 역할을 하며, 클래스는 이러한 생성자 함수(Constructor)를 포함함