15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언

15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

thejavascript4kids 2025. 7. 21. 03:36

📘 15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

안녕하세요, 여러분. 오늘은 정말 특별한 도구를 배워볼 거예요. 공장에서 일하는 사람이 되어서 똑같은 모양의 물건을 백 개, 천 개씩 쉽게 만들 수 있다면 어떨까요? 별 모양 쿠키를 만들 때, 쿠키 틀 하나로 원하는 만큼 쿠키를 만들 수 있듯이 말이에요. 바로 클래스(class)라는 도구가 그런 놀라운 일을 해주는 기능이랍니다.

마치 목수가 같은 모양의 의자를 여러 개 만들기 위해 틀을 사용하는 것처럼, 우리도 프로그래밍에서 같은 구조의 정보 묶음을 여러 개 만들기 위해 클래스라는 틀을 사용할 수 있어요.

🧠 새로운 단어들과 친해지기

클래스라는 도구를 이해하는 데 필요한 새로운 단어들을 먼저 알아볼까요?

단어	쉬운 설명
클래스 (class)	똑같은 종류의 물건을 만들기 위한 틀이에요. 마치 쿠키 틀이나 블록 틀 같아요.
인스턴스	클래스 틀을 사용해서 실제로 만든 물건이에요. 쿠키 틀로 만든 진짜 쿠키 같은 거예요.
메서드	클래스 안에 들어있는 함수들을 말해요. 물건이 할 수 있는 동작들이에요.
속성	클래스 안에 들어있는 정보들을 말해요. 물건의 색깔, 크기 같은 것들이에요.

클래스는 영어로 "분류, 종류"라는 뜻이에요. 같은 종류의 것들을 만들기 위한 틀이라는 의미예요. 마치 학교에서 같은 반 친구들을 "3학년 1반"이라고 부르는 것처럼요.

✨ 클래스 도구가 뭔지 알아보기

클래스는 자바스크립트에서 물건을 체계적으로 만들기 위한 도구예요. 이전에 우리가 물건(객체)을 만들 때는 하나씩 직접 만들어야 했지만, 클래스를 사용하면 하나의 틀로 여러 개의 비슷한 물건을 쉽게 만들 수 있어요.

클래스 도구의 가장 큰 장점은 같은 일을 반복하지 않아도 된다는 거예요. 예를 들어 학생 100명의 정보를 담은 물건을 만들어야 한다면, 클래스 없이는 100개를 다 따로 만들어야 하지만, 클래스가 있으면 틀 하나만 만들어두고 필요할 때마다 새로운 학생 물건을 쉽게 찍어낼 수 있어요.

또한 클래스를 사용하면 관련된 정보와 기능을 하나로 묶어서 관리할 수 있어서, 코드가 더 깔끔하고 이해하기 쉬워져요. 마치 책상 서랍을 정리할 때 비슷한 물건끼리 모아두는 것처럼요.

재미있는 비유: 학교 쿠키 만들기 수업

클래스를 더 친근하게 이해하기 위해서 '학교 쿠키 만들기 수업' 이야기를 들려드릴게요.

우리 학교에 철수라는 학생이 있어요. 어느 날 쿠키 만들기 수업 시간에 선생님이 과제를 내주셨어요. "별 모양 쿠키 100개를 만들어오세요!"

처음에 철수는 하나씩 손으로 만들려고 했어요. 첫 번째 쿠키를 만들고, 두 번째 쿠키를 만들고... 하지만 이렇게 하니까 너무 오래 걸리고 모양도 제각각이었어요.

그때 선생님이 나타나서 말했어요. "철수야, 별 모양 쿠키 틀을 사용해보렴. 이 틀이 바로 클래스와 같은 거란다."

철수가 별 모양 쿠키 틀을 사용해보니 어떻게 되었을까요? 반죽을 틀에 넣고 꾹 누르니까 별 쿠키 1개가 나왔어요. 또 반죽을 넣고 누르니까 별 쿠키 2개가 나왔어요. 이런 식으로 계속하니까 별 쿠키 100개를 금세 만들 수 있었답니다!

놀라운 점은 모든 쿠키가 똑같은 별 모양이라는 거였어요. 하지만 각각은 서로 다른 진짜 쿠키였어요. 하나를 먹어도 다른 쿠키들은 그대로 남아있었거든요.

