코드스테이츠에 들어온 이후에 처음으로 늦잠을 잤다. dance-party 스프린트를 하면서 this에 대한 이해가 너무 어려워서 새벽까지 붙잡고 있던 게 화근이 되었다. 몸살이 나서 두뇌 회전이 잘 되지 않고 계속해서 막히는 의지도 저하되고 자신감도 많이 떨어진다. 그래서 두시 이후까지 공부를 하는 건 일단 접어두는 것이 맞다고 판단했다.
어려운 스프린트를 진행하고 나니 이런 생각이 들었다.
안된다고 끝까지 붙들고 있으면 더 안되더라.
막혀서 조급해하지말고 너무 안된다 싶을 땐 주위를 환기해주는 것도 아주 좋은 방법인 것 같다.
한 시간이나 두 시간에 5분에서 10분씩은 쉬면서 생각을 정리하는 시간을 가져야겠다.
Subclass Dance Party
Dance Party가 아니라 완전 Hell Party였다. 웹 페이지 상에서 특정한 도형을 랜덤한 위치에서 깜빡이게 해주는 스프린트인데 이 깜빡이게 해주는 방법을 이해하는데 상당한 시간이 소요되었다.
Dancer라는 class를 생성해주고
BlinkyDancer라는 자식 class가 있고
BlinkyDancer로 newDancer 인스턴스를 만들었다고 가정해보자
let newDancer = new BlinkyDancer()Dancer에는 step() 메소드가 존재하는데
step() {
setTimeout(func, randomNumber)
}랜덤한 지연시간을 거쳐 func를 실행시켜주는 메소드이다.
그리고 BlinkyDancer에는 stepBystep()이라는 메소드를 추가해보자
stepBystep() {
let style = this.$node.style; // this.$node는 웹페이지에 생성된 특정한 도형이다
style.display = style.display === 'none' ? 'inline-block' : 'none';
// display를 'inline-block'과 'none'을 번갈아가면서 깜빡이게 해줄 수 있다
}그럼 메소드를 처음 실행시켰을 때 계속 display를 'inline-block'과 'none'을 왔다 갔다 하려면
어떻게 해주어야 할까?
BlinkyDancer는 Dancer의 자식 class 이므로 Dancer의 step() 메소드도 포함하고 있다. 앞서 말했 듯 step()은 일정 시간이 지난 후 지정해준 '함수'를 실행 시킨다. 그럼 step()에서 stepBystep()을 실행시키고 stepBystep()에서 step()을 실행시켜주면 step()메소드를 딱 한 번 실행시킨 것으로 특정 도형이 계속해서 깜빡이게 해줄 수 있다.
//BlinkyDancer
step() {
setTimeout(this.stepBystep, randomNumber) // BlinkyDancer의 stepBystep()이 실행된다
}
//BlinkyDancer
stepBystep() {
// 부모 클래스인 Dancer의 step()이 실행된다
super.step() // super는 부모 클래스의 데이터를 상속받아 사용할 수 있게끔 해주는 키워드이다
let style = this.$node.style;
style.display = style.display === 'none' ? 'inline-block' : 'none';
}
//Dancer
step() {
setTimeout(this.stepBystep, randomNumber) // Dancer의 stepBystep이 실행된다???
}그런데 여기서 한 가지 오류가 발생한다.
부모 class인 Dancer로 넘어와서 step()을 실행시킨다면 this의 정의가 달라진다.
this는 실행시킬 때마다 정의된 값이 변하는 맥락을 읽어야하는 친구인데
Dancer에서 실행시켰으니 this는? 당연히 Dancer가 된다.
그럼 오류를 해결할 방법은 어떤게 있을까?
바로 bind이다.
bind는 실행되는 함수의 this값을 원하는 객체로 고정시키는 새로운 함수를 만들어낸다.
//BlinkyDancer
step() {
setTimeout(this.stepBystep.bind(this), randomNumber)
// bind로 stepBystep이 실행될 때 this를 고정시킨다
// 여기서 this는 BlinkyDancer
}
//BlinkyDancer
stepBystep() {
super.step() // BlinkyDancer에서 step을 실행시키면
let style = this.$node.style;
style.display = style.display === 'none' ? 'inline-block' : 'none';
}
//Dancer
step() {
setTimeout(this.stepBystep.bind(this), randomNumber)
// Dancer에서 step이 실행되어도 this는 BlinkyDancer로 고정된다
// 그러면 다시 BlinkyDancer의 stepBystep으로 넘어간다
}
//BlinkyDancer
stepBystep() {
super.step() // 다시 Dancer의 step이 실행된다
let style = this.$node.style;
style.display = style.display === 'none' ? 'inline-block' : 'none';
}
.
.
.
//반복그러뭍기
도형을 이리저리
transform: 원하는 방법대로 바꿔주기
transition-duration: 애니메이션 주기
코드 복구하기
열심히 작성한 코드가 전부 날라가서 복구하는 방법을 찾아봤다
git reflog: 이전에 커밋한 기록의 목록을 가져온다
git checkout -b HEAD@{숫자}: 원하는 브랜치로 복구한다
