JavaScript OOP: 설계도에서 현실로

Source: Dev.to

소개

지금까지는 아마도 코드를 절차적으로 작성해 왔을 것입니다—한 줄을 쓰고, 또 다른 줄을 쓰고, 또 다른 줄을 쓰는 식으로. 마치 헐거운 종이 조각에 레시피를 적어 두는 것과 같습니다. 하지만 전 세계에 체인 레스토랑을 열고 싶다면 어떻게 될까요? 종이 조각에 의존할 수 없습니다. 시스템이 필요합니다.

JavaScript에서 Object‑Oriented Programming (OOP) 은 바로 그 시스템입니다. 이것은 우리 코드가 현실 세계를 모델링하도록 해줍니다.

1. 큰 아이디어: 설계도 vs. 현실

• The Blueprint (The Class): 모든 자동차는 4개의 바퀴, 색상, 그리고 엔진을 가져야 한다고 정의합니다. 또한 자동차가 “Drive”(주행)와 “Brake”(제동) 할 수 있다고 명시합니다.
• The Actual Car (The Object/Instance): 조립 라인에서 나오는 실제 자동차입니다. 하나는 빨간색 테슬라일 수 있고, 다른 하나는 파란색 포드일 수 있습니다. 두 차량 모두 같은 설계도를 따르지만 각각 개별 객체입니다.

2. JavaScript에서 클래스란?

클래스는 JavaScript(ES6에서 도입)에서 예약어로, 객체를 만들기 위한 템플릿 역할을 합니다. 데이터(속성)와 동작(메서드)을 함께 묶어줍니다.

클래스가 없을 때는 코드가 금방 지저분해질 수 있습니다:

let student1Name = "Veer";
let student1Age = 20;

let student2Name = "Ansh";
let student2Age = 22;
// This gets messy fast!

3. “Constructor”: 설정 단계

모든 클래스는 constructor라는 특수 메서드를 정의할 수 있습니다. 이것을 새 객체가 생성될 때 실행되는 조립 라인이라고 생각하면 됩니다.

Student 청사진 만들기

class Student {
    // The constructor is the 'Setup' function
    constructor(name, age, course) {
        this.name = name;   // 'this' refers to the specific student being built
        this.age = age;
        this.course = course;
    }

    // This is a method (action)
    introduce() {
        console.log(`Hi, I'm ${this.name}, a ${this.age}-year-old studying ${this.course}.`);
    }
}

this를 사용하는 이유
클래스 내부에서 this는 현재 생성 중인 특정 인스턴스를 가리키며, 이를 통해 각 객체가 자신의 데이터를 별도로 저장할 수 있습니다.

4. 객체 생성: new 키워드

청사진(클래스)으로부터 실제 객체를 만들려면 new 키워드를 사용합니다. 이 과정을 인스턴스화라고 합니다.

// 하나의 청사진으로부터 두 명의 고유한 학생을 만들기
const student1 = new Student("Veer", 20, "Web Dev");
const student2 = new Student("Ansh", 22, "Data Science");

// 두 학생은 동일한 "행동"을 가집니다
student1.introduce(); // Hi, I'm Veer...
student2.introduce(); // Hi, I'm Ansh...

5. 캡슐화의 힘

캡슐화—OOP의 네 기둥 중 하나—는 복잡한 로직을 클래스 내부에 숨기는 것을 의미합니다. 프로그램의 다른 부분은 메서드가 무엇을 하는지만 알면 되고, 어떻게 하는지는 알 필요가 없습니다.

• 더 조직적: 모든 “Student”‑related 코드가 한 곳에 모여 있습니다.
• 디버깅이 쉬워짐: introduce()가 깨지면, 검사할 위치가 하나뿐입니다.
• 재사용 가능: 몇 줄의 코드만으로 수천 명의 학생을 만들 수 있습니다.

6. 절차적 vs 객체‑지향 스타일

7. 요약 과제: 나만의 도서관 만들기

콘솔에서 다음을 시도해 보세요:

1. 클래스 생성 Book 라는 이름으로.
2. 생성자 추가 title, author, year 를 매개변수로 받도록.
3. 메서드 추가 getAge 라는 메서드로 Current Year - year 를 반환하도록.
4. 두 개의 객체 생성 (가장 좋아하는 책 두 권).
5. 결과 로그 출력 두 객체에 대해 .getAge() 결과를.

class Book {
    constructor(title, author, year) {
        this.title = title;
        this.author = author;
        this.year = year;
    }

    getAge() {
        const currentYear = new Date().getFullYear();
        return currentYear - this.year;
    }
}

// Example usage
const book1 = new Book("1984", "George Orwell", 1949);
const book2 = new Book("The Pragmatic Programmer", "Andrew Hunt & David Thomas", 1999);

console.log(`${book1.title} is ${book1.getAge()} years old.`);
console.log(`${book2.title} is ${book2.getAge()} years old.`);

최종 생각

OOP는 단순히 문법 그 이상이며, 그것은 마인드셋입니다. 이는 코드를 작업의 선형 목록이 아니라 상호 작용하는 객체들의 세계로 생각하도록 격려합니다. 이를 마스터하면 간단한 todo 앱부터 대규모 소셜 미디어 플랫폼까지 무엇이든 만들 수 있습니다.