혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다
오늘의 Checkpoint
객체 지향 프로그래밍 OOP
Object-oriented programming
현실 세계에 빗대어 표현한 방식
연관된 데이터(속성)와 기능(메서드)을 하나의 객체(클래스)에 포함하여 코드를 추상화하는 작업
cf. 절차 지향 프로그래밍
: 순차적으로 코드를 해석하는 방식
클로저 모듈 패턴 vs 단순 객체 사용
클로저 모듈 패턴은 클로저를 활용하여 새로운 객체를 생성하고 재사용 가능
반면, 단순 객체를 사용하는 것은 여러 객체에 적용하기 힘들고 재사용이 불가능
// 단순 객체
let buyingEggs = {
egg: 20,
plus: function() {
this.egg++;
},
minus: function() {
this.egg--;
},
count: function(){
return this.egg;
}
}
buyingEggs.plus();
buyingEggs.plus();
buyingEggs.minus();
buyingEggs.count(); // 21
// 클로저 모듈 패턴
function wrapFruits() {
let fruit = 10;
return {
plus: function() {
fruit++;
},
minus: function() {
fruit--;
},
count: function() {
return fruit;
}
}
}
let apples = wrapFruits()
apples.plus()
apples.count() // 11
let blueberrys = wrapFruits()
blueberrys.minus()
blueberrys.minus()
blueberrys.count() // 8ES6 부터 클래스 생성할 때 function 키워드가 아닌 class 키워드 사용
객체 지향을 자동차 생산 비유할 때,
- 클래스 : 설계도
- 인스턴스 : 생산된 자동차
- 속성 : 색상, 브랜드명, 차 이름
- 메소드 : 운전, 속력 설정
클래스
비슷한 특징을 가진 데이터를 하나로 묶는 개념
데이터를 속성과 메소드(객체에 포함된 함수)로 정의하여 포함
인스턴스 생성을 위한 생성자 함수(contrauctor)를 포함
-
class키워드나function키워드로 정의
cf. ES6 이전에는function키워드 사용 -
클래스 이름은 대문자로 시작, 명사형 이름
cf. 함수는 소문자, 기능을 의미하는 동사형
인스턴스 객체
클래스는 하나의 큰 묶음이라면 인스턴스는 구체화된 대상을 의미
-> 인스턴스를 통해서 세부적인 속성값을 추가하고 클래스의 속성과 메서드를 사용
new키워드로 인스턴스 생성
-> 생성자 함수가 실행 + 변수에 인스턴스 할당
생성자 constructor
인스턴스가 생성될 때 실행되는 특별 메서드
- 인스턴스 생성과 초기화 수행
- 리턴값 X
- 세부적인 속성값을 추가하는 단계
- 클래스에는 1개의 생성자만 존재
-> 2개 이상일경우 syntaxError 발생
클래스 내부에 생성자가 정의 되어있지 않다면
- 빈 메서드를 기본 생성자로 사용
constructor() {}- 상속받은 경우, 부모 클래스의 생성자 호출
cf.
부모 클래스의 생성자를 호출할때, super()를 가장 상단부에서 사용
: super() 보다 this 가 더 먼저 읽히면 ReferenceError 발생
this
인스턴스가 생성이 되면 해당 인스턴스를 의미
클래스 정의
/*---- ES6 작성 문법 ----*/
// class 키워드 안에 생성자와 메서드 정의, 속성은 생성자 안에 정의
class Car{
constructor(color, brand){ // 생성자 함수
this.color = color;
this.brand = brand;
// 클래스의 속성 정의
}
drive(){}
speed(){}
// 클래스의 메소드 정의 -> 클래스 내부 생성자 밖에서 정의
// 클래스 내부에서 메서드 정의할 때, 콤마 없음 주의!
}/*---- ES5 작성 문법 ----*/
function Car(color, brand){ // 생성자 함수
// 클래스의 속성 정의(동일)
}
Car.prototype.drive = function(){ }
Car.prototype.speed = function(){ }
// 클래스의 메소드 정의 -> prototype을 이용, 밖에서 정의인스턴스 사용
// 인스턴스는 클래스의 고유 속성과 메서드 가짐
let dreamCar = new Car('blue', '람보르기니');
dreamCar.color // 'blue'
dreamCar.brand; // '람보르기니'
dreamCar.drive(); // 운전시작
let fancyCar = new Car('red', '페라리');
fancyCar.brand; // '페라리'
fancyCar.drive(); // 운전시작
객체지향의 4가지 특징
캡슐화
Encapsulation
하나의 객체 안에 속성과 기능을 묶음
-
느슨한 결합 Loose Coupling
: 분산되어있는 코드를 한곳에서 결합하는 방식
-> 수정 용이 + 기능의 흐름 파악 용이 -
은닉 hiding
: 포함된 내용은 노출되지 않고 기능만 노출
-> 외부 수정에 의해 발생하는 오류 감소
ex. getter, setter 함수를 설정하면 데이터 접근은 가능하지만 수정은 불가
추상화
Abstraction
복잡한 기능을 단순한 인터페이스로 표현
-> 속성과 메소드의 이름만 노출
-> 변화에 대한 영향 감소
ex. 사용자에게 불필요한 메서드는 드러나지 않음
cf. 캡슐화는 데이터 보호를 위한 은닉
상속
Inheritance
기본 클래스 base class(부모)의 특징을 파생된 클래스 derived class(자식)가 물려받는 것
-> 자식 클래스의 속성과 메서드 = 부모 클래스 + α
-> 재사용성을 높혀 불필요한 코드 줄임
다형성
Polymorphism
같은 형태의 메서드라도 다른 방식으로 구현될 수 있음
-> 부모 클래스에 공통적인 개념을 정의하고 자식 클래스에서 구체적인 기능을 정의
-> 조건 분기 등 불필요한 코드 줄임
ex. html의 render()
: TextBox, Select, CheckBox 등에 '화면에 뿌린다'는 의미로 같은 이름의 render 메서드가 사용되는데, 표현 방식이 조금씩 다름
오늘의 나
느낀점
프로토타입?? 오늘 역대급으로 어려웠다. (내일 스케줄이랑 이어지는 부분이라 내일 포스팅에 몰아넣음) 생활코딩을 봐도 잘 이해가 가지 않았다. 다행히 다른 영상들 보고 살짝 감은 잡히는데 아직 확실하게 알지는 못하는 것 같다. 특히 저 3가지.
Human.prototype.constructor === Human;
Human.prototype === kimcoding.__proto__;
Human.prototype.sleep === kimcoding.sleep;여러 자료를 보고 대략적으로 조회하려는 값을 해당 인스턴스에서 조회할 수 없으면 상속받은 클래스들에서 점차 위로 올라가서 값을 찾는다는 것 같긴한데. 저 3줄의 의도를 잘 모르겠다. 의미가 같다는건 알겠는데 애매하게 알겠어서 더 파봐야겠다.
그리고 자료를 찾아보면서 오히려 혼란스러웠다. 자바를 접해봐서 클래스와 인스턴스의 개념은 알고있었다. 그래서 자바스크립트에서 객체지향 설명에 해당 내용이 나오길래 키워드를 function으로 사용했던것은 문법 차이겠거니, 당연히 클래스가 있는 줄 알았다. 그런데 프로토타입 이해를 위해서 본 영상과 자료에서는 자바스크립트에는 클래스가 없다고 한다...?? 객체지향 프로그래밍에서 현실세계에 빗대서 설명하는 것처럼 이해를 위한 클래스였던건가?? 이번 세션은 혼란의 연속이다. 어제 포스팅 정리 마무리 못한거 마져 할려고했는데, 손도 못댈 정도로 오늘 내용은 이해를 위해 많은 시간이 든다.
개선점 및 리마인드
- 나의 언어로 표현하기
블로깅 추천하며 나의 언어로 설명을 하라는게 오늘 다른 사람들의 블로그를 보면서 왜 필요한지 알 것 같다. 완전하게 이해를 해야 나의 언어로 표현 가능하고, 예시와 예제들을 더 쉽게 표현할 수 있는 것 같았다. 포스팅을 하면서 수업내용을 그대로 적기보다 어느정도 내 표현으로 썻다고 생각했는데, 다른 사람들 포스팅을 보니 더 자유롭게 설명을 적었던 것 같다. 나도 틀을 좀 깨보려고 노력해야겠다.
**
