2021년 5월 9일 클래스를 이용한 모듈화, 프로토 타입 예습

내일의 일정을 확인해보니 클래스를 이용한 모듈화, 프로토 타입이라는 것을 공부해야하는 것으로 나와있었다. 

 

UR클래스에는 아직 강좌가 열리지 않아서 확인을 못했지만

 

해당 내용은 코드스테이츠를 수강하기 전에 객체를 공부하며 함께 본 기억이 있었기에

 

그때 공부했던 자료를 찾아보기 시작했다.

 

그당시 중요하다고 생각한 내용을 적어 놨었는데

 

아래와 같다. 

 

• 객체에 추가된 값으로 정의되는 속성을 property라고 한다.
• 속성들 중에 값이 함수인 것들을 method(동작, 기능)라고 한다.
• this란? 객체가 메서드를 실행했을때 메서드를 실행한 주체 객체, 자바스크립트 함수 안에서 this는 함수가 실행되는 context에 따라 값이 바뀐다.  
• 생성자(constructor) 함수란 객체를 생성해내는 함수. function Person처럼 첫글자를 대문자로 적어준다.(관례적으로)(이와 동일하게 class를 이용하여 만들어 낼 수 있다.)
• 생성자 함수로 생성해낸 각각의 개별객체를 instance라고 부른다. 
• 함수가 생성자로서 호출이 되게하고 싶을때는 함수 앞에 new를 붙인다. 
• 각각의 인스턴스가 공통적인 메소드를 가진다면 공유하는 형태로 바꿀 수 있다. 이때 사용되는 것이 prototype.
• prototype 객체는 각각의 인스턴스가 공유하는 메서드나 속성이다. 
• 사용 시 (Person.prototype.속성이나메서드이름 = 값이나 함수) 이와 같은 형태로 세팅 할 수 있고 혹은

Person.prototype = {
	constructor: Person,
 	introduce: function(){

	}   
}

• 위와 같은 형태로 prototype을 정의해 줄 수 있다. 

짧은 기록을 통해서 내일 배우는 prototype에 대한 개념을 맛볼 수 있었으나 아직 class에 대해서는 힌트만 나와있었기에 조사를 해보았다. 

 

---

드림코딩 by 엘리

관련있는 변수나 함수들을 묶어 놓은 것을 클래스라고 함.
(사람을 예로 든)클래스 안에는 이름과 나이 같은 속성(field)가 있고 말하는 행동(method)이 있다.
객체지향 언어로 프로그래밍을 잘하는 개발자는 풀어야 되는 문제나 구현해야 되는 기능들을 객체로 정의해서 만들 수 있는 개발자


Class
    -template
    -declare once
    -no data in
    
클래스는 붕어빵을 만들 수 있는 틀을 말한다.
청사진 혹은 템플릿으로 불림
클래스 자체에는 데이터는 들어있지 않고 템플릿만 정해 놓는 것
클래스는 템플릿에 속하고 이 템플릿을 이용해서 실제로 데이터를 넣어서 만드는 것이 오브젝트.
기존에 존재하던 프로토타입을 베이스로 한 것에 기반에서 그 위에 문법만 클래스가 추가된 거임.

 

//1. Class declarations 

class Person{
	constructor(name, age){
    //fields
    	this.name = name;
        this.age = age;
    }
    //method
    speak(){
    	console.log(`${this.name}: hello!`);
    }
}

class 키워드를 통해서 사람이라는 클래스를 만들고 

contructor 생성자를 이용해서 나중에 오브젝트를 만들때 필요한 데이터를 전달함.

 

const ellie = new Person('ellie', 20); 
//이와 같은 형태로 ellie라는 변수에 
//object를 만들어 담아 낼 수 있음.

console.log(ellie.name);

ellie //위 console.log(ellie.name);의 결과 값

console.log(ellie.age);

20 //위 console.log(ellie.age);의 결과 값

ellie.speak();

ellie: hello! //위 ellie.speak();의 결과 값

