지난주 금요일부터 시작한 과제 Subclassdanceparty! 어떤 것인가 설명하자면 버튼을 누르면 무작위의 위치에 점이 깜빡이는 것이다. 일단 이 모든 것은 상속으로 구현 되어있는데, 기본적으로 functional 형태의 코드로 구현되어 있다. 우리는 이것을 pseudoclassical과 class 이 두 가지 방법으로 리팩토링을 해야한다. 상속을 알게된지 고작 며칠만에 하려니 정말 머리가 아팠다. 감이 오지 않았다. 그러나 검색신공으로 코드스테이츠 선배님들의 코드를 참고할 수 있었다. 코드를 직접 써보고 하니 조금 익숙해져서 두 가지 방법으로 구현 하는건 오래 걸리지 않았다.
이번 과제의 주 목적은 위의 것이 아니다. 우리는 상속을 이용하여 캡슐화, 다형성, 추상화 이 모두를 시도해 보는것이다. 객체지향 프로그래밍의 종합세트이다. 아무리 생각해도 코드스테이츠는 대단하다...
여러가지 이런저런 시도를 해 보면서 몇가지 배운 것을 써 보겠다.
- 움직이는 요소 만들기.
깜빡이는 요소가 구현 되어 있기애 움직는 건 별로 어렵지 않을 것이라 생각했다. 태그로 들어갈 style 속성의 left/ top의 픽셀을 더하거나 빼면 움직일 것이라 생각했는데 생각한대로 잘 되지 않았다. 정말 여러가지 자료들을 찾아보고 주말 내내 고민을 해봐도 되지 않았다. 상속의 환경에서 과연 어떻게 해야 할까?
if (typeof window === 'undefined') {
global.DancerClass = require('./DancerClass');
}
class MovingToDownDancerClass extends DancerClass {
step() {
super.step();
let style = this.$node.style;
console.log(style.top)
}
}
if (typeof window === 'undefined') {
module.exports = MovingToDownDancerClass;
}먼저 있던 깜빡이는 애를 이용해 위의 코드로 style top을 이용해 좌표를 수정할 수 있는지 여부를 따져 보았다.
보이는 듯이 좌표는 점이 만들어진 후에도 유효하단 걸 알 수 있었고. 여러가지 시도를 끝에 성공을 하였다.
class MovingToDownDancerClass extends DancerClass {
step() {
super.step();
let style = this.$node.style;
Object.assign(style, {color: `white`})
if (this.top < document.body.clientHeight - 50) {
this.top += 10;
style.top = `${this.top}px`;
}
}
}일단 부모 생성자 함수인 DancerClass에서 인스턴스의 속성으로 들어가는 top을 가져와 거기에 +10을 할당하고, DancerClass에서 setTimeout을 이용해 step()을 무한정 호출하게 만들었다. 그러면 한번 호출될 때마다 top은 10px씩 늘어나 결국엔 움직이는 것 처럼 구현할 수 있다.
그리고 조건문을 써준 이유는 범위를 지정하기 위해서이다. 범위를 정해주지 않으면 스크롤바가 생기면서 무한정 밑으로 내려가기 때문이다.
- 자바스크립트와 DOM을 이용해 span태그에 img태그를 달기.
(gif출처: https://oztv.tistory.com/37무료배포 감사합니다.)
DancerClass에 이미 span태그로 $node에 할당 되어있고 이 span태그는 body태그의 자식으로 달리는데 span태그로 이미지를 넣을수 없어서 img태그를 이용 해야했다. 그러나 문제는 다른 종류의 패턴의 댄서를 생성하는 코드와 이미 상속되어 있어서 Dancer를 건드릴 수 없었다. 그래서 span에 img태그를 자식으로 달아주어 가능하게 하였다.
class MovingToRightDancerClass extends DancerClass {
constructor(top, left, timeBetweenSteps) {
super(top, left, timeBetweenSteps)
this.addImg();
}
step() {
super.step();
let style = this.$node.style;
style.color = 'rgba(0,0,0,0)' // span태그의 색을 투명하게
if (this.left < document.body.clientWidth - 300) {
this.left += 10;
style.left = `${this.left}px`;
} else {
style.display = 'none'
}
}
addImg () {
let newImg = document.createElement('img');
newImg.setAttribute('src', './src/class/img/img-unscreen.gif');
newImg.setAttribute('width', '200');
newImg.setAttribute('height', '200');
this.$node.appendChild(newImg);
}상속받은 자식 생성자 함수에서 Img 태그를 생성하고 이미지를 할당한 다음 setAttribue를 통해 이미지의 크기 속성을 부여 해주어 크기를 조정해 주었다. 그리고 그것을 실행 시키도록 하였다. 그리고 rgba의 alpha를 0으로 주어 span을 투명색으로 만들어 없애주었다. 만약 이 과정이 없다면 밑의 그림처럼 나올 것이다.
- 무작위 색상을 생성하는 코드.
이번 스프린트를 같이 진행하였던 팀원분께서 가르쳐주신 코드이다.
class BlinkyDancerClass extends DancerClass {
step() {
super.step();
let style = this.$node.style;
console.log(style.top)
if (style.color.length === 0) {
let colorCode = "#" + Math.round(Math.random() * 0xffffff).toString(16); // 랜덤 색상코드 생성
style.color = colorCode;
}
style.display = style.display === 'none' ? 'inline-block' : 'none';
}
}랜덤으로 색상을 부여하는 코드이다. 무작위 색상을 16진수의 코드로 생성하여 태그의 속성에 부여해 주었다. color.length의 조건문을 써준 이유는 저렇게 하지 않으면 step이 호출 될 때마다 색상이 변하기 때문이다.
이것 또한 이쁘긴하다.
이렇게 상속을 통하여 여러가지 실험을 할 수 있었다. 여기서 느낀점은 객체지향 프로그래밍은 코딩을 더욱 유현하고 더욱 폭 넓게 할 수 있게 해준다는 것이었다. 만약 내가 절차지향적인 프로그래밍으로 이 과정을 했다면 정말 아찔 했을것 같다. 그리고 객체지향 프로그래밍은 실수를 한다거나 수정이 필요하다면 케익위의 잘못 발려진 생크림을 덜어내듯 큰 부담이 없다.
그만큼 개발자에게 필수인듯하다. 꾸준히 공부하자.
