IMMERSIVE

ES6 Class & 상속 with 6ees6ees6ees

Bee

Bees - get ready to learn some science, and ES6

벌들은 여러 특정한 성장기를 거쳐 살아갑니다. 각각의 성장기마다 고유한 특징 및 행동을 하게 되죠. 여러분들은 이러한 꿀벌의 성장기를 ES6의 class 문법으로 작성함으로 상속을 통한 super class와 child class의 관계에 대해서 배우게 될 것입니다.

Class Structure

├── Grub
│   └── Bee
│       ├── HoneyMakerBee
│       └── ForagerBee
│          └── RetiredForagerBee

위 도식에서 살펴볼 수 있듯이 모든 꿀벌들은 유충(Grub)에서부터 시작합니다. 유충이 자라 벌이 되고, 벌은 새로운 특징을 얻게 되고 특정한 임무와 역할을 부여받게 됩니다. 한편으로 이 말은 위의(상위) class(Grub)로부터 특징을 부여받았다는 뜻입니다 (그리고 현 class에서 특징이 변경 및 추가가 될수도 있겠죠).

Resources

Bare minimum requirements

Bower

  • 해당 경로에서 bower install 을 하시면 bower.json이 자동으로 client/bower_components들을 설치하게 됩니다.
  • bower를 사용하기 위해서 설치가 필요하다면 npm install -g bower을 통해서 설치하시면 됩니다. (-g는 global flag로, 어느 경로에서든지 bower를 사용할 수 있게 해줍니다)

ES6

The ECMAScript 2015(또는 6로 간추려서 ES6)은 2015년 6월에 발표된 6번째의 ECMAScript(에크마스크립트) 기준로 공식적인(공통된) 자바스크립트 기준표라고 볼 수있습니다.

ES6는 이전 버전과 달리 엄청나게 많은 기능이 추가되었습니다. 그렇지만 이전 자바스크립트 버전들과 호환성 문제가 아직도 많이 남아있습니다. Chrome같은 최신 브라우저도 ES6문법을 전부 호환하지 못하고 있습니다. 그럼에도 ES6 문법을 이전 버전들로 자동으로 변경해주고 하는 기능들이 있기 때문에 ES6로 작성이 가능하며, 점차적으로 브라우저가 호환문제를 해결함에 따라 ES6문법에 익숙해져가는 과도기에 있다고 보시면 되겠습니다.

ES6의 기능 중 특별한 기능은 오늘 배울 class입니다! OOP(Object-Oriented Programming)의 형태로 코드를 작성하고 싶은 사람들에게는 큰 이슈입니다. 왜냐하면 이 class방식은 더 전통적인 (Java와 같은) 언어가 사용하는 방식이기 때문입니다. 물론 JavaScript의 언어구조가 바뀐것은 아닙니다. 단지 이전 과정에서 배운 pseudoclassical 패턴 위에 class처럼 보이게 만든 것 뿐입니다. 본 과정을 통해 subclassing을 더 쉽게 형성하게 해주고 extends라는 키워드를 사용하는 class문법을 배우게 될 것입니다.

Subclassing

먼저 Grub.js를 class문법으로 작성해주세요. Grub는 다른 벌들의(class들의) superclass(상위 클래스)가 될 것입니다. 아래 순서대로 문제를 해결하면서 bower.json이 있는 해당 경로에서 npm test를 실행함으로 **test/**폴더 안에 있는 spec들을 하나 하나 통과하셔야 합니다.

Things To Note:

  • 본 과제는 class, extends, 그리고 super 라는 키워드로 형성된 클레스 문법으로 문제를 풀어야 합니다.
  • 테스트의 통과여부는 하나씩 차례대로 풀어나가면서 알 수 있습니다. npm test를 통해 주어진 문제를 하나하나 풀어나가길 바랍니다.

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

RetiredForagerBee

  • Create a RetiredForagerBee class, in ES6 style, with:
    • the ForagerBee superclass
    • an age property that is set to 40
    • a job property that is set to gamble
    • a canFly property that is set to false
    • a color property that is set to grey
    • a forage method that returns I am too old, let me play cards instead
    • a food property that is inherited from grub
    • an eat method that is inherited from grub
    • a treasureChest property inherited from ForagerBee that is set to an empty array []
    • an always winning gamble method that allows the bee to add a treasure to the treasureChest

Resources