이퀄라이저 기능 추가 회고

발생한 문제:

피드백 기능을 추가하는 과정에서 이퀄라이저가 보이지 않는 문제가 발생했다.

 

문제 해결 과정에서 내 개발 지식의 여러 빈틈을 발견했다.

 

 

부족했던 점들:

• 버전 관리 및 소통 미숙
  • git을 제대로 활용하지 못해 코드 변경사항을 제대로 추적하지 못함
  • 이전 코드와의 비교가 어려워 문제 해결이 지연됨
  • 영향을 준 변경 부분을 특정하지 못해 HTML, CSS, JS 모두를 검토하게 됨.
• 문제 원인 예단
  • CSS 복구했는데 작동하지 않자 JS 쪽 문제라고 섣불리 판단
  • DOM 참조방식 관련 코드를 집중적으로 들여다봄
  • CSS 클래스과 속성 그리고 HTML의 계층 구조에 대해 살펴볼 생각을 못함
  • 기본적인 HTML, CSS 구조 확인을 뒤로 미룸
• 웹 기초 개념 부족
  • HTML 요소들의 계층 구조가 CSS 선택자에 미치는 영향을 이해하지 못함
  • DOM 참조 방식(직접 참조 vs 객체 저장)의 차이점을 몰랐음
  • CSS 선택자가 DOM 구조에 따라 다르게 작동한다는 점을 간과
• 코드 흐름 이해 부족
  • 음성인식 기능의 전체 흐름을 알되 개별 세부 작동 로직을 이해하지 못함
  • Click → toggleVoiceRecognition → startListening → setupAudioRecording → setupVolumeMonitoring
  • 각 단계가 어떻게 연결되는지 이해하지 못해 디버깅이 어려웠음

 

배운 점과 다짐:

• 코드가 변경됐을 때 소통하고, git으로 추적할 것
• 문제 발생 시 기본부터 차근차근 확인하기
• HTML, CSS, DOM의 기초 개념 다지기
• 코드의 전체 흐름을 먼저 이해하고 수정하기