클래스도 똑같아요. 하나의 클래스 틀로 여러 개의 비슷한 물건들을 만들 수 있고, 각 물건은 같은 구조를 가지지만 서로 다른 독립적인 물건이 되는 거예요.

🎯 왜 클래스 도구를 배워야 할까요?

"그런데 선생님, 왜 굳이 이 클래스를 배워야 하나요? 지금까지 하던 방법도 괜찮았는데요." 이런 궁금증이 생길 수 있어요. 클래스 도구에는 정말 멋진 장점들이 많아요!

첫 번째로 시간을 많이 절약할 수 있어요. 비슷한 물건을 여러 개 만들어야 할 때 하나씩 만드는 대신, 틀 하나로 필요한 만큼 쉽게 만들 수 있어요. 마치 도장을 찍듯이 빠르게 말이에요.

두 번째로 코드가 정말 깔끔해져요. 관련된 정보와 기능을 하나의 클래스 안에 정리해두면, 어디에 무엇이 있는지 찾기 쉽고 관리하기도 편해져요. 마치 잘 정리된 서랍처럼요.

세 번째로 실수를 많이 줄일 수 있어요. 같은 코드를 반복해서 쓰다 보면 실수가 생기기 쉬운데, 클래스를 사용하면 한 번만 올바르게 만들어두고 계속 재사용할 수 있어요.

네 번째로 다른 사람과 함께 작업하기 좋아요. 클래스를 사용하면 각자 다른 부분을 맡아서 작업할 수 있어서 팀워크가 좋아져요.

마지막으로 미래를 위한 준비예요. 대부분의 프로그래밍 언어에서 클래스를 사용하므로, 이를 잘 이해하면 다른 언어를 배울 때도 도움이 돼요.

⚙️ 클래스 도구 사용법 배우기

이제 클래스 도구를 실제로 사용하는 방법을 배워볼까요? 방법은 생각보다 간단해요!

// 클래스 틀 만들기
class 틀이름 {
    // 여기에 틀의 내용을 넣어요
}

// 틀로 실제 물건 만들기
let 물건이름 = new 틀이름();

간단한 예시:

// 학생이라는 틀 만들기
class Student {
    // 아직은 빈 틀이에요
}

// 학생 물건 두 개 만들기
let 철수 = new Student();
let 영희 = new Student();

console.log(철수); // Student {} (학생 철수)
console.log(영희); // Student {} (학생 영희)

여기서 중요한 단어들을 설명해드릴게요:

class는 "틀을 만들겠어요"라는 뜻이에요
틀 이름은 꼭 대문자로 시작해야 해요 (Student, Animal, Car처럼)
new는 "틀로 새 물건을 만들어주세요"라는 뜻이에요

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 클래스 도구를 어떻게 사용하는지 함께 연습해볼게요.

🔹 첫 번째 예시: 나의 첫 클래스 만들기

가장 간단한 클래스를 만들어서 어떻게 동작하는지 확인해볼게요.

// 동물이라는 틀 만들기
class Animal {
    // 지금은 아무 내용이 없는 빈 틀이에요
}

// 동물 물건 세 마리 만들기
let 강아지 = new Animal();
let 고양이 = new Animal();
let 토끼 = new Animal();

console.log("강아지:", 강아지);
console.log("고양이:", 고양이);
console.log("토끼:", 토끼);

// 각각 다른 물건인지 확인해보기
console.log("강아지와 고양이가 같은 물건인가요?", 강아지 === 고양이); // false (다른 물건이에요!)

// 모두 Animal 틀에서 나온 물건인지 확인해보기
console.log("강아지가 Animal에서 나왔나요?", 강아지 instanceof Animal); // true
console.log("고양이가 Animal에서 나왔나요?", 고양이 instanceof Animal); // true
console.log("토끼가 Animal에서 나왔나요?", 토끼 instanceof Animal);     // true

이 예시에서는 빈 틀로도 물건을 만들 수 있고, 각 물건은 서로 다르지만 모두 같은 틀에서 나온 것임을 확인할 수 있어요. instanceof라는 특별한 단어로 "어떤 틀에서 나온 물건인지" 확인할 수 있답니다. instanceof는 "~의 종류인가요?"라고 묻는 것과 같아요.

🔹 두 번째 예시: 여러 종류의 틀 만들어보기

다양한 클래스를 만들어서 각각의 특성을 살펴볼게요.

// 여러 가지 틀 만들기
class Car {
    // 자동차 틀
}

