๐ฎ ๋ค์ด๊ฐ๊ธฐ ์
๊ฐ๋ฐ N์ฐ์ฐจ ๋์ ๋ฉ์ธ ์ธ์ด๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค.
๊ฐ๋ฐ์ ์ฃผ๋์ด ์์ ์๋ ๋ด๊ฐ ์ฐ๋ ์ฝ๋๊ฐ ์ฌ๋ฐ๋ฅธ์ง ๋ง๋์ง ๋ชจ๋ฅด๊ณ ์ผ๋จ ๋๊ฒ ํ๋๋ฐ์ ๊ธ๊ธํ๋ค.
3๋ ์ฐจ๋ฅผ ๋์ด๊ฐ๋ฉด์ ์ฃผ๋์ด ์์ ์ง ๋ด ์ฝ๋๋ฅผ ์ ์ง๋ณด์ ํ๊ธฐ ์์ํ๋ฉด์ ์ค๋ณต์ ๊ฑฐ์ ์ค์์ฑ์ ๋ผ์ ๋ฆฌ๊ฒ ๋๋ผ๊ธฐ ์์ํ๋ค.
(์ฌ์ฉ์๋ค์ ์ด๋ ๊ฒ ๋ง๋ค์ด๋ฌ๋ผ๊ณ ํ๋ค๊ฐ ์ฌ์ฉ ํ ์ด๊ฒ ์๊ฐ๋ณด๋ค ๋ถํธํด๋ ๋ฐ๊ฟ๋ฌ๋ผ๋ ๊ฒฝ์ฐ๊ฐ ๋งค์ฐ ๋ง์๋ค.)
๋ด๊ฐ ์์ฑํ ๋์๊ฐ๊ธฐ๋ง ํ๋ ์ฝ๋๋ ์ฌ์ฉ์์ ์๊ตฌ์ฌํญ์ผ๋ก ์์ ๊ฒ ํ๋ ๋ฐ๋์ด๋
๋ชจ๋ ํ์ด์ง์ ๋ค์ด๊ฐ์ ๊ฒ์ ์ฐพ๊ธฐ๋ก ํด๋น ์ฝ๋๊ฐ ๋ค์ด๊ฐ ๋ถ๋ถ์ ์ฐพ์์ ์์ ํ๋ ๋ถํธํจ์ ๊ฐ์ํด์ผ ํ๋ค.
๊ทธ๋์ ์ดํ ๊ณตํต ํจ์๋ฅผ ๋ง๋ค๊ฑฐ๋, ์์ฃผ ์ฐ๋ UI๋ ์ปดํฌ๋ํธ๋ก ๋ง๋ค์ด ๊ด๋ฆฌํ๊ธฐ ์์ํ๋ค.
์ด๊ฒ๋ง์ผ๋ก๋ ๋๋ ์ด์ ์ข ๋ด๊ฐ ๋ฐ์ ํ๋ค๊ณ ๋ฟ๋ฏํ๊ฒ ๋๋ผ๊ณ ์์๋ค.
ํ์ง๋ง, ๋ด๊ฐ ํ ๋ฒ ๋ ๋์๊ฐ๊ธฐ ์ํด์ ๋ฐฐ์์ผ ํ ๋ค์ ๋จ๊ณ๊ฐ ๋์ ๋ค์ด์๋ค. ํด๋์ค์๋ค.
์ธํฐ๋ํฐ๋ธ ๋๋ฒจ๋กํผ ๊น์ข ๋ฏผ ๋ ์ ํ๋ธ ์ค Javascirpt๋ก ํ๋ ๋ชจ์์ ๋ง๋๋ ์ฌ๋ฐ๋ ์์ ๋ฅผ ๋ฐ๋ผ ํด๋ณด๋ ค๊ณ ํ๋๋ฐ
ํด๋์ค๋ฅผ ์ด์ฉํ์ฌ ํด๋น ์ฝ๋๋ฅผ ๋ง๋์ จ๋ค๋ ์ฌ์ค์ ์๊ฒ ๋์๋ค.
ํด๋์ค๋ฅผ ์ ํ ๋ชจ๋ฅด๋ ๋ด๊ฐ ํด๋์ค๋ฅผ ๊ณต๋ถํด์ผ๊ฒ ๋ค๊ณ ๋ง์์ ๋จน๊ฒ ๋ ์ฌ๊ฑด์ด๋ค.
www.youtube.com/watch?v=LLfhY4eVwDY
๐Javascript์ Class
์๋ฐ์คํฌ๋ฆฝํธ์์ ํด๋์ค ์ฌ์ฉ์ ES6์์๋ถํฐ ์ง์์ ํ๊ธฐ ์์ํ๋ค.
์ต์คํ๋ก๋ฌ์์๋ ํด๋น ์ฝ๋ ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ๋, ์ต์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ด์ฉํ ๊ฒฝ์ฐ class๋ฅผ ์ง์ํ๋ค.
Class๋ฅผ ์ฌ์ฉํ๋ ๊ฐ์ฅ ํฐ ์ด์ ๋ ์ฌ์ฌ์ฉ์ฑ์ด๋ค.
์์ ์ฌ์ดํธ์ ๊ฒฝ์ฐ ์ ๋ง๋ Functionํ๋๋ก๋ ์ถฉ๋ถํ ๊ฐ๋ฐ์ด ์ฉ์ดํ๋ค๋ฉด ์ข ๋ ๋ณต์กํ ์ฌ์ดํธ๋ฅผ
๋ง๋ค๊ฒ ๋ ๊ฒฝ์ฐ Class์ ์ฅ์ ์ ๋ ์ ์ ์ ์๋ค๊ณ ํ๋ค.
์ผ๋จ ๋ ์ค๋์ ํด๋์ค์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ๊ณต๋ถํด๋ณด๊ธฐ๋ก ํ๋ค.
Class ๊ธฐ๋ณธ ๋ฌธ๋ฒ
Class ์์ฑํ๊ธฐ
Javascript ๋ด์์ Class๋ฅผ ์์ฑํ๋ ค๋ฉด ๊ฐ๋จํ๋ค.
class๋ฅผ ์ ์ธ๋ง ํด์ค๋ค๋ฉด class ๊ฐ์ฒด๋ฅผ ๋ฐ๋ก ๋ง๋ค ์ ์๋ค.
class Person {
}
let kim = new Person();
console.log(kim);
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);
์ด์ฒ๋ผ 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());
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());
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())
์์(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())
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())
class๋ฅผ ์ด์ฉํ ๊ฒฝ์ฐ ๊ท์น์ฑ์ ๊ฐ๋ ๊ฐ์ฒด๋ฅผ ์ผ๊ด์ฑ ์๊ฒ ๋ง๋๋ ๊ฒ ๊ฐ๋ฅํ๋ฉฐ,
์์์ ํตํด์ ๊ธฐ๋ฅ ํ์ฅ์ด ์ฉ์ดํ๋ค๋ ๊ฒ ์ ์ ์์๋ค.
Reference
opentutorials.org/module/4047/24614
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes