TIL - 007 [JS] BeesBeesBees

kimjinsub1217·2021년 4월 12일
0

TIL

목록 보기
7/8
post-thumbnail

20201년 04월 12일 날씨: ☁️ (흐림)

오늘은 코드스테이츠에서 페어 프로그래밍 스프린트 과제 BeesBeesBees에 대해 블로그에 적어볼까 합니다.

📌 문제

과제 내용은 가장 고귀한 곤충인 꿀벌은, 일생동안 특정 발달 단계를 하나하나 거칩니다.

각 단계에는 꿀벌이 갖는 고유한 특징과 작동이 있습니다. 이 repository에는 다양한 종류의 꿀벌 Class가

존재합니다. 각 단계별로 꿀벌 Class가 있고, 이를 통해 ES5(pseudoclassical) 패턴 및 ES6 class

keyword를 이용한 상속을 배우게 됩니다. 라고 나와있습니다.

pseudoclassical와 es6에 대해 상속에 대해 문제이고 결과값은 둘다 같으나 키워드나 다른거 같아보였습니다.

코드스테이츠 repository에서 git clone해서 제 컴퓨터로 가져와 살펴봤습니다.

es6폴더와 pseudoclassical폴더안에 Bee.js, ForagerBee.js, Grub.js, HoneyMakerBee.js 각각 들어있었고 총 8문제 였습니다.

Grub

Create a Grub class, in ES6 style, with:
an age property that is set to 0
a color property that is set to pink
a food property that is set to jelly
an eat method that returns 'Mmmmmmmmm jelly'

Bee

Create a Bee class, in ES6 style, with:
the Grub superclass
an age property that is set to 5
a color property that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a job property that is set to Keep on growing

HoneyMakerBee

Create a HoneyMakerBee class, in ES6 style, with:
the Bee superclass
an age property that is set to 10
a job property that is set to make honey
a color property inherited from bee that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a honeyPot property that is set to 0
a makeHoney method that adds 1 to that honeyBee's honeyPot
a giveHoney method that subtracts 1 from that honeyBee's honeyPot

ForagerBee

Create a ForagerBee class, in ES6 style, with:
the Bee superclass
an age property that is set to 10
a job property that is set to find pollen
a color property inherited from bee that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a canFly property that is set true
a treasureChest property that is set to an empty array []
a forage method that allows the bee to add a treasure to the treasureChest

📌 ES6

1.Grub.js

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

module.exports = Grub;

먼저 첫번째 문제는 ES6 스타일로 Grub 클래스를 만들어 주는 거 였습니다.

an age property that is set to 0
a color property that is set to pink
a food property that is set to jelly
an eat method that returns 'Mmmmmmmmm jelly'

어렵지 않게 생성자(constructor)함수를 만들고 객체 age, color, food를 만들어줬습니다.
그리고 요구조건에 맞게this 키워드를 사용해 초기화를 해주고 eat()메소드를 만들어 'Mmmmmmmmm jelly'를 리턴해줬습니다.

2. Bee

const Grub = require('./Grub');

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

}

module.exports = Bee;

ES6 스타일로 Bee 클래스를 만듭니다.슈퍼 클래스는 Grub입니다.
an age property that is set to 5
a color property that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a job property that is set to Keep on growing

node.js에서는 모듈을 불러오기 위해 require()함수를 쓴다고 합니다. 그래서 Grub 클래스를 만들어 놓은걸 불러오기 위해 const Grub = require('./Grub') 로 코드를 쳐 Grub을 불러왔습니다.

그리고나서 Grub의 상속을 받기 위해 extends키워드를 사용해 class Bee extends Grub으로 코드를 쳤습니다.

Grub클래스와 동일하게 생성자(constructor)함수를 만들어 age, color, food 객체를 만들고
서브(자식) 클래스에서 상위 클래스를 호출할 때 사용하는 super 키워드를 사용해 Grub 클래스를 호출 후
this 키워드를 사용해 값을 넣어 줬습니다. Grub 클래스와느 다르게 job이 추가가 되었고 Keep on growing'을 넣어줬습니다.

3.ForagerBee

const Bee = require('./Bee');

class ForagerBee extends Bee {
  // TODO..
  constructor(){
  super();
  this.age = 10;
  this.job ='find pollen'
  this.canFly =true;
  this.treasureChest=[];

  }
  forage(treasure){
    this.treasureChest.push(treasure);
  }
}

module.exports = ForagerBee;

ES6 스타일로 ForagerBee 클래스를 만듭니다.슈퍼 클래스는 Bee입니다.
an age property that is set to 10
a job property that is set to find pollen
a color property inherited from bee that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a canFly property that is set true
a treasureChest property that is set to an empty array []
a forage method that allows the bee to add a treasure to the treasureChest
Bee클래스와 동일하게

이번에는 Bee가 슈퍼클래스여서 requie를 이용해서 Bee를 가져옵니다.
그리고 Bee에서 상속을 받아야 하기 때문에 ForagerBee extends Bee 해주고
constructor(),super() 해주고 this 키워드를 이용해 요구조건에 맞게 값을 넣어주고
forage 메소드에 빈배열 treasureChest안에 treasure값을 push 해주었습니다.

4.HoneyMakerBee

const Bee = require('./Bee');

class HoneyMakerBee extends Bee {
  // TODO..
  constructor(){
    super();
    this.age = 10;
    this.job = 'make honey'
    this.honeyPot =0;


  }
  makeHoney(){
    this.honeyPot+=1
  }

  giveHoney(){
    this.honeyPot-=1
  }


}