class Book {
    // 책 틀
}

class Game {
    // 게임 틀
}

class Snack {
    // 간식 틀
}

// 각 틀로 물건 만들기
let 내자동차 = new Car();
let 내책 = new Book();
let 내게임 = new Game();
let 내간식 = new Snack();

console.log("내 자동차:", 내자동차);
console.log("내 책:", 내책);
console.log("내 게임:", 내게임);
console.log("내 간식:", 내간식);

// 어떤 틀에서 만들어진 물건인지 확인하기
console.log("내자동차가 Car 틀에서 나왔나요?", 내자동차 instanceof Car);     // true
console.log("내책이 Car 틀에서 나왔나요?", 내책 instanceof Car);            // false (다른 틀이에요!)
console.log("내책이 Book 틀에서 나왔나요?", 내책 instanceof Book);          // true
console.log("내게임이 Game 틀에서 나왔나요?", 내게임 instanceof Game);       // true
console.log("내간식이 Snack 틀에서 나왔나요?", 내간식 instanceof Snack);    // true

이 예시에서는 각 틀이 서로 다른 종류의 물건을 만든다는 것을 instanceof라는 특별한 확인 도구로 알 수 있어요.

🔹 세 번째 예시: 클래스 방식과 일반 물건 만들기 비교하기

클래스 방식과 이전에 배운 일반 물건 만들기 방식을 비교해볼게요.

// 일반 방법으로 학생 만들기 (이전 방식)
let 옛날철수 = {
    이름: "철수",
    학년: 4,
    좋아하는과목: "수학"
};

let 옛날영희 = {
    이름: "영희", 
    학년: 5,
    좋아하는과목: "과학"
};

console.log("일반 방법으로 만든 학생들:");
console.log(옛날철수);
console.log(옛날영희);

// 클래스로 학생 만들기 (새로운 방식)
class Student {
    // 아직은 빈 틀이지만 나중에 내용을 채울 거예요
}

let 새로운철수 = new Student();
let 새로운영희 = new Student();

console.log("클래스로 만든 학생들:");
console.log(새로운철수);
console.log(새로운영희);

// 클래스의 장점: 같은 종류인지 쉽게 확인 가능
console.log("새로운철수가 Student 틀에서 나왔나요?", 새로운철수 instanceof Student); // true
console.log("옛날철수가 Student 틀에서 나왔나요?", 옛날철수 instanceof Student);   // false
console.log("새로운영희가 Student 틀에서 나왔나요?", 새로운영희 instanceof Student); // true

// 장점: 여러 개를 쉽게 만들 수 있어요
let 학생들 = [];
for (let i = 1; i <= 5; i++) {
    학생들.push(new Student()); // 학생 5명을 쉽게 만들기
}
console.log("클래스로 쉽게 만든 학생 5명:", 학생들);

이 예시에서는 클래스를 사용하면 물건의 종류를 더 명확하게 관리할 수 있고, 같은 종류의 물건을 여러 개 쉽게 만들 수 있음을 보여줘요.

💡 변수 이름에 대한 특별한 이야기

위의 예시에서 let 강아지, let 고양이 같이 한글로 변수 이름을 쓴 것을 봤죠? 이건 여러분이 이해하기 쉽도록 한 거예요. 실제 프로그래밍에서는 보통 영어를 사용해요.

// 실제로는 이렇게 영어로 많이 써요
let dog = new Animal();
let cat = new Animal();
let rabbit = new Animal();

// 하지만 자바스크립트는 한글도 지원해요
let 강아지 = new Animal();
let 고양이 = new Animal();

// 둘 다 정상적으로 작동해요!
console.log(dog);    // Animal {}
console.log(강아지);  // Animal {}

여러분이 연습할 때는 한글을 써도 되지만, 나중에 다른 사람과 함께 작업할 때는 영어를 사용하는 것이 좋아요.

🔄 클래스 도구 사용 과정 정리하기

지금까지 학습한 클래스 도구 사용 과정을 자연스럽게 정리해볼게요.

첫 번째 단계는 틀 계획하기예요. 어떤 종류의 물건을 만들 것인지, 어떤 특징들을 가져야 하는지 생각해봐야 해요. 마치 집을 짓기 전에 설계도를 그리는 것처럼요.

두 번째 단계는 클래스 틀 만들기예요. class 키워드를 사용해서 틀의 골격을 만들어요. 이때 틀 이름은 꼭 대문자로 시작해야 해요.

