TIL(20.03.27) Immersive #10 Inheritance implementation

< 오늘 배운 것 >😆

• Inheritance implementation

• Psedoclassical Inheritance implementation

• 느낌표 두개 연산자 -> !! 0, null, undefined와 같이 정의 되지 않은 변수를 강제 변환해서 정확한 결과값(true,false)을 얻게 해주는 연산자

< 회고 >

오늘은 어제와 비슷하면서 다르게 기존의 함수를 수정하고 거기에 Dom을 Html css를 사용하여 자유 주제로 홈페이지를 만들어 보았다. 진행 하면서 막히는 부분이 많았다. setTimeout함수에서의 call과 bind사용 ES6 Allow function의 호환 등등 문제가 막혀서 문제 해결 하는데 애를 먹었고 진행 하면서 함수 상속 문제 연결 문제 등등 문제점이 발생 하였다. test케이스를 작성 하면서 스프린트를 진행 할 수 없기 때문에 중간 중간 의심이 되는 즉 연결이 되지 않았다고 생각했던 부분들을 console.log로 찍어서 확인 하면서 오류를 잡았다. 그리고 css에 많이 등한시 했었는데 css를 많이 찾아보고 적용 하면서 디자인에 대한 욕심도 생기고 흥미도 느꼈다. 이번 스프린트는 너무 재밌게 진행 하였다. 페어분도 너무 훌륭한 분이라 오류를 잡는데 수월했고 내가 생각 하기에 완성도 측면에서도 괜찮았던 스프린트였던거 같다.

처음에는 functional로 주어진 코드를 psedoclassical과 ES6 class버전으로 바꾸어 해결 하는 문제가 나왔다. 오늘 포스팅은 주어진 코드를 바꾸는 포스팅과 문제를 해결 하면서 문제가 있었던 점을 포스팅하겠다.

1. Functional code

이번 스프린트에서 주어진 코드이다.

Dancer.js

if (typeof window === 'undefined') {
  var jsdom = require('jsdom');
  var { JSDOM } = jsdom;
  var { document } = (new JSDOM('')).window;
} 

var makeDancer = (top, left, timeBetweenSteps) => {
  const dancer = {};

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

  dancer.$node = createDancerElement();

  dancer.step = () => {
 
    setTimeout(dancer.step, timeBetweenSteps);
  };

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

  dancer.step();
  dancer.setPosition(top, left);

  return dancer;
};

blinkyDancer.js

if (typeof window === 'undefined') {
  var makeDancer = require('./dancer');
} 
var makeBlinkyDancer = (top, left, timeBetweenSteps) => {
  const blinkyDancer = makeDancer(top, left, timeBetweenSteps);

  let oldStep = blinkyDancer.step;

  blinkyDancer.step = () => {
   
    oldStep();

    let style = blinkyDancer.$node.style;
    style.display = style.display === 'none' ? 'inline-block' : 'none';
  };

  return blinkyDancer;
};


if (typeof window === 'undefined') {
  module.exports = makeBlinkyDancer;
}

2. ES6 class

< DancerClass.js >

class DancerClass {
  constructor(top, left, timeBetweenSteps) {
    this.$node = this.createDancerElement();
    this.top = top;
    this.left = left;
    this.timeBetweenSteps = timeBetweenSteps;
    this.step();
    this.setPosition(top, 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`
    });
  }
}

Functional code를 class로 바꾸었다. 바꾸면서 setTimeout에 함수 실행 조건을 충족 시키지 못해 많이 애를 먹었었다. 처음에는 this.step으로 사용하였다가 bind(this)를 붙여 문제를 해결 하였는데 this.step만으로는 setTimeout 비동기 함수를 실행 시키지 못하기 때문이다.

< BlinkyDancerClass.js >

if (typeof window === "undefined") {
  global.DancerClass = require("./DancerClass");
}

class BlinkyDancerClass extends DancerClass {
  step() {
    super.step();

    let style = this.$node.style;
    style.display = style.display === "none" ? "inline-block" : "none";
  }
}

BlinkyDancerClass를 작성 하는데는 큰 어려움이 없었지만 집고 넘어 갈 점은 super키워드를 통해 DancerClass의 step함수를 불렀다는 것 이다.

3. psedoclassical code

if (typeof window === "undefined") {
  var jsdom = require("jsdom");
  var { JSDOM } = jsdom;
  var { document } = new JSDOM("").window;
} 

function Dancer(top, left, timeBetweenSteps) {
  this.$node = this.createDancerElement();
  this.timeBetweenSteps = timeBetweenSteps;
  this.step();
  this.setPosition(top, left);
}

Dancer.prototype.createDancerElement = function() {
  let elDancer = document.createElement("span");
  elDancer.className = "dancer";
  return elDancer;
};

Dancer.prototype.step = function() {
  setTimeout(this.step.bind(this), this.timeBetweenSteps);
};

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

if (typeof window === "undefined") {
  module.exports = Dancer;
}