FrontEnd/Javascript

[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ Class ์‚ฌ์šฉํ•˜๊ธฐ-constructor, extends, super ์‚ฌ์šฉ๋ฒ•

FrontEnd ๊น€ํ‰๋ฒ”๋‹˜ 2020. 12. 28. 23:01
๋ฐ˜์‘ํ˜•

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํด๋ž˜์Šค ์‚ฌ์šฉํ•˜๊ธฐ

 

๐Ÿ˜ฎ ๋“ค์–ด๊ฐ€๊ธฐ ์ „

๊ฐœ๋ฐœ N์—ฐ์ฐจ ๋™์•ˆ ๋ฉ”์ธ ์–ธ์–ด๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.

๊ฐœ๋ฐœ์ž ์ฃผ๋‹ˆ์–ด ์‹œ์ ˆ์—๋Š” ๋‚ด๊ฐ€ ์“ฐ๋Š” ์ฝ”๋“œ๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ์ง€ ๋งž๋Š”์ง€ ๋ชจ๋ฅด๊ณ  ์ผ๋‹จ ๋˜๊ฒŒ ํ•˜๋Š”๋ฐ์— ๊ธ‰๊ธ‰ํ–ˆ๋‹ค.

 

3๋…„ ์ฐจ๋ฅผ ๋„˜์–ด๊ฐ€๋ฉด์„œ ์ฃผ๋‹ˆ์–ด ์‹œ์ ˆ ์ง  ๋‚ด ์ฝ”๋“œ๋ฅผ ์œ ์ง€๋ณด์ˆ˜ ํ•˜๊ธฐ ์‹œ์ž‘ํ•˜๋ฉด์„œ ์ค‘๋ณต์ œ๊ฑฐ์˜ ์ค‘์š”์„ฑ์„ ๋ผˆ์ €๋ฆฌ๊ฒŒ ๋Š๋ผ๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

(์‚ฌ์šฉ์ž๋“ค์€ ์ด๋ ‡๊ฒŒ ๋งŒ๋“ค์–ด๋‹ฌ๋ผ๊ณ  ํ–ˆ๋‹ค๊ฐ€ ์‚ฌ์šฉ ํ›„ ์ด๊ฒŒ ์ƒ๊ฐ๋ณด๋‹ค ๋ถˆํŽธํ•ด๋‹ˆ ๋ฐ”๊ฟ”๋‹ฌ๋ผ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งค์šฐ ๋งŽ์•˜๋‹ค.)

 

๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ๋Œ์•„๊ฐ€๊ธฐ๋งŒ ํ•˜๋Š” ์ฝ”๋“œ๋Š” ์‚ฌ์šฉ์ž์˜ ์š”๊ตฌ์‚ฌํ•ญ์œผ๋กœ ์ž‘์€ ๊ฒŒ ํ•˜๋‚˜ ๋ฐ”๋€Œ์–ด๋„

๋ชจ๋“  ํŽ˜์ด์ง€์— ๋“ค์–ด๊ฐ€์„œ ๊ฒ€์ƒ‰ ์ฐพ๊ธฐ๋กœ ํ•ด๋‹น ์ฝ”๋“œ๊ฐ€ ๋“ค์–ด๊ฐ„ ๋ถ€๋ถ„์„ ์ฐพ์•„์„œ ์ˆ˜์ •ํ•˜๋Š” ๋ถˆํŽธํ•จ์„ ๊ฐ์ˆ˜ํ•ด์•ผ ํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์ดํ›„ ๊ณตํ†ต ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜, ์ž์ฃผ ์“ฐ๋Š” UI๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ๋งŒ๋“ค์–ด ๊ด€๋ฆฌํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

 

์ด๊ฒƒ๋งŒ์œผ๋กœ๋„ ๋‚˜๋Š” ์ด์ œ ์ข€ ๋‚ด๊ฐ€ ๋ฐœ์ „ํ–ˆ๋‹ค๊ณ  ๋ฟŒ๋“ฏํ•˜๊ฒŒ ๋Š๋ผ๊ณ  ์žˆ์—ˆ๋‹ค.

ํ•˜์ง€๋งŒ, ๋‚ด๊ฐ€ ํ•œ ๋ฒˆ ๋” ๋‚˜์•„๊ฐ€๊ธฐ ์œ„ํ•ด์„œ ๋ฐฐ์›Œ์•ผ ํ•  ๋‹ค์Œ ๋‹จ๊ณ„๊ฐ€ ๋ˆˆ์— ๋“ค์–ด์™”๋‹ค. ํด๋ž˜์Šค์˜€๋‹ค.

 

์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๋””๋ฒจ๋กœํผ ๊น€์ข…๋ฏผ ๋‹˜ ์œ ํŠœ๋ธŒ ์ค‘ Javascirpt๋กœ ํŒŒ๋„ ๋ชจ์–‘์„ ๋งŒ๋“œ๋Š” ์žฌ๋ฐŒ๋Š” ์˜ˆ์ œ๋ฅผ ๋”ฐ๋ผ ํ•ด๋ณด๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ

ํด๋ž˜์Šค๋ฅผ ์ด์šฉํ•˜์—ฌ  ํ•ด๋‹น ์ฝ”๋“œ๋ฅผ ๋งŒ๋“œ์…จ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

ํด๋ž˜์Šค๋ฅผ ์ „ํ˜€ ๋ชจ๋ฅด๋˜ ๋‚ด๊ฐ€ ํด๋ž˜์Šค๋ฅผ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ๋งˆ์Œ์„ ๋จน๊ฒŒ ๋œ ์‚ฌ๊ฑด์ด๋‹ค.

 

www.youtube.com/watch?v=LLfhY4eVwDY

HTML5 Canvas Tutorial : ์›€์ง์ด๋Š” ์›จ์ด๋ธŒ ๋งŒ๋“ค๊ธฐ / Interactive Developer ๊น€์ข…๋ฏผ๋‹˜ ์ž‘ํ’ˆ

 

 

 


๐Ÿ˜ŽJavascript์˜  Class

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํด๋ž˜์Šค ์‚ฌ์šฉ์€ ES6์—์„œ๋ถ€ํ„ฐ ์ง€์›์„ ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.

์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ๋Š” ํ•ด๋‹น ์ฝ”๋“œ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‚˜, ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ด์šฉํ•  ๊ฒฝ์šฐ class๋ฅผ ์ง€์›ํ•œ๋‹ค.

 

Class๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ€์žฅ ํฐ ์ด์œ ๋Š” ์žฌ์‚ฌ์šฉ์„ฑ์ด๋‹ค.

์ž‘์€ ์‚ฌ์ดํŠธ์˜ ๊ฒฝ์šฐ ์ž˜ ๋งŒ๋“  Functionํ•˜๋‚˜๋กœ๋„ ์ถฉ๋ถ„ํžˆ ๊ฐœ๋ฐœ์ด ์šฉ์ดํ–ˆ๋‹ค๋ฉด ์ข€ ๋” ๋ณต์žกํ•œ ์‚ฌ์ดํŠธ๋ฅผ

๋งŒ๋“ค๊ฒŒ ๋  ๊ฒฝ์šฐ Class์˜ ์žฅ์ ์„ ๋” ์ž˜ ์•Œ ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

 

์ผ๋‹จ ๋‚œ ์˜ค๋Š˜์€ ํด๋ž˜์Šค์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ๊ณต๋ถ€ํ•ด๋ณด๊ธฐ๋กœ ํ•œ๋‹ค.

 

 

 

Class ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

Class ์ƒ์„ฑํ•˜๊ธฐ

Javascript ๋‚ด์—์„œ Class๋ฅผ ์ƒ์„ฑํ•˜๋ ค๋ฉด ๊ฐ„๋‹จํ•˜๋‹ค.

class๋ฅผ ์„ ์–ธ๋งŒ ํ•ด์ค€๋‹ค๋ฉด class ๊ฐ์ฒด๋ฅผ ๋ฐ”๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

 

class Person {

}

let kim = new Person();

console.log(kim);

 

console.log ๊ฒฐ๊ณผ

class๋กœ ๋งŒ๋“ค์–ด์ค€ ์˜ˆ์‹œ Person์ด๋ผ๋Š” ์ด๋ฆ„์˜ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋œ ๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

 

 

 

 

 

Class ์ดˆ๊ธฐ๊ฐ’ ์„ค์ •ํ•ด์ฃผ๊ธฐ

Constructor(์ƒ์„ฑ์ž)๋ฅผ ์ด์šฉํ•˜๋ฉด class ๊ฐ์ฒด์˜ ์ดˆ๊ธฐ ๊ฐ’์„ ์„ค์ •ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

class ๋‚ด๋ถ€์—์„œ Constructor๋Š” ํ•œ ๊ฐœ๋งŒ ์กด์žฌํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, 2๋ฒˆ ์ด์ƒ ์‚ฌ์šฉ ์‹œ Syntax Error๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.

 

Constructor๋ฅผ ์ด์šฉํ•˜์—ฌ Person ํด๋ž˜์Šค์— ์ดˆ๊ธฐ ๊ฐ’์„ ์„ค์ •ํ•ด๋ณด๋„๋ก ํ•˜์ž. 

class Person {
    constructor (name,age, city) {
        console.log('construtor');
        this.name = name;
        this.age = age;
        this.city = city;
    }
}

let kim = new Person('kim','24','seoul');

console.log(kim);

 

console.log ๊ฒฐ๊ณผํ™”๋ฉด

 

์ด์ฒ˜๋Ÿผ Constructor๋Š” ์ƒˆ๋กœ์šด ํด๋ž˜์Šค๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ๊ฐ€์žฅ ์ฒ˜์Œ ์‹คํ–‰๋˜๋ฉด์„œ ์ดˆ๊ธฐ๊ฐ’์„ ์„ค์ •ํ•ด์ค€๋‹ค. 

 

 

 

 

 

Class  ๋ฉ”์„œ๋“œ ์‚ฌ์šฉํ•˜๊ธฐ

class์—์„œ ์„ค์ •ํ•œ ์ดˆ๊ธฐ๊ฐ’์„ ์ ‘๊ทผํ•ด ํŠน์ • ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

๊ฐ„๋‹จํ•œ ๋ฉ”์„œ๋“œ๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด๋ณด์ž.

 

class์•ˆ์— function ํ˜•์‹์œผ๋กœ ๋งŒ๋“ค์–ด์ค€ ๋’ค ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋œ๋‹ค.

๋„ˆ๋ฌด ๋‹น์—ฐํ•˜์ง€๋งŒ ๋‚ด๋…„์— ํ•ด๋‹น ์‚ฌ๋žŒ์ด ํ•œ ์‚ด ๋” ๋จน๋Š”๋‹ค๋Š” ๋ฉ”์„œ๋“œ๋ฅผ class์•ˆ์— ์ •์˜ํ•œ ๋’ค ํ˜ธ์ถœํ•ด๋ดค๋‹ค.

class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //๋ฉ”์„œ๋“œ์ƒ์„ฑ
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

let kim = new Person('kim','24','seoul');

console.log(kim.nextYearAge());

console.log ๊ฒฐ๊ณผ

class๋Š” javascript ์ƒ ๊ฐ์ฒด์˜ ํ˜•ํƒœ์ด๋ฏ€๋กœ ์ƒ์„ฑ๋œ class ๊ฐ์ฒด์—

class ๋ฐ–์—์„œ ์ƒˆ๋กœ์šด ๋ฉ”์„œ๋“œ๋ฅผ ๋„ฃ๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž.

 

class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //๋ฉ”์„œ๋“œ์ƒ์„ฑ
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

let kim = new Person('kim','24','seoul');

kim.eat = function () {
    return 'apple'
}

console.log(kim.nextYearAge());
console.log(kim.eat());

 

console.log ๊ฒฐ๊ณผ

class๋ฐ–์—์„œ ์ถ”๊ฐ€ํ•œ eat์ด๋ผ๋Š” ๋ฉ”์„œ๋“œ๋„ ์ •ํ™•ํžˆ ์ž‘๋™ํ•œ๋‹ค.

ํ•˜์ง€๋งŒ, ์ด๋ ‡๊ฒŒ ๋ฐ–์—์„œ ์ถ”๊ฐ€ํ•œ class๋Š” ์ถ”ํ›„ ์ƒˆ๋กœ์šด new Person class๋กœ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์—ˆ์„ ๋•Œ๋Š”

ํ˜ธ์ถœํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค

 

class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //๋ฉ”์„œ๋“œ์ƒ์„ฑ
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

let kim = new Person('kim','24','seoul');

kim.eat = function () {
    return 'apple'
}

console.log('๊น€์”จ ๋‚ด๋…„์—๋Š” ๋ช‡์‚ด์ธ๊ฐ€์š” ?' + kim.nextYearAge());
console.log('๊น€์”จ๊ฐ€ ๋จน์€๊ฑด? ' + kim.eat());

let park = new Person('park', '31', 'busan');

console.log('๋ฐ•์”จ ๋‚ด๋…„์—๋Š” ๋ช‡์‚ด์ธ๊ฐ€์š”?' + park.nextYearAge());
console.log('๋ฐ•์”จ๊ฐ€ ๋จน์€๊ฑด?' + park.eat())

 

park class์—์„œ eat ํ˜ธ์ถœ ์‹œ ์‹คํ–‰๋˜์ง€ ์•Š์Œ

 

 

 

 

 

์ƒ์†(extends)

class์—์„œ ์ƒ์† ๊ฐœ๋…์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

css๋ฅผ ์ด์šฉํ•œ ๋ถ„๋“ค์ด๋ผ๋ฉด ํ•˜๋‚˜์˜ ์†์„ฑ์ด ํ•˜์œ„ ์†์„ฑ์—๋„ ๊ฐ™์ด ์ ์šฉ๋˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ

class์—์„œ๋„ ์ƒ์†์„ ์ด์šฉํ•˜๋ฉด ๊ธฐ์กด์˜ class์˜ ๊ฐ’์„ ๋ชจ๋‘ ์ ‘๊ทผํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์ƒ์†์€ extends๋ฅผ ์จ์„œ ์ด์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

๋‹ค์Œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด์„œ introducePersonํด๋ž˜์Šค์—์„œ Person์„ ์ƒ์†๋ฐ›์•˜๊ธฐ ๋•Œ๋ฌธ์—

this.city์™€ this.name์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //๋ฉ”์„œ๋“œ์ƒ์„ฑ
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

class introducePerson extends Person {
    introduce () {
        return `์ €๋Š” ${this.city}์— ์‚ฌ๋Š” ${this.name} ์ž…๋‹ˆ๋‹ค.`
    }

}

let kim = new introducePerson('kim','24','seoul');

console.log(kim.introduce())

console.log ๊ฒฐ๊ณผํ™”๋ฉด

 

 

 

super ์‚ฌ์šฉํ•˜๊ธฐ

 

introducePerson ํ•˜์œ„ ํด๋ž˜์Šค์—์„œ ๊ธฐ์กด class์˜ ๊ฐ’์„ ๊ฐ€์ ธ๋‹ค ์“ฐ๋Š” ๊ฑด ์ข‹์•˜์ง€๋งŒ,

์ถ”๊ฐ€์ ์œผ๋กœ introducePerson์ด๋ผ๋Š” ํ•˜์œ„ ํด๋ž˜์Šค์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฐ’์ด ์žˆ์„ ์ˆ˜๋„ ์žˆ๋‹ค.

 

์ด๋•Œ ์ด์šฉํ•˜๋Š” ๊ฒƒ์€ super๋ผ๋Š” ํ‚ค์›Œ๋“œ์ด๋ฉฐ

์ด๋Š” ๊ฐ์ฒด์˜ ๋ถ€๋ชจ๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค.

 

 

์ž์‹ ์ชฝ์˜ ์ถ”๊ฐ€์ ์œผ๋กœ ์‚ฌ์šฉํ•   ์ดˆ๊ธฐ๊ฐ’์ด ํ•„์š”ํ•  ๊ฒฝ์šฐ constructor์— super๋กœ ๋ถ€๋ชจ ์ดˆ๊ธฐ๊ฐ’์„ ์„ธํŒ…ํ•œ ๋’ค

์ž์‹ class์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ดˆ๊ธฐ๊ฐ’์„ ๋”ฐ๋กœ ์ง€์ •ํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋ฉฐ

super ๊ธฐ๋Šฅ์„ ์ด์šฉํ•ด์„œ ์ž์‹ class์—์„œ ๋ถ€๋ชจ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

 

class Person {
    constructor (name,age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
    //๋ฉ”์„œ๋“œ์ƒ์„ฑ
    nextYearAge() {
        return Number(this.age) + 1;
    }
}

class introducePerson extends Person {
    constructor(name, age, city, futureHope) {
        super(name, age, city);
        this.futureHope = futureHope
    }
    introduce () {
        return `์ €๋Š” ${this.city}์— ์‚ฌ๋Š” ${this.name} ์ž…๋‹ˆ๋‹ค. 
            ๋‚ด๋…„์—” ${super.nextYearAge()}์‚ด์ด๋ฉฐ,
            ์žฅ๋ž˜ํฌ๋ง์€ ${this.futureHope} ์ž…๋‹ˆ๋‹ค.`
    }

}

let kim = new introducePerson('kim','24','seoul', '๊ฐœ๋ฐœ์ž');

console.log(kim.introduce())

 

introduce() ํ˜ธ์ถœ ๊ฒฐ๊ณผ ํ™”๋ฉด

 

class๋ฅผ ์ด์šฉํ•  ๊ฒฝ์šฐ ๊ทœ์น™์„ฑ์„ ๊ฐ–๋Š” ๊ฐ์ฒด๋ฅผ ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒŒ ๊ฐ€๋Šฅํ•˜๋ฉฐ,

์ƒ์†์„ ํ†ตํ•ด์„œ ๊ธฐ๋Šฅ ํ™•์žฅ์ด ์šฉ์ดํ•˜๋‹ค๋Š” ๊ฒƒ ์•Œ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

 


Reference

opentutorials.org/module/4047/24614

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

 

 

๋ฐ˜์‘ํ˜•