세 번째 단계는 실제 물건 만들기예요. new 키워드를 사용해서 틀로부터 진짜 물건을 만들어내요. 이 과정을 원하는 만큼 반복할 수 있어요.

네 번째 단계는 만든 물건들 사용하기예요. 만들어진 물건들을 프로그램에서 필요에 따라 사용하면 돼요.

마지막 단계는 물건 관리하기예요. instanceof를 사용해서 어떤 틀에서 나온 물건인지 확인하고, 필요에 따라 분류하거나 정리할 수 있어요.

🔄 14단원 복습: 배열 메서드 되돌아보기

15단원을 배우기 전에 14단원에서 배운 고급 배열 메서드를 복습해볼까요?

복습 문제 1: filter로 조건에 맞는 것만 찾기

// 점수 배열에서 80점 이상인 점수만 찾아보세요.
let scores = [85, 92, 78, 96, 88, 74];

let highScores = scores.filter(function(score) {
    return score >= 80;
});

console.log("원래 점수:", scores);
console.log("80점 이상:", highScores); // [85, 92, 96, 88]

// 간단하게 쓰기
let goodScores = scores.filter(score => score >= 80);
console.log("80점 이상 (간단):", goodScores);

설명: filter는 조건에 맞는 것들만 골라서 새로운 배열을 만들어주는 기능이에요. 원본 배열은 그대로 두고 조건을 만족하는 것들만 모은 새 배열을 반환합니다.

복습 문제 2: map으로 모든 것을 변환하기

// 숫자 배열의 모든 숫자에 2를 곱한 새로운 배열을 만들어보세요.
let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(function(number) {
    return number * 2;
});

console.log("원래 숫자:", numbers);        // [1, 2, 3, 4, 5]
console.log("2를 곱한 숫자:", doubled);    // [2, 4, 6, 8, 10]

// 학생 이름 배열에 "님"을 붙이기
let names = ["철수", "영희", "민수"];
let politeNames = names.map(name => name + "님");
console.log("정중한 이름들:", politeNames); // ["철수님", "영희님", "민수님"]

설명: map은 배열의 모든 요소를 변환해서 새로운 배열을 만들어주는 기능이에요. 원본 배열과 같은 길이의 새 배열을 만듭니다.

🧠 자주 하는 실수와 주의할 점

클래스 도구를 사용할 때 자주 하는 실수들을 미리 알아두면 더 완벽하게 사용할 수 있어요.

❌ 실수 1: 틀 이름을 작은 글자로 시작하기

// 이렇게 하면 안 돼요! - 작은 글자로 시작
class student {  // 틀렸어요!
    // 내용
}

// 올바른 방법 - 큰 글자로 시작
class Student {  // 맞아요!
    // 내용
}

// 올바른 틀로 물건 만들기
let 내학생 = new Student();
console.log("학생 물건:", 내학생);

// 다른 올바른 이름들
class Animal { }      // 동물 틀
class Car { }         // 자동차 틀
class SmartPhone { }  // 스마트폰 틀 (여러 단어도 각각 큰 글자로!)

틀 이름은 항상 큰 글자(대문자)로 시작하는 것이 자바스크립트의 약속이에요. 마치 사람 이름을 쓸 때 첫 글자를 크게 쓰는 것처럼요.

❌ 실수 2: `new` 키워드 없이 사용하기

// 동물 틀 만들기
class Animal {
    // 동물 틀 내용
}

// 이렇게 하면 안 돼요! - new 없이 사용
try {
    let 잘못된동물 = Animal(); // 에러가 나요!
} catch (error) {
    console.log("에러 메시지:", error.message);
}

// 올바른 방법 - new 키워드와 함께 사용
let 올바른동물 = new Animal();
console.log("올바른 동물 물건:", 올바른동물);

// 여러 마리 동물 만들기
let 강아지 = new Animal();
let 고양이 = new Animal();
let 햄스터 = new Animal();

console.log("동물들:", 강아지, 고양이, 햄스터);

클래스 틀로 물건을 만들 때는 꼭 new라는 키워드를 앞에 붙여야 해요. 이 단어가 "새로운 물건을 만들어주세요"라는 뜻이거든요.

❌ 실수 3: 클래스와 함수를 헷갈리기

// 함수로 물건 만들기 (예전 방식) - 이렇게 할 수도 있어요
function OldStudent() {
    // 함수 내용
}

