[엘리스 SW 엔지니어 트랙 2기 / TIL] Day 07, 08 - DOM, BOM, Event, jQuery

1. 오늘 공부한 내용  📝

7일차는 강의는 없이 자바스크립트 문제집만 풀어서 따로 새롭게 배우게 된 내용은 없었다. 최근에 코딩테스트를 대비해서 알고리즘 문제를 풀고 있어서 크게 어렵지 않게 금방 풀었다.

 

8일차 이론 강의는 다음과 같은 목차로 진행됐다.

 

1. DOM 복습
2. BOM은 무엇일까?
3. 다양한 이벤트 사용해보기
4. jQuery 알아보기

 

출처: wikipedia

추후에 배울 리액트의 Virtual DOM을 이해하기 위해서는 DOM에 대한 이야기는 꽤 중요하다.

 

그렇다면 DOM은 알겠고, BOM은 무엇일까? 솔직히 BOM이라는 단어는 처음 들어봤다.

수업을 들으면서 느낀건데 그래도 좀 배웠다고 생각했는데 모르는 부분이 너무 많은 것 같다.

 

BOM (Browser Object Model)

• 문서 이외의 모든 것을 제어하기 위해 브라우저가 제공하는 추가 객체

 

그리고 window의 다양한 이벤트들에 대해서 알아봤다.

 

window는 최상위 객체이기 때문에 대부분 생략해도 된다고 한다.

(window.)document.getElementById("abc");

 

window.confirm(), window.close(). window.scroll() 등 다양한 이벤트들이 있다.

https://developer.mozilla.org/ko/docs/Web/API/Window/event

Window.event - Web API | MDN

 

jQuery란?

• JavaScript를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반 라이브러리
  • 요소를 쉽게 찾고 조작이 가능함
  • 각종 브라우저에 대응하는 높은 호환성
  • 네트워크, 애니메이션 등 다양한 기능 제공
  • 다양한 플러그인이 구현되어 있음
  • 수 많은 레퍼런스가 존재

 

위상이 과거같지는 않지만, 아직 알아둘만 하다! 하지만.. 굳이라는 생각이 들긴 한다. (코치님 생각)

(ES6에서 jQuery를 대체할 기본 기능들이 너무 좋아졌기 때문)

실제로 구글 트렌드에서 jQuery의 검색량을 보면 ES6가 출시된 2015년 이후로 우하향 중이다.. 😂

2. 어려웠던 내용  🤯

크게 어려웠던 내용은 없었다 !

3. 궁금한 내용 / 부족했던 내용  🧐

addEventListener의 콜백 함수를 구현 하기 전에 함수 안에 console이나 alert부터 찍고 시작해야 함수가 호출되는지 여부를 알고 나서 시작할 수 있다. 함수 안을 구현하고 나고 실행이 안되면 함수 안의 내용이 잘못됐나 하고 살펴보게 되는데 함수 자체가 호출이 되지 않는 상황일수도 있음!!

 

실습 강의 문제를 풀면서 getElementsByClassName 함수를 썼는데 정상적으로 작동이 되지 않아서 당황했다.

그 이유는 해당 함수가 배열을 받아오기 때문인데, 배열 안에 있는 내용을 받아오기 위해서는 [0]과 같이 인덱스를 붙여줘야 하는데 이 부분을 생각을 못해서 왜 안되지? 하고 오타만 찾고 있었다.. 항상 중간 중간에 콘솔 로그 찍는 습관을 기르는게 좋을 것 같다.

4. 느낀 점 🤔

웹의 세계는 넓고도 넓다.
그리고 지금은 이게 무슨 내용이야? 하고 이걸 왜 배워야 되지? 하는 내용들이 나중에 다 합쳐져서 언젠가는 꼭 도움이 된다.