[지하철 노선도 미션] 백진수 미션 제출합니다.

[junsubaek]

3차 과제를 진행하며 배운 점

1. 클래스 간의 상속

각 페이지마다 공통적으로 사용되는 메서드들이 반복적으로 사용되어 모듈화가 필요하다고 생각했습니다. 이로 인해 extends에 대해 공부할 수 있었고, 상속을 통해 클래스를 다른 클래스의 자식으로 만들수 있다는 것을 알 수 있었습니다. 또한 파생 클래스에서 super()가 먼저 호출되어야 this를 사용할 수 있고, 사용하지 않을 시 참조 오류가 발생한다는 사실을 배울 수 있었습니다.

2. 디폴트 파라미터

초기값을 설정하지 않아 undfined 값으로 인해 오류가 발생했습니다. 이를 해결하기 위해 디폴트 파라미터를 사용하였습니다. 하지만 이외의 다른 부분에서도 동일한 문제점이 발생했고, 디폴트 파라미터를 이용하여 계속해서 해결하다 보니 방어적인 로직이 많아졌습니다. 이를 통해 초기값의 설정이 중요함과 디폴트 파라미터를 통해 초기값을 정해 줄 수 있다는 것을 배울 수 있었습니다.

3. 커스텀 이벤트

이번 과정을 수행하면서 커스텀 이벤트라는 것에 대해 배울 수 있었습니다. 기존에는 addEventListener가 제공하는 이벤트만 사용할 수 있는 줄 알았지만, 커스텀 이벤트를 통해 자신이 원하는 이벤트를 만들고, 그것을 dispatchEvent를 통해 원하는 객체에 보내면 이벤트를 발생시킬 수 있는 것을 알게 되었습니다. 이 방법을 통해 상태를 변경시킬 때마다 이벤트를 발생시켜 화면을 다시 그릴 수 있게 하였습니다.

4. 옵셔널 체이닝

객체가 깊어지면서 어느 부분의 값이 null 또는 undefined 인지 확인하기가 너무 복잡해졌습니다. 이를 해결하기 위한 방법으로 옵셔널 체이닝이라는 것을 알게 되었고, 공부해 볼 수 있었습니다. 이 방법을 통해서 연결된 객체의 값에 접근을 더 수월하게 할 수 있었습니다.

5. 깊은 복사

스프레드 연산자를 통해 데이터를 복사해 상태를 변경시키는 과정에서 계속해서 오류가 났습니다. 이유는 깊이가 2인 객체라는 것을 인지하지 못했다는 것 입니다. 깊은 복사에 대해 찾아보다가 JSON객체를 이용한 방법을 발견할 수 있었고, 문제를 해결할 수 있었습니다. 하지만 date나 함수, undefined, regexp, infinity가 객체 내에 존재할 경우에는 원하는 결과를 주지 못하고, 프로토타입 객체는 숨겨져 있기 때문에 올바르게 복사가 되지 않을 수 있다는 것을 배울 수 있었습니다.

6. 로컬스토리지 && data

자바스크립트를 공부하면서 처음 만들었던 것이 투두리스트였고, 그것을 만들어 보면서 로컬스토리지를 사용해 볼 수 있었습니다. 하지만 이번 과제를 통해 다시 사용해야 될 상황이 왔을 때, 어떻게 사용했는지 기억이 나질 않았습니다. 또한 드럼킷을 만들어 보면서 데이터 속성을 사용해봤지만 이것 또한 잘 기억이 나지 않았습니다. 개발은 반복을 통해 자신의 실력을 쌓는다고 하는데, 짧은 기간동안 지식을 최대한 넓히려는데에만 혈안이 되어새로운 것에만 몰두 했던 것 같아 스스로 부끄러움을 느꼈습니다. 이번 과제를 통해 다시 한번 복습을 할 수 있었고, 반복을 통한 학습의 중요성을 다시 한번 깨달을 수 있었습니다.