TIL_21.01.18(월)~ 01.22(금)

nRecode·2021년 1월 19일
0

TodayILearned

목록 보기
85/95
post-thumbnail

01.18(월)

상속패턴

코드스테이츠 컨텐츠 복습

프로토타입

JavaScript - OOP Object 생성
로 자바스크립트에서 OOP를 어떻게 사용하는지 복습

JavaScript - Prototype과 상속
에서 prototype 복습

JS는 prototype으로 class를 만든다. prototype은 객체의 원형으로 이를 복제하여 상속을 한다. Prototype object와 Prototype link로 나눌수 있는데,

자바스크립트에서 객체를 생성할때, var obj = new Object(); 이렇게 생성된다. 이는 객체를 생성할때 함수를 통해 생성된다는 것을 알 수 있는데, 함수가 생성될 때 기본적으로 해당함수에 생성자 자격이 부여되고, 해당함수의 Prototype Object가 생성 및 연결 된다.

생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있다. Prototype Object의 속성으로는 constructor, __proto__가 있다.

Prototype link__prototype__에 값을 담고 있는데 이는 자신을 만들어낸 객체의 원형을 의미한다.

Prototype Chain은 상속관계를 통해 상위 프로토타입으로 연속해서 이어지는 관계를 말한다.

01.19(화)

Prototype Chain

class 키워드를 사용하면 간단하다.

class Human{
  constructor(name){
    this.name = name;
  }
  sleep(){ console.log('zzz'); }
}

class Student extends Human{
  constructor(name){
  super(name);
  }
  learn(){ console.log('빡공중')}
  sleep(){
    super.sleep()
    console.log('wake up!')
  }
}

위의 원리는 아래와 같음

var Human = function(name){
  this.name = name;
}
Human.prototype.sleep = function(){console.log('zzz')}


var Student = function(name){
  Human.call(this,name);
}
Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.learn = function(){};

// 객체지향의 다형성
Student.prototype.sleep = function(){
  Human.prototype.sleep.apply(this);
  console.log('wake up!');
}

OOP의 특성 4가지 복습(리스트 작성)

OOP(객체 지향 프로그래밍)이란?

  • 추상화 - 불필요한 정보를 숨기고 중요한 정보만 표현
  • 캡슐화 - 클래스에 메스드와 데이터를 하나로 묶어 메소드로 접근
  • 상속 - 상위클래스의 메소드나 속성을 하위 클래스가 물려받음
  • 다형성 - 형태가 같은데 다른기능을 할 수 있음

beesbeesbees 레포 복습

코드스테이츠 프라이빗 레포 beesbeesbees로 자바스크립트의 상속을 복습하였다.

ES6

class Grub {
  constructor() {
    this.age = 0;
    this.color = 'pink';
    this.food = 'jelly';
  }
  eat() {
    return 'Mmmmmmmmm jelly';
  }
}

class Bee extends Grub{
  constructor(){
    super();
    this.age = 5;
    this.color = 'yellow';
    this.job = 'Keep on growing';
  }
}

01.19(목)

subclass-dance-party 레포 복습

코드스테이츠 프라이빗 레포 subclass-dance-party로 OOP 다형성을 복습하였다.

class DancerClass {
  constructor(top, left, timeBetweenSteps) {
    this.$node = this.createDancerElement();
    this.top = top;
    this.left = left;
    this.timeBetweenSteps = timeBetweenSteps;
    this.step();
    this.setPosition(this.top, this.left);
  }

  createDancerElement() {
    let elDancer = document.createElement('span');
    elDancer.className = 'dancer';
    return elDancer;
  };

  step() {
    setTimeout(this.step.bind(this), this.timeBetweenSteps);
  }

  setPosition(top, left) {
    Object.assign(this.$node.style, {
      top: `${top}px`,
      left: `${left}px`
    });
  }

}

class RotatingDancerClass extends DancerClass {
    //constructor(top, left, timeBetweenSteps) {
    //  super(top, left, timeBetweenSteps);
    //}
  
    step() {
      super.step();
      let style = this.$node.style;
      // style.display = "inline-block";
      //style.display = style.display === 'none' ? 'inline-block' : 'none';
    }
  
    createDancerElement() {
      let elDancer = document.createElement('img');
      elDancer.className = 'rotatingImage';
      elDancer.src = "https://image.flaticon.com/icons/svg/742/742795.svg"
      elDancer.style.width = "150px";
      elDancer.style.height = "150px";
      
      elDancer.onclick = function(){
        let el =document.querySelector(".rotatingImage");
        el.remove();
    }
      return elDancer;
    };
  }

ES6

복습

01.20(금)

데이터 타입

컴퓨터에 0과 1로 저장되어 있는 데이터를 인간이 사용하는 여러가지 데이터들의 종류로 해석하기 위한 장치

자료구조

  • 데이터타입: 하나의 데이터를 어떻게 해석할지 정의한 것
  • 자료구조: 여러 데이터들의 묶음을 어떻게 저장하고 사용할지 정의한 것
    (Ex. Array, Tree, Stack)

대부분의 자료구조는 특정한 상황에 문제를 해결하는데 특화되어 있다.

스택, 큐를 복습하였다.

+)
hasOwnProperty - 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환
MDN | hasOwnProperty

그래프 복습 및 직접구현 & 수정
트리, 이진트리를 포스팅하였다. (+구현)

profile
안정성, 확장성 있는 서버를 구축하고 가꾸는 개발자를 목표로 공부하고 있습니다. 🤔🤔🤔🤔 부족하기에 맞지 않는 내용이 있을 수 있습니다. 가감없이 피드백 해주시면 정말 감사하겠습니다..🙏

0개의 댓글