211207 프론트엔드 스쿨 27일차

수업 내용 (이호준 강사님)

자바스크립트

json 복습

• 자바스크립트 이벤트 인라인으로 쓰면 안되는 이유

  • html, JS의 경계가 없어진다. 마크업에서는 마크업만 해야 한다.

• chart.js을 쓰면 효율적이다.

• 손코딩으로 json 복습하기

손코딩 TIP

• 이해력을 높여주고 화이트 보드 테스트에 대비할 수 있다.
• 주의사항.
  • 예쁘게 쓴다.
    -글자가 많다고 날려쓰지 말 것.
    -간격 맞추기.
  • 주석 달기.
  • 이해가 안되는 용어는 부연설명 없이 해당 단어만 채팅창에 띄우기.
• HTML은 딱 2번만, JS는 2번씩 총 6번

손코딩 후 질의응답

• map과 forEach의 차이점

  • map 반환값을 새로운 배열로 만들어준다. forEach는 반환값이 없다.

• join의 기능

document.write([
  '<h1>hello world</h1>', 
  '<h1>hello world</h1>', 
  '<h1>hello world</h1>', 
  '<h1>hello world</h1>'
]);

위와 같이 작성하면 원하지 않는 콤마가 생긴다.

join을 통해서 대체하거나 없애줄 수 있다.

document.write([
  '<h1>bye world</h1>', 
  '<h1>bye world</h1>', 
  '<h1>bye world</h1>', 
  '<h1>bye world</h1>'
].join('-'));

document.write([
  '<h1>bye world</h1>', 
  '<h1>bye world</h1>', 
  '<h1>bye world</h1>', 
  '<h1>bye world</h1>'
].join(''));

프로토타입 상속

prototype : 유전자(상속받은 객체)
__proto__는 [[prototype]]에 접근하기 위한 방법
__proto__는 비표준으로 시작했으나 지금은 표준의 부록에 실렸다

• 수명
  
  
  

클래스

• 클래스 붕어빵 찍는 틀
  인스턴스 붕어빵

• 클래스는 syntax sugar가 아닙니다.

class User {

  constructor(name) {
    this.name = name;
  }

  sayHi() {
    alert(this.name);
  }

}

// 사용법:
let user = new User("John");
user.sayHi();

• 메서드 오버라이딩과 오버로딩을 설명해보세요 라는 문제가 나온다면?
  오버로딩은 js에 없다!

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed = speed;
    alert(`${this.name}가 속도 ${this.speed}로 달립니다.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name}가 멈췄습니다.`);
  }

}

class Rabbit extends Animal {
  hide() {
    alert(`${this.name}가 숨었습니다!`);
  }

  stop() {
    super.stop(); // 부모 클래스의 stop을 호출해 멈추고,
    this.hide(); // 숨습니다.
  }
}

let rabbit = new Rabbit("흰 토끼");

rabbit.run(5); // 흰 토끼가 속도 5로 달립니다.
rabbit.stop(); // 흰 토끼가 멈췄습니다. 흰 토끼가 숨었습니다!