WebDevCurriculum / OOP의 기본

Knowre-Dev의 WebDevCurriculum의 레포지토리를 Fork하여 퀘스트를 해결해 나가는 글입니다.

Introduction

• 이번 퀘스트에서는 바닐라 자바스크립트의 객체지향 프로그래밍에 대해 알아볼 예정입니다.

Checklist

• 객체지향 프로그래밍은 무엇일까요?

객체지향 프로그래밍(Object-Oriented Programming, OOP)은 컴퓨터 프로그래밍 패러다임 중 하나로, 객체(Object)를 중심으로

프로그래밍 하는 방법입니다.

 

객체란 데이터와 이를 처리하는 코드(메소드)를 하나의 단위로 묶은 것으로, 프로그램에서 필요한 여러 가지 객체를 정의하고 이들이

상호작용하도록 하는 것이 OOP의 주요한 목적입니다.

 

OOP에서 객체는 클래스(Class)를 기반으로 생성됩니다. 클래스는 객체의 공통적인 속성(데이터)과 동작(메소드)을 정의한 것으로,

객체를 생성하기 위한 청사진(Blueprint) 역할을 합니다.

 

OOP의 특징으로는 캡슐화(Encapsulation), 상속성(Inheritance), 다형성(Polymorphism) 등이 있습니다. 캡슐화는 데이터와

메소드를 하나로 묶어 외부에서 직접 접근하지 못하게 하고, 메소드를 통해 간접적으로 접근할 수 있도록 하는 것입니다.

상속성은 이미 정의된 클래스를 기반으로 새로운 클래스를 정의할 수 있도록 하는 것입니다. 다형성은 동일한 이름의 메소드가 다양한

객체에서 서로 다른 방식으로 동작할 수 있는 것을 의미합니다.

 

OOP는 대규모 복잡한 시스템을 개발하는 데 효과적이며, 코드의 재사용성과 유지보수성을 높일 수 있습니다.

 

• #로 시작하는 프라이빗 필드는 왜 필요한 것일까요? 정보를 은폐(encapsulation)하면 어떤 장점이 있을까요?

#로 시작하는 프라이빗 필드(Private Field)는 해당 필드가 선언된 클래스 내부에서만 접근 가능하도록 제한하는 접근 제한자(Access Modifier)입니다. 이러한 프라이빗 필드를 사용하여 정보 은폐(encapsulation)를 구현할 수 있습니다.

 

정보 은폐란, 객체의 내부 데이터나 구현 방법 등을 외부에 감추는 것을 의미합니다. 즉, 외부에서 객체의 내부 상태를 직접적으로 변경하지 못하도록 하여 객체의 불변성(Immutability)과 안정성을 보장하고, 객체의 내부 구현 방법을 변경해도 외부 코드에 영향을 미치지 않도록 하는 것입니다.

 

정보 은폐를 구현하는 가장 대표적인 방법 중 하나는, 프라이빗 필드를 사용하여 해당 필드에 접근하는 메소드(Getter, Setter)를 제공하는 것입니다. 이렇게 하면 외부에서는 객체의 내부 상태를 변경할 수 없고, Getter를 통해 필요한 정보만 가져올 수 있습니다. 이는 객체의 불변성과 안정성을 보장하고, 객체의 내부 구현 방법 변경에 유연하게 대처할 수 있도록 합니다.

 

또한, 정보 은폐는 코드의 가독성과 유지보수성을 높이는데도 도움이 됩니다. 외부에서 필드에 직접 접근할 경우, 해당 필드를 사용하는 모든 코드를 일일이 변경해야 하는 경우가 발생할 수 있습니다. 하지만 정보 은폐를 구현하면, 필드에 직접 접근하는 코드가 없어지므로 필드를 변경해도 외부 코드에 영향을 미치지 않아 유지보수가 용이해집니다.

 

• 다형성이란 무엇인가요? 다형성은 어떻게 코드 구조의 정리를 도와주나요?

다형성(Polymorphism)은 객체지향 프로그래밍의 개념 중 하나로, 하나의 인터페이스나 클래스가 여러 개의 구현체를 가질 수 있는 성질을 의미합니다. 즉, 같은 인터페이스나 클래스를 사용하여 다양한 구현체를 다룰 수 있는 것입니다.

 

다형성은 코드의 재사용성과 유지보수성을 높이는 데 큰 도움을 줍니다. 예를 들어, 하나의 인터페이스를 구현하는 다양한 클래스가 있다면, 이들을 같은 인터페이스 타입으로 묶어서 사용할 수 있습니다. 이는 코드의 가독성을 높이고, 유지보수를 용이하게 만들어 줍니다. 또한, 다형성을 이용하면 코드의 확장성도 높일 수 있습니다. 새로운 클래스를 추가하더라도, 기존 코드에 영향을 미치지 않고 새로운 클래스를 사용할 수 있습니다.

 

