Quest04

Quest 04. OOP의 기본

Introduction

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

Topics

• 객체지향 프로그래밍
  • 프로토타입 기반 객체지향 프로그래밍
  • 자바스크립트 클래스
    • 생성자
    • 멤버 함수
    • 멤버 변수
  • 정보의 은폐
  • 다형성
• 코드의 재사용

Resources

• MDN - Classes
• MDN - Inheritance and the prototype chain
• MDN - Inheritance
• Polymorphism
• Class Composition
• Inheritance vs Composition

Checklist

• 객체지향 프로그래밍은 무엇일까요?
  • #로 시작하는 프라이빗 필드는 왜 필요한 것일까요? 정보를 은폐(encapsulation)하면 어떤 장점이 있을까요?
  • 다형성이란 무엇인가요? 다형성은 어떻게 코드 구조의 정리를 도와주나요?
  • 상속이란 무엇인가요? 상속을 할 때의 장점과 단점은 무엇인가요?
  • OOP의 합성(Composition)이란 무엇인가요? 합성이 상속에 비해 가지는 장점은 무엇일까요?
• 자바스크립트의 클래스는 어떻게 정의할까요?
  • 프로토타입 기반의 객체지향 프로그래밍은 무엇일까요?
  • 자바스크립트의 클래스는 이전의 프로토타입 기반의 객체지향 구현과 어떤 관계를 가지고 있나요?

Quest

• 웹 상에서 동작하는 간단한 바탕화면 시스템을 만들 예정입니다.
• 요구사항은 다음과 같습니다:
  • 아이콘은 폴더와 일반 아이콘, 두 가지의 종류가 있습니다.
  • 아이콘들을 드래그를 통해 움직일 수 있어야 합니다.
  • 폴더 아이콘은 더블클릭하면 해당 폴더가 창으로 열리며, 열린 폴더의 창 역시 드래그를 통해 움직일 수 있어야 합니다.
  • 바탕화면의 생성자를 통해 처음에 생겨날 아이콘과 폴더의 개수를 받을 수 있습니다.
  • 여러 개의 바탕화면을 각각 다른 DOM 엘리먼트에서 동시에 운영할 수 있습니다.
  • Drag & Drop API를 사용하지 말고, 실제 마우스 이벤트(mouseover, mousedown, mouseout 등)를 사용하여 구현해 보세요!

Advanced

• 객체지향의 역사는 어떻게 될까요?
• Smalltalk, Java, Go, Kotlin 등의 언어들로 넘어오면서 객체지향 패러다임 측면에서 어떤 발전이 있었을까요?