getter & setter : 클래스를 방어적인 자세로 만들 수 있도록 해주는 것.

 

아래 코드는 User라는 클래스를 생성하고 object를 만들때 age에 -1이라는 말도안되는 숫자가 들어왔을 때 방어하는 getter와 setter를 설명하기 위함인 듯 하다.

 

//2. Getter and setters
class User{
	constructor(firstName, lastName, age){
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    
    get age(){ //값을 리턴하고 
    	return this.age;
    }
    
    set age(value){//값을 설정할 수 있음. 값을 설정하기 위해서는 value를 받아와야함.
    	this.age = value;
    }
}

//이렇게 설정하면 계속 call stack size exceeded라는 에러가 발생함
//age라는 getter를 정의하는 순간 constructor의 this.age는 메모리에 올라가 있는 데이터를 읽어오는 것이 아니라
//바로 getter를 호출하게 됨
//setter를 정의하는 순간, 값을 할당 할 때(= 옆의 age) 메모리의 값을 할당하는 것이 아니라 setter를 호출하게 됨.
//즉 우리가 setter안에서 전달된 value를 this.age에 할당할 때 메모리의 값을 업데이트하는 것이 아니라
//setter를 호출하게 됨. set age(value)안에서 계속 반복하게 되어 에러를 발생시킴
//이를 방지하기 위해서

    get age(){
    	return this._age;
    }
    
    set age(value){
    	if(value < 0){
        	throw Error('age can not be negative');
        }
    	this._age = value; //위 처럼 쓰던가 아니면 value < 0 ? 0 : value; 처럼 삼항연산자로 나타냄
    }

//getter와 setter안에서 쓰여지는 변수의 이름을 조금 다른 걸로 만들어 줘야함
//User라는 클래스 안에는 3개의 field가 있다.(firstName, lastName, _age)

const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);

상속(Inheritance) & 다양성 : 하나의 클래스에서 다른 클래스로 연장할 수 있는 방법(extends 키워드 사용)

 

class Shape{
	constructor(width, height, color){
    	this.width = width;
        this.height = height;
        this.color = color;
    }
    
    draw(){
    	console.log(`drawing ${this.color} color of`);
    }
    
    getArea(){
    	return width * this.height;
    }
}

class Rectangle extends Shape{}

//extends를 적어주는 것 만으로도 Shape 클래스에서 정의해 놓은 메서드와 프로퍼티를 가져올 수 있음.

const rectangle = new Reactangle(20, 20, 'blue');
rectangle.draw();

drawing blue color of // rectangle.draw();의 결과 값

여기에다가 재정의가 필요한 경우 기존의 메서드를 가져다가 다시 수정해서 쓸 수 도 있는데 이를 overriding이라고 하고 예시는 아래와 같음.

 

class Triangle extends Shape{
	getArea(){
    	return (this.width * this.height) / 2;
    }
}

const triangle = Triangle(20, 20, 'red');
console.log(triangle.getArea());

200//console.log(triangle.getArea());의 결과값

여기서 overriding을 하게되면 기존의 Shape의 메서드를 더이상 사용할 수가 없게되는데 

이때 overriding한 메서드 안에서 super키워드와 재정의한 메서드의 이름을 써주면

기존 부모의 메서드 또한 사용할 수 있게된다. 

class Triangle extends Shape{

	draw(){
    	super.draw();
    	console.log('▲')
    }
	getArea(){
    	return (this.width * this.height) / 2;
    }
}

const triangle = Triangle(20, 20, 'red');

console.log(triangle.draw());

drawing red color!//console.log(triangle.draw());의 결과값
▲//console.log(triangle.draw());의 결과값

---

위 동영상 강의 중 중요한 부분을 적어보면서 개념 + 예상치못한 관련 지식을 풍부하게 알게되었다. 

 

들어보니까 상당히 정리가 잘되어있어서 이해하기가 쉬웠다. 

 

내일의 Chapter 또한 잘 이해해보리라!