module.exports = HoneyMakerBee;

ES6 스타일로 HoneyMakerBee 클래스를 만듭니다.Bee 슈퍼 클래스
an age property that is set to 10
a job property that is set to make honey
a color property inherited from bee that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a honeyPot property that is set to 0
a makeHoney method that adds 1 to that honeyBee's honeyPot
a giveHoney method that subtracts 1 from that honeyBee's honeyPot

이 문제는 전 문제를 다 풀었으면 쉽게 풀 수 있었던 문제였습니다. 똑같이 requie를 이용해서 Bee를 가져오고 Bee를 상속 받아야 하기 때문에 extends 키워드로 상속을 받았습니다.
그리고 똑같이 constructor(),super() 해주고 this 키워드를 이용해 요구조건에 맞게 값을 넣어주고

makeHoney(), giveHoney() 메소드를 만들어 honeyPot에 0이 들어있는데 두 메소드를 이용해 값을 1 증가하고 1 감소하는 역할을 하는 메소드 입니다.

📌 pseudoclassical

1.Grub.js

var Grub = function () {
    this.age = 0;
    this.color ='pink';
    this.food = 'jelly'
};

Grub.prototype.eat = function(){
    return 'Mmmmmmmmm jelly';
}

module.exports = Grub;

먼저 첫번째 문제는 pseudoclassical 스타일로 Grub 클래스를 만들어 주는 거 였습니다.

an age property that is set to 0
a color property that is set to pink
a food property that is set to jelly
an eat method that returns 'Mmmmmmmmm jelly'

ES6와는 다른점은 함수안에서 this 키워드로 값을 초기화 해주고 prototype키워드로 Grub과 연결해 eat 메소드를 만들었습니다.

2. Bee

var Grub = require('./Grub');

var Bee = function () {
    Grub.call(this);
    this.age =5;
    this.color = 'yellow';
    this.job ='Keep on growing';
};

Bee.prototype = Object.create(Grub.prototype);
Bee.prototype.constructor = Bee;


module.exports = Bee;

pseudoclassical 스타일로 Bee 클래스를 만듭니다.슈퍼 클래스는 Grub입니다.
an age property that is set to 5
a color property that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a job property that is set to Keep on growing

ES6와 다른점은 call 키워드와 Object.create를 사용해 문제를 풀었습니다.

3.ForagerBee

var Bee = require('./Bee');

var ForagerBee = function () {
    Bee.call(this);
    this.age = 10;
    this.job ='find pollen'
    this.canFly =true;
    this.treasureChest=[];

};

ForagerBee.prototype = Object.create(Bee.prototype);
ForagerBee.prototype.constructor = ForagerBee;
ForagerBee.prototype.forage =function(treasure){
    this.treasureChest.push(treasure);
}

module.exports = ForagerBee;

pseudoclassical 스타일로 ForagerBee 클래스를 만듭니다.슈퍼 클래스는 Bee입니다.
an age property that is set to 10
a job property that is set to find pollen
a color property inherited from bee that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a canFly property that is set true
a treasureChest property that is set to an empty array []
a forage method that allows the bee to add a treasure to the treasureChest
Bee클래스와 동일하게

이 문제도 call 키워드와 Object.create 키워드 prototype키워드를 사용해 문제를 풀었습니다.
forage 메소드에 prototype로 연결해주고 treasure를 push 해 주었습니다.

4.HoneyMakerBee

var Bee = require('./Bee');

var HoneyMakerBee = function () {
    Bee.call(this);
    this.age = 10;
    this.job = 'make honey'
    this.honeyPot =0;
};

HoneyMakerBee.prototype = Object.create(Bee.prototype);
HoneyMakerBee.prototype.constructor = HoneyMakerBee;
HoneyMakerBee.prototype.makeHoney =function(){
    this.honeyPot+=1
}
HoneyMakerBee.prototype.giveHoney =function(){
    this.honeyPot-=1
}

module.exports = HoneyMakerBee;


module.exports = HoneyMakerBee;

pseudoclassical 스타일로 HoneyMakerBee 클래스를 만듭니다.Bee 슈퍼 클래스
an age property that is set to 10
a job property that is set to make honey
a color property inherited from bee that is set to yellow
a food property that is inherited from grub
an eat method that is inherited from grub
a honeyPot property that is set to 0
a makeHoney method that adds 1 to that honeyBee's honeyPot
a giveHoney method that subtracts 1 from that honeyBee's honeyPot

이 문제도 위에 문제를 풀었으면 쉽게 풀 수 있는 문제입니다.

📌Today Review

오늘은 코드스테이츠 스프린트 과제 BeesBeesBees를 페어 프로그래밍을 하여 상속에 대하여 공부를 하였습니다.

pseudoclassical과 ES6 상속을 비교하며 페어분과 함께 문제를 풀기 전 이론에서 어렵게만 느껴져서 쉽지 않게구나 하고 겁을 먹었지만 막상 문제를 푸니 생각보다 쉬워서 뭔가 허무? 괜히 긴장 했었던거 같습니다.

솔직히 pseudoclassical가 저에게 어려웠지만 ES6와 비교하면서 동작하는 원리를 파악하니 문제를 풀면서 이해가 가기 시작했습니다.
역시 저는 직접 부딪혀 코드를 쳐보고 문제를 풀어봐야 머리에서 이해가 가기 시작하나 봅니다.

profile
개발자가 되고 싶어요 ⌒ ‿ ⌒ 

관심 있을 만한 포스트

0개의 댓글