다형성을 구현하는 방법으로는, 상속(Inheritance)과 인터페이스(Interface)가 있습니다. 상속을 이용하여 부모 클래스의 메소드를 오버라이드하여 다양한 구현체를 만들 수 있으며, 인터페이스를 이용하여 다양한 클래스가 같은 메소드를 구현할 수 있도록 합니다.

 

이처럼 다형성은 객체지향 프로그래밍에서 중요한 개념 중 하나이며, 코드의 구조를 정리하는 데 매우 유용합니다. 다형성을 이용하면 코드를 더욱 간결하게 작성할 수 있으며, 유지보수성과 재사용성도 높일 수 있습니다.

 

• 상속이란 무엇인가요? 상속을 할 때의 장점과 단점은 무엇인가요?

상속(Inheritance)이란 객체지향 프로그래밍에서 기존 클래스를 확장하여 새로운 클래스를 생성하는 기법입니다. 상속을 이용하면, 기존 클래스의 필드와 메소드를 재사용하여 새로운 클래스를 만들 수 있으며, 이를 통해 코드의 중복을 줄이고 코드의 재사용성을 높일 수 있습니다.

 

상속을 사용할 때의 장점은 다음과 같습니다.

1. 코드의 재사용성이 높아집니다.
2. 기존 클래스의 기능을 확장하거나 수정할 수 있습니다.
3. 클래스 간의 계층 구조를 구성하여 객체 지향 프로그래밍의 다형성을 구현할 수 있습니다.
4. 클래스 간의 의존성을 줄일 수 있습니다.

하지만, 상속을 사용할 때에는 몇 가지 단점도 있습니다.

1. 클래스 간의 결합도가 높아지기 때문에, 하위 클래스에서 상위 클래스의 변경사항에 민감해질 수 있습니다.
2. 하위 클래스에서 상위 클래스의 private 멤버에 접근할 수 없습니다.
3. 상위 클래스의 변경사항이 전체 시스템에 영향을 미칠 수 있습니다.

이러한 단점들을 최소화하기 위해서는, 상속을 사용할 때에는 잘 설계된 계층 구조를 만들어야 합니다. 또한, 상속보다는 인터페이스를 사용하는 것이 더욱 유연한 코드를 작성할 수 있기 때문에, 인터페이스를 사용할 수 있는 경우에는 상속보다 인터페이스를 사용하는 것이 좋습니다.

 

• OOP의 합성(Composition)이란 무엇인가요? 합성이 상속에 비해 가지는 장점은 무엇일까요?

OOP의 합성(Composition)은 객체 지향 프로그래밍에서 하나의 클래스가 다른 클래스의 객체를 포함하여 기능을 구현하는 것을 의미합니다. 이를 통해 클래스 간에 느슨한 결합도를 유지할 수 있으며, 코드의 재사용성과 유지보수성을 향상시킬 수 있습니다.

 

합성은 상속과는 달리 클래스 간의 강한 관계를 갖지 않습니다. 대신, 하나의 클래스가 다른 클래스를 포함하여 해당 클래스의 기능을 사용하게 됩니다. 이러한 방식으로 클래스 간의 결합도를 줄일 수 있으며, 코드를 더욱 모듈화하고 유연하게 만들어 줍니다.

 

상속은 부모 클래스의 구현 세부 사항을 자식 클래스로 물려주기 때문에 자식 클래스가 부모 클래스에 강하게 결합됩니다. 이로 인해 코드의 재사용성이 떨어지고 유지보수성이 감소할 수 있습니다. 반면, 합성은 클래스 간의 결합도를 줄여서 코드의 재사용성과 유지보수성을 향상시킵니다.

 

또한 합성은 런타임에 객체를 동적으로 생성할 수 있으므로, 동적으로 생성되는 객체에 따라 기능을 동적으로 변화시킬 수 있습니다. 이는 더욱 유연한 코드를 작성할 수 있도록 도와줍니다.

 

따라서, 합성은 코드의 재사용성과 유지보수성을 높이는 장점을 갖습니다. 또한, 클래스 간의 느슨한 결합도를 유지하기 때문에 코드를 더욱 모듈화하고 유연하게 만들어 줍니다.

 

• 자바스크립트의 클래스는 어떻게 정의할까요?

자바스크립트의 클래스는 ECMAScript 2015(ES6)부터 도입된 개념입니다. 클래스는 객체 지향 프로그래밍(OOP)에서 일반적으로 사용되는 개념으로, 객체를 생성하는 템플릿이라고 볼 수 있습니다. 클래스를 사용하면 객체의 속성과 메소드를 정의하고, 이를 바탕으로 객체를 생성할 수 있습니다.

 

