6주차 과제 - prototype과 Component

6주차 과제에서는 prototype 과 Component라는 아주 생소한 부분들의 과제를 풀었다. 코드는 몇 줄 안되지만, 
prototype의 값을 넣어주고, component의 실행이 엮이고 엮어서 그 부분을 보고 코드 하나씩 뜯어보는게 매우 신기하면서도
아주 어려운 과제였다.

 

CanloaError에서는 Canola에서는 오류가 발생할 경우 canola만의 고유한 에러를 발생시킨다

Canola를 사용하는 사용자(개발자)의 경험을 위함이고, 어떠한 이유로 어디서 발생한 오류인지 빠르게

인지시키기 위함이다. 

 

둘째로는 Canola가 성장하여 많은 로직을 품을텐데, Canola만의 확장성을 확보해놓기 위함이다

 

CanolaError 클래스는 자바스크립트의 기본적으로 주어진 Error클래스와 밀접한 관계가 있다

즉, CanolaError는 Error의 자식같은 존재가(상속)

Error ———> 상속 ———> CanolaError

 

CanolaError는 결국 근본적으로 Error다 그렇기에 기본 Error 클래스의 기능들을 상속받도록

설계한 것이다.

 

Function CanolaError(message) {

Error.call(this, message);

this.message = message;

}

 

CanolaError.prototype = Object.create(Error.prototype);

CanolaError.prototype.constructor = CanolaError;

 

알아보았던 상속이라는 개념을 통해 Error를 CanolaError에 상속시킨다.

 

ComponentFactory

 

자바스크립트에서 Factory란, 모든함수는 새 객체를 반환할 수 있다. 생성자 함수나 클래스가 아닌 경우에는

팩토리 함수라고 한다.

 

프론트엔드에서 말하는 컴포넌트란, 재사용이 용이하도록 만들어진 UI의 일부를 일컫는다

어떠한 공통된 로직을 포함한 버튼 컴포넌트를 만들어 놓고, 필요할때마다 쉽게 재사용하도록 할 수 있게

하는 것이다.

 

Throw = 사용자 정의 예외를 발생할 수 있다. 예외가 발생하면 현재 함수의 실행이 중지되고

(Throw 이후의 명령문은 실행되지 않는다.) 제어 흐름은 콜스택의 첫 번째 catch블록으로 전달된다.

호출자 함수 사이에 catch 블록이 없으면 프로그램이 종료된다.

 

Export 문은 자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼때 사용한다. 내보낸 값은 다른 프로그램에서

Import 문으로 가져가 사용할 수 있다.

내보내기에는 두 종류가 있다 유명(named) 와 기본(default)

유명 내보내기는 이름을 동일하게 사용해야하지만, 기본 내보내기는 어떤 이름으로 가져올 수 있다!!

 

Inheritance in JavaScript

부모클래스에서 자식클래스를 상속하는 방법

 

Function person(first, last, age, gender, interests) {

this.name = {

first,

last

};

this.age = age;

this.gender = gender;

this.interests = interests;

};

 

메소드는 전부 아래처럼 Prototype에 정의되어 있다.

Person.prototype.greeting = function() {

alert(“Hi! I\m” + this.name.first + “.”);

};

 

Theacher 이라는 클래스를 만들어보자. Person을 상속받고 몇 가지를 추가한다

 

Function Teacher(first, last, age, gender, interests, subject) {

person.call(this, first, last, age, gender, interests);

 

this.subject = subject;

}

 

Person() 생성자와 비슷해보이지만 call이 있다. call()함수의 첫번째 매개변수는 다른 곳에서 정의된 함수를

현재 컨텍스트에서 실행할 수 있도록 한다 실행하고자 하는 함수의 첫 번째 매개변수로 this를 전달하고

나머지는 실제 함수 실행에 필요한 인자들을 전다하면 된다.

 

Teacher()생성자는 Person()을 상속받았으므로 같은 매개변수들이 필요하여 call()인자로 전달

마지막 속성인 subject는 따로 있기에 따로 빼주면 된다.

 