// 클래스로 물건 만들기 (새로운 방식) - 이게 더 좋아요
class NewStudent {
    // 클래스 내용
}

// 둘 다 new로 물건을 만들 수 있지만 방법이 달라요
let 예전학생 = new OldStudent();
let 새로운학생 = new NewStudent();

console.log("함수로 만든 학생:", 예전학생);
console.log("클래스로 만든 학생:", 새로운학생);

// 클래스가 더 명확하고 이해하기 쉬워요
console.log("새로운학생이 NewStudent 틀인가요?", 새로운학생 instanceof NewStudent); // true

// 클래스를 사용하면 코드가 더 읽기 쉬워요
class 명확한이름 { }  // 이게 클래스라는 걸 바로 알 수 있어요
function 헷갈리는이름() { }  // 이게 물건 만들기용인지 일반 함수인지 헷갈려요

함수와 클래스는 비슷해 보이지만 다른 용도예요. 클래스는 물건 만들기 전용이고, 함수는 일반적인 작업을 위한 거예요.

✏️ 직접 해보기 - 쉬운 연습 문제들

새로운 것을 배울 때마다 느끼는 이 설렘은 무엇일까요? 마치 새로운 도구를 손에 쥐었을 때처럼, 클래스라는 도구로 무엇을 만들어볼지 생각하니 가슴이 두근거려요. 이제 여러분도 이 도구를 직접 만져보세요.

Ex1) 장난감(Toy) 틀을 만들고 장난감 물건 두 개를 만들어보자

// 장난감 틀 만들기
class Toy {
    // 지금은 빈 장난감 틀이에요
}

// 장난감 두 개 만들기
let 첫번째장난감 = new Toy();
let 두번째장난감 = new Toy();

console.log("첫 번째 장난감:", 첫번째장난감);
console.log("두 번째 장난감:", 두번째장난감);

// 서로 다른 장난감인지 확인
console.log("같은 장난감인가요?", 첫번째장난감 === 두번째장난감); // false (다른 물건이에요!)

// 둘 다 Toy 틀에서 나온 것인지 확인
console.log("첫 번째가 Toy 틀인가요?", 첫번째장난감 instanceof Toy); // true
console.log("두 번째가 Toy 틀인가요?", 두번째장난감 instanceof Toy); // true

Ex2) 과일(Fruit) 틀과 채소(Vegetable) 틀을 만들고 각각의 물건을 하나씩 만들어보자

// 과일 틀
class Fruit {
    // 과일 틀
}

// 채소 틀
class Vegetable {
    // 채소 틀
}

// 각각 물건 만들기
let 사과 = new Fruit();
let 당근 = new Vegetable();

console.log("사과:", 사과);
console.log("당근:", 당근);

// 타입 확인하기
console.log("사과가 Fruit 틀인가요?", 사과 instanceof Fruit);           // true
console.log("사과가 Vegetable 틀인가요?", 사과 instanceof Vegetable);   // false
console.log("당근이 Fruit 틀인가요?", 당근 instanceof Fruit);          // false
console.log("당근이 Vegetable 틀인가요?", 당근 instanceof Vegetable);  // true

// 여러 개 만들어보기
let 과일들 = [new Fruit(), new Fruit(), new Fruit()];
let 채소들 = [new Vegetable(), new Vegetable()];

console.log("과일 3개:", 과일들);
console.log("채소 2개:", 채소들);

Ex3) 올바른 틀 이름과 틀린 틀 이름을 구분해보자

// 올바른 클래스 이름들 (모두 큰 글자로 시작해요)
class Student { }        // ✅ 학생
class Teacher { }        // ✅ 선생님
class SmartPhone { }     // ✅ 스마트폰 (여러 단어도 각각 큰 글자)
class GameController { } // ✅ 게임 컨트롤러 (긴 이름도 가능)
class Car { }            // ✅ 자동차
class Animal { }         // ✅ 동물

// 잘못된 클래스 이름들 (주석으로만 보여드림)
// class student { }     // ❌ 작은 글자로 시작
// class 123Game { }     // ❌ 숫자로 시작
// class smart-phone { } // ❌ 하이픈(-) 사용

// 올바른 클래스들로 물건 만들기
let 내학생 = new Student();
let 내선생님 = new Teacher();
let 내폰 = new SmartPhone();
let 내컨트롤러 = new GameController();
let 내차 = new Car();
let 내동물 = new Animal();