자바스크립트의 클래스는 다음과 같이 정의할 수 있습니다.

class MyClass {
  // 클래스의 속성 정의
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }

  // 클래스의 메소드 정의
  myMethod() {
    console.log('Hello, World!');
  }
}

위 예시에서 class 키워드를 사용하여 클래스를 정의합니다. constructor 메소드는 클래스가 인스턴스화될 때 호출되며, 객체의 초기 상태를 설정합니다. 이후에 클래스의 속성과 메소드를 정의할 수 있습니다.

 

클래스를 사용하여 객체를 생성하려면 new 키워드를 사용합니다.

const myObject = new MyClass('value1', 'value2');

위 예시에서 new 키워드를 사용하여 MyClass의 인스턴스를 생성합니다. 생성자 함수 constructor의 매개변수 prop1과 prop2를 전달하고, 이를 바탕으로 객체를 생성합니다.

 

클래스는 상속(inheritance)을 지원합니다. 상속을 통해 클래스 간에 코드를 재사용하고, 코드의 구조를 간소화할 수 있습니다. 클래스의 상속은 extends 키워드를 사용하여 정의할 수 있습니다.

class MyChildClass extends MyClass {
  myMethod() {
    super.myMethod(); // 부모 클래스의 메소드 호출
    console.log('Hello, Child!');
  }
}

위 예시에서 MyChildClass는 MyClass를 상속하고 있습니다. super 키워드를 사용하여 부모 클래스의 메소드를 호출할 수 있습니다.

따라서, MyChildClass의 myMethod 메소드는 부모 클래스의 myMethod 메소드를 호출한 뒤에 추가적인 동작을 수행합니다.

 

위와 같이 자바스크립트의 클래스를 정의하고 사용할 수 있습니다.

 

• 프로토타입 기반의 객체지향 프로그래밍은 무엇일까요?

프로토타입 기반의 객체지향 프로그래밍(Prototype-based Object-Oriented Programming)은 객체지향 프로그래밍의 한 방식으로, 객체를 생성하는 기반이 프로토타입(Prototype)으로 되어 있습니다.

자바스크립트에서는 프로토타입 기반의 객체지향 프로그래밍을 사용합니다.

 

프로토타입은 객체를 생성하는 데 사용되는 원형(Prototype) 객체로, 다른 객체에게 상속될 수 있습니다.

자바스크립트에서는 모든 객체가 프로토타입을 가지며, 다른 객체를 상속하는 것이 가능합니다.

 

자바스크립트에서 객체를 생성하는 방법은 다음과 같습니다.

const myObject = { /* 객체의 속성과 메소드 */ };

위 예시에서 myObject는 객체를 생성하는 가장 간단한 방법입니다. 객체를 생성할 때는 중괄호({})를 사용하여 객체의 속성과 메소드를 정의합니다. 이때, 객체가 생성될 때 자동으로 프로토타입이 생성되며, 생성된 객체는 프로토타입을 상속합니다.

const myObject = { /* 객체의 속성과 메소드 */ };
const myPrototype = Object.getPrototypeOf(myObject);
console.log(myPrototype); // Object {}

위 예시에서 Object.getPrototypeOf() 함수를 사용하여 객체 myObject의 프로토타입을 가져올 수 있습니다. 이때, myObject의 프로토타입은 Object 객체입니다. 따라서, myObject는 Object 객체의 속성과 메소드를 상속합니다.

 

프로토타입 기반의 객체지향 프로그래밍에서는 객체를 상속할 때, 기존의 객체를 복제하는 것이 아니라, 기존의 객체를 참조하는 방식을 사용합니다. 이를 프로토타입 체인(Prototype Chain)이라고 합니다. 프로토타입 체인을 사용하면 객체의 속성과 메소드를 쉽게 상속하고, 상속 관계를 동적으로 변경할 수 있습니다.

 

프로토타입 기반의 객체지향 프로그래밍은 객체를 생성하는 방식이 다른 객체지향 언어와 다르기 때문에, 처음에는 이해하기 어려울 수 있습니다. 하지만, 프로토타입 체인을 이해하고 나면 객체를 유연하게 다룰 수 있습니다.

 

• 자바스크립트의 클래스는 이전의 프로토타입 기반의 객체지향 구현과 어떤 관계를 가지고 있나요?

→ class가 없던 Javascript는 객체를 생성할 때 별도의 내부 생성자없이 바로 객체를 생성하였고, 이에 따른 속성이나 행동 값들을 부여해주었다.
→ ES6이후 생긴 class에서는 constructor 생성자를 통해 정의해줄 수 있고, 외부 생성자인 new를 통해 class를 생성하거나 상속받을 수 있다.