- 이번 퀘스트에서는 바닐라 자바스크립트의 객체지향 프로그래밍에 대해 알아볼 예정입니다.
- 객체지향 프로그래밍
- 프로토타입 기반 객체지향 프로그래밍
- 자바스크립트 클래스
- 정보의 은폐
- 다형성
- 코드의 재사용
Object Oriented Programming
프로그래밍에서 필요한 데이터를 추상화시켜 상태(속성)와 행위(행동)를 가진 객체를 만들고, 그 객체들 간 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법.
상태와 행위를 가진 객체들을 레고 블럭처럼 조립해서 하나의 프로그램을 만드는 것을 객체 지향 프로그래밍이라고 한다.
#로 시작하는 프라이빗 필드는 왜 필요한 것일까요? 정보를 은폐(encapsulation)하면 어떤 장점이 있을까요?
- Private 접근 제어자(prefix로 #을 이용)를 사용하여 선언된 클래스 멤버는 외부에 공개되지 않으며, 외부에서는 직접 접근할 수 없습니다. 즉 프로그램은 private 멤버에 직접 접근할 수 없으며, 해당 객체의 public 메소드를 통해서만 접근할 수 있습니다.
- 캡슐화(encapsulation) : 데이터 속성과 행동을 하나의 함수(prototype)에서 정의하며, 외부에서의 접근을 허락하지 않습니다.
- 이러한 특성을 이용하여 데이터를 좀 더 안전하게 보관할 수 있고, 작업자로 하여금 정보은닉을 통해 복잡성을 덜어주는 역할을 합니다.
- 다형성이란 무엇인가요? 다형성은 어떻게 코드 구조의 정리를 도와주나요?
- 하나의 클래스가 다양한 형태와 동작방식을 가질 수 있다는 개념으로, 동일한 prototype임에도 실행결과가 다른 다양한 객체로써 활용할 수 있다는 의미입니다.
- 주로 상속을 통해 클래스를 확장해가는 것으로 이해하게 되며, 클래스의 속성이나 동작방식을 넓혀가는 것을 의미합니다.
- 상속이란 무엇인가요? 상속을 할 때의 장점과 단점은 무엇인가요?
- 간단히 말하면 class 확장을 의미합니다.
- 모든 class는 다른 class의 속성과 행동을 유지한채 종속적인 관계의 class를 생성할 수 있습니다.
장점)
- 기존 클래스의 코드를 재사용할 수 있어 개발 시간이 단축됩니다.
- 먼저 작성된 검증된 코드를 재사용하기 때문에 신뢰성 있는 프로그램을 개발할 수 있습니다.
- 클래스 간 계층적 분류 및 관리가 가능하여 유지보수가 용이합니다.
단점)
- 기능 추가/변경시에 예외나 버그가 발생하게 되면 어디에서 발생한지 예측하기가 어렵습니다. 상속 구조가 복잡하면 더욱 예측이 어려워집니다.
- 불필요한 기능을 원치 않는다 해도 상속해야 합니다.
- 캡슐화 원칙을 위반합니다. 상위 클래스의 구현이 하위 클래스에게 노출되는 상속은 캡슐화를 깨뜨립니다. 캡슐화가 깨짐으로서 하위 클래스가 상위 클래스에게 강하게 경합, 의존하게 됩니다. 강한 결합과 의존은 변화에 유연하게 대처하기 어려워지게 합니다.
- 남용 시 하나의 기능을 추가하기 위해 필요 이상으로 많은 수의 클래스를 추가해야하는 '클래스 폭발'이 발생할 수 있습니다.
- OOP의 합성(Composition)이란 무엇인가요? 합성이 상속에 비해 가지는 장점은 무엇일까요?
- 합성(Composition): 중복되는 로직들을 갖는 객체를 구현하고, 이 객체를 주입받아 중복 로직을 호출함으로써 퍼블릭 인터페이스를 재사용하는 방법입니다.
- 합성이 상속에 비해 가지는 장점: 합성을 이용하게 되면 상속과는 달리 객체의 내부는 공개되지 않고 인터페이스를 통해 코드를 재사용 할 수 있습니다.
- 이러한 이유로 구현에 대한 의존성을 인터페이스에 대한 의존성으로 변경하여 결합도를 낮출 수 있습니다.
(ES6~ 기준) Class 키워드를 이용하여 클래스를 정의합니다.
- 프로토타입 기반의 객체지향 프로그래밍은 무엇일까요?
- class 기반의 객체지향과 구별되는 객체지향 프로그래밍
- 객체를 재활용 할 경우 대여의 개념인 class와는 다르게(객체가 서로 나뉘어져 있음)
항상 기존 객체(원형)을 참조한다는 개념
- 원시타입을 제외한 모든 변수, 함수, 컴포넌트는 프로토타입을 보유한다는 특징이 있다.
- 자바스크립트의 클래스는 이전의 프로토타입 기반의 객체지향 구현과 어떤 관계를 가지고 있나요?
- ES6 이전의 자바스크립트에서는 class 키워드가 없어서 객체를 생성할 때 별도의 내부 생성자 없이 바로 객체를 생성하였고, 이에 따른 속성이나 행동 값들을 부여했었다.
- ES6 이후 생긴 class에서는 constructor 생성자를 통해 정의해줄 수 있고, 외부 생성자인 new를 통해 class를 생성하거나 상속받을 수 있다.
- 웹 상에서 동작하는 간단한 바탕화면 시스템을 만들 예정입니다.
- 요구사항은 다음과 같습니다:
- 아이콘은 폴더와 일반 아이콘, 두 가지의 종류가 있습니다.
- 아이콘들을 드래그를 통해 움직일 수 있어야 합니다.
- 폴더 아이콘은 더블클릭하면 해당 폴더가 창으로 열리며, 열린 폴더의 창 역시 드래그를 통해 움직일 수 있어야 합니다.
- 바탕화면의 생성자를 통해 처음에 생겨날 아이콘과 폴더의 개수를 받을 수 있습니다.
- 여러 개의 바탕화면을 각각 다른 DOM 엘리먼트에서 동시에 운영할 수 있습니다.
- Drag & Drop API를 사용하지 말고, 실제 마우스 이벤트(mouseover, mousedown, mouseout 등)를 사용하여 구현해 보세요!
- 객체지향의 역사는 어떻게 될까요?
- Smalltalk, Java, Go, Kotlin 등의 언어들로 넘어오면서 객체지향 패러다임 측면에서 어떤 발전이 있었을까요?