상속하지 않고 따로 만들어 줄 수도 있다.

 

Function teacher(first, last, age, gender, interests, subject) {

this.name = {

first,

last

};

this.age = age;

this.gender = gender;

this.interests = interests;

this.subject = subject;

}

 

다만 저렇게 쓸 경우 Person()을 상속받은게 아니라 단지 동일한 인자를 정의했을 뿐이다. 또한 코드가 길어진다는 단점이 있다.

 

만약 매개변수가 없이 생성자를 상속해야 한다면 

 

Function Brick() {

this.width = 10;

this.height = 20;

}

 

Function BlueGlassBrick() {

Brick.call(this);

}

 

call()함수에 this만 넘기면 된다.

 

돌아가서 정의한 새 생성자에는 함수 자신에 대한 참조만 가지고 있는 프로토타입 속성이 할당되어 있다.

정작 상속 받은 Person()생성자의 prototype 속성은 없다.

 

prototype또한 상속시키려면

Teacher.prototype = Object.create(Person.prototype);

create()이 등장한다. 새객체를 생성하여 Teacher.prototype으로 할당했다. 새 객체는

Person.prototype 객체를 자신의 프로토타입으로 가지고 있으므로 정의된 모든 메소드를 사용할 수 있다.

또한 위에 처럼 사용하고 하나더 추가해줘야 되는데 바로,

Teacher.prototype.constructor = Teacher; 이다. 그러지 않는다면 

Constructor는 Person으로 남아 있는다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance

Inheritance in JavaScript - Web 개발 학습하기 | MDN

위 mdn에서 상속에 대해 자세하게 나온다. 위 내용도 코드로 하나씩 쳐가면서 상속과 call, creat 개념 부분을 적어본 것이다. 

trim() - 양 옆에 문자열 앞 뒤의 빈칸들을 없애준다.

 

setTimeout은 첫 번째 매개변수로 함수를 전달하면 된다. 

 

For in 에 대해서 

상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에대해 반복한다

advanced

 

저 부분은 event를 직접 주었다. 클릭시 h3, p 태그 부분이 맞다면 콘솔에 찍히지만 만약 다른 것을 원한다면? 그리고 수 십개, 수 백개를 고쳐야한다면? 그러면 직접 다시 코딩을 해야되는 하드코딩적인 방법이였다. 그래서 코드리뷰 된 부분들을 보면서 for in 부분을 공부했다.

 

ken님이 주신 예시들을 보면 

events: {
    ".clock h3": function onTitleClick() {
      // ".clock h3" 선택자에 해당하는 요소를 클릭했을 경우, 실행됩니다.
      console.log("Click H3!");
    },
    ".clock p": function onTimeClick() {
      // ".clock p" 선택자에 해당하는 요소를 클릭했을 경우, 실행됩니다.
      console.log("Click P!");
    },
  },

저 events라는 것 안에 ".clock h3", ".clock p"라는 게 두 가지가 있었다. 그리고 그 키 값으로 함수가 들어가 있었다.

 

for (const selector in events) 를 하면 selector 안에 저 위에 키 값이 들어가있는다. 

그럼 selector는 키값이고 events[selector]를 하면 value 즉, 함수가 들어가있다. 그렇게 되면 내가 따로 하나씩 하는게 아니라, 
for in으로 키값을 찾아 언제든 사용할 수 있다는 뜻이다.

 

그 다음 변수를 하나 더 선언한다

$element = document.querySelector(selector);

$element = document.querySelector(css선택자)로 넣어줘야 하는데, selector의 키를 보면 css선택자로 감싸져 있다.

그래서 그걸 그대로 사용해주면 DOM으로 접근이 가능해진다.

 

그럼 이제 요소도 구했고, DOM처리도 했다. 이제 남은건 이벤트 처리 하나다.

 

이벤트 처리는 addEventListener(이벤트타입, 함수) 가 들어가는데 함수는 value를 보면 function이 있다. 즉 events[selector]를 함수 부분에 넣으면 타고 들어가서 저 함수를 가지고 오고, 클릭시 콘솔이 찍히는게 발생한다.