console.log("모든 물건이 올바르게 만들어졌나요?", 
    내학생 instanceof Student && 
    내선생님 instanceof Teacher && 
    내폰 instanceof SmartPhone && 
    내컨트롤러 instanceof GameController &&
    내차 instanceof Car &&
    내동물 instanceof Animal
); // true

console.log("만든 물건들:", {
    학생: 내학생,
    선생님: 내선생님,
    폰: 내폰,
    컨트롤러: 내컨트롤러,
    차: 내차,
    동물: 내동물
});

🤔 조금 더 어려운 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 클래스에 대한 이해를 확인해볼게요.

Q1. 클래스를 친구에게 설명한다면 어떻게 설명하겠나요?

정답: "클래스는 쿠키 틀과 똑같아요! 하나의 틀로 똑같은 모양의 쿠키를 여러 개 만들 수 있듯이, 클래스도 하나의 틀로 비슷한 물건을 여러 개 쉽게 만들 수 있어요. 예를 들어 학생 클래스를 만들면 그 틀로 학생1, 학생2, 학생3을 계속 만들 수 있어서 정말 편리해요. 그리고 모든 쿠키가 같은 모양이지만 각각 다른 쿠키인 것처럼, 클래스로 만든 물건들도 같은 구조를 가지지만 각각 다른 독립적인 물건이 돼요."

Q2. 다음 코드에서 문제점을 찾아보세요.

class animal {
    // 내용
}
let pet = animal();

정답: 두 가지 문제가 있어요.

1) 클래스 이름이 작은 글자로 시작했어요 (animal → Animal)
2) new 키워드 없이 호출했어요 (animal() → new Animal())

올바른 코드:

class Animal {
    // 내용
}
let pet = new Animal();

지금까지 클래스라는 놀라운 도구에 대해 자세히 알아봤어요. 클래스는 앞으로 우리가 더 복잡하고 재미있는 프로그램을 만들 때 정말 유용한 도구가 될 거예요. 마치 진짜 공장에서 틀을 사용하는 것처럼, 여러분도 이제 클래스 틀을 사용해서 원하는 물건들을 쉽고 빠르게 만들 수 있게 되었답니다! 다음 시간에는 이 클래스 틀 안에 어떤 내용을 넣을 수 있는지 더 자세히 배워볼 예정이에요.

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
15.1.1의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅
14단원 복습 완료	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!

추가 문제 1. Car라는 클래스를 만들고 두 개의 자동차 객체를 생성해보세요.

// 답:
class Car {
    // 지금은 비어있는 자동차 클래스
}

// 자동차 두 대 만들기
let car1 = new Car();
let car2 = new Car();

console.log("첫 번째 자동차:", car1);
console.log("두 번째 자동차:", car2);

// 서로 다른 객체인지 확인
console.log("같은 자동차인가요?", car1 === car2);  // false
console.log("둘 다 Car 클래스인가요?", car1 instanceof Car && car2 instanceof Car);  // true

추가 문제 2. Book 클래스를 만들고 instanceof를 사용해서 객체가 어떤 클래스인지 확인해보세요.

// 답:
class Book {
    // 책 클래스
}

class Magazine {
    // 잡지 클래스
}

// 객체들 만들기
let myBook = new Book();
let myMagazine = new Magazine();

// 타입 확인하기
console.log("myBook이 Book인가요?", myBook instanceof Book);        // true
console.log("myBook이 Magazine인가요?", myBook instanceof Magazine);  // false
console.log("myMagazine이 Book인가요?", myMagazine instanceof Book);  // false
console.log("myMagazine이 Magazine인가요?", myMagazine instanceof Magazine);  // true

📂 마무리 정보

오늘 배운 15.1.1 내용이 여러분의 자바스크립트 지식에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

15.1.3 인스턴스 메서드 - 객체가 할 수 있는 멋진 기능들 (0)	2025.07.22
15.1.2 `constructor` - 객체의 첫 번째 설정을 도와주는 똑똑한 도우미 (0)	2025.07.22

현재글15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

모듈, 산술연산자, setTimeout, 자바스크립트, Import, Promise, 비교연산자, 초등코딩, 코딩교재, 중등코딩교육, 연산자, 논리연산자, 모듈패턴, 비동기, 싱글턴패턴, JavaScript, async_await, Export, 자바스크립트교재, ES6모듈,

