10월 30일 (금)

🌻 I wanna go to a dance party.

---

오늘 한 일

• Subclass Dance Party 과제 완료
  • 다형성(polymorphism)의 특징을 코드로 직접 구현하였고, DOM과 CSS를 연습할 수 있었다.

• lineUp() 메소드를 통해 Dancer instance들의 위치를 일렬로 만들어 줄을 세웠다. (CSS 속성을 DOM으로 조작했다)

• Toy Problem 1 문제 풀이
  • 재귀 함수를 통해 모든 경우를 완전 탐색 하여 문제를 해결했다.

---

느낀 점

• 페어 분과 미래에 대한 깊이 있는 이야기를 많이 나눴다. 서로 좋은 정보도 공유했다. 서로가 생산적이고 건설적인 이야기라며 신이 나서 떠들었다. 이런 얘기는 정말 재밌는 것 같다. 이런 얘기를 나눌 수 있는 페어가 있어서 좋다.

• 과제를 수행하면서 도무지 댄서들이 깜빡이지 않아서 정말 angry, irritation 하고 upset 했다. 그런데 역시 등잔 밑이 어두웠다. 깜빡이는 효과를 나타내는 step() 메소드 안에 문제가 있었다. 그것은 다름 아닌 setTimeout...

  • setTimeout은 시간 지연을 일으킨 후 함수를 비동기적으로 실행하게 하는 함수인데, 명시적으로 항상 window 객체를 this 바인딩하는 특징이 있다는 사실을 까맣게 잊고 있었던 것이다.

• 이 문제를 해결하기 위해 bind를 이용해 this 값을 넘겨주었다. 화살표 함수로도 가능하다. 다음부터 조심하자 this...!!!

setTimeout(this.step.bind(this), this.timeBetweenSteps);

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

• Toy Problem 1에서도 엄청난 인사이트를 얻었다. 함수 밖에서 만든 배열(arr)을 재귀 함수 안에서 수정하며 새로운 배열(newArr)에 계속 push하고 마지막에 새로운 배열(newArr)을 리턴하는 형태의 코드를 작성했다. 리턴된 새로운 배열(newArr)에는 마지막에 push된 배열(arr)만 온통 들어있었다. 다시 생각해보니 참으로 어처구니 없는 실수였다. 쉽게 말해, 내 실수는 아래의 사진과 같다고 볼 수 있었다.
  

자, 사진을 보면 func() 함수에서 newArr에 arr을 push한다. 그리고 arr의 맨 뒤에서 4를 하나 pop하고, 5를 push한다. 그리고 newArr을 return하면? 난 [1, 2, 3, 4]를 기대하고 있었던 것이다. 참으로 foolish 하다.

arr에는 메모리 상 어딘가에 있을 [1, 2, 3, 4]의 주소값(위치)이 담겨있다. arr에는 [1, 2, 3, 4]가 담겨 있는 것이 아니다! arr은 원시 타입 변수가 아니다! 그렇다면 pop()과 push(5)를 한 후에도 arr에 담겨 있는 주소값을 따라가봤을 때 그곳에 있는 배열, 즉 [1, 2, 3, 4] 안의 값은 [1, 2, 3, 5]로 바뀌었지만 arr이 담고 있는 그 배열의 주소값은 동일하다. 바뀌지 않았다!

결국, newArr[0]에도 주소값이 담기는 것이고, newArr[0]에는 arr이라는 값이 있고, arr에 담긴 값을 따라가보면 [1, 2, 3, 5]라는 배열이 존재하는 것이다!

만약 pop()과 push(5) 대신에 arr = [1, 2, 3, 5] 라고 하고 answer을 확인하면 [1, 2, 3, 4]가 나올 것이다. 분명 알고 있었던 내용인데 머리를 쎄게 한 대 맞은 기분이었다. 그래서 arr을 그냥 push 하지 않고, Spread Syntex를 통해 const copyArr = [...arr]이라는 새로운 배열을 만들어 push 하는 형태로 코드를 수정하여 문제를 해결했다. 이번 일을 계기로 좀 더 확실하게 참조 타입(Reference Type) 변수에 대해 이해할 수 있었고, 인지할 수 있었다.

---

내일 할 일

• Data Structure 복습 및 블로깅
• OOP(Object Oriented Programming) 복습 및 블로깅