Today :
Yesterday :

초중고등학생 자바스크립트 교재

15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

📘 15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

🧠 새로운 단어들과 친해지기

✨ 클래스 도구가 뭔지 알아보기

재미있는 비유: 학교 쿠키 만들기 수업

🎯 왜 클래스 도구를 배워야 할까요?

⚙️ 클래스 도구 사용법 배우기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 나의 첫 클래스 만들기

🔹 두 번째 예시: 여러 종류의 틀 만들어보기

🔹 세 번째 예시: 클래스 방식과 일반 물건 만들기 비교하기

💡 변수 이름에 대한 특별한 이야기

🔄 클래스 도구 사용 과정 정리하기

🔄 14단원 복습: 배열 메서드 되돌아보기

복습 문제 1: filter로 조건에 맞는 것만 찾기

복습 문제 2: map으로 모든 것을 변환하기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 틀 이름을 작은 글자로 시작하기

❌ 실수 2: `new` 키워드 없이 사용하기

❌ 실수 3: 클래스와 함수를 헷갈리기

✏️ 직접 해보기 - 쉬운 연습 문제들

Ex1) 장난감(Toy) 틀을 만들고 장난감 물건 두 개를 만들어보자

Ex2) 과일(Fruit) 틀과 채소(Vegetable) 틀을 만들고 각각의 물건을 하나씩 만들어보자

Ex3) 올바른 틀 이름과 틀린 틀 이름을 구분해보자

🤔 조금 더 어려운 문제로 실력 확인하기

Q1. 클래스를 친구에게 설명한다면 어떻게 설명하겠나요?

Q2. 다음 코드에서 문제점을 찾아보세요.

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. Car라는 클래스를 만들고 두 개의 자동차 객체를 생성해보세요.

추가 문제 2. Book 클래스를 만들고 instanceof를 사용해서 객체가 어떤 클래스인지 확인해보세요.

📂 마무리 정보

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

'15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언'의 다른글

티스토리툴바

« 2025/08 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

📘 15.1.1 클래스라는 놀라운 도구 - 똑같은 모양의 물건을 쉽게 만드는 비밀 도구

🧠 새로운 단어들과 친해지기

✨ 클래스 도구가 뭔지 알아보기

재미있는 비유: 학교 쿠키 만들기 수업

🎯 왜 클래스 도구를 배워야 할까요?

⚙️ 클래스 도구 사용법 배우기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 나의 첫 클래스 만들기

🔹 두 번째 예시: 여러 종류의 틀 만들어보기

🔹 세 번째 예시: 클래스 방식과 일반 물건 만들기 비교하기

💡 변수 이름에 대한 특별한 이야기

🔄 클래스 도구 사용 과정 정리하기

🔄 14단원 복습: 배열 메서드 되돌아보기

복습 문제 1: filter로 조건에 맞는 것만 찾기

복습 문제 2: map으로 모든 것을 변환하기

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 틀 이름을 작은 글자로 시작하기

❌ 실수 2: new 키워드 없이 사용하기

❌ 실수 3: 클래스와 함수를 헷갈리기

✏️ 직접 해보기 - 쉬운 연습 문제들

Ex1) 장난감(Toy) 틀을 만들고 장난감 물건 두 개를 만들어보자

Ex2) 과일(Fruit) 틀과 채소(Vegetable) 틀을 만들고 각각의 물건을 하나씩 만들어보자

Ex3) 올바른 틀 이름과 틀린 틀 이름을 구분해보자

🤔 조금 더 어려운 문제로 실력 확인하기

Q1. 클래스를 친구에게 설명한다면 어떻게 설명하겠나요?

Q2. 다음 코드에서 문제점을 찾아보세요.

✅ 학습 완료 체크리스트

🎯 추가 연습 문제들

추가 문제 1. Car라는 클래스를 만들고 두 개의 자동차 객체를 생성해보세요.

추가 문제 2. Book 클래스를 만들고 instanceof를 사용해서 객체가 어떤 클래스인지 확인해보세요.

📂 마무리 정보

'15. 클래스로 틀 만들기 (클래스) > 15.1 클래스 선언' 카테고리의 다른 글

'15. 클래스로 틀 만들기 (클래스)/15.1 클래스 선언'의 다른글

관련글

티스토리툴바

❌ 실수 2: `new` 키워드 없이 사용하기