JavaScript | DOM

Intro 🌼

• JavaScript 공부를 다시 시작하고 있습니다. "React를 잘하기 위해서는 JavaScript를 잘 다루어야 한다." 라고들 하죠. 당연한 이야기인데 주니어 개발자가에게는 현실적으로 힘든 부분이 많이 있어요. 당장 React로 프로젝트를 진행하다보면, 중용한 기본개념들은 잊은채, 코딩만 하고 있는 제 자신을 발견할 수 있어요. 인턴쉽을 끝나고, 제가 그랬지 않나 싶어요. 그래서 처음부터 다시 JavaScript 공부를 다시 시작했답니다. 그런데, 참 신기한거는 React를 해서 그런지, JavaScript를 공부할 때, 이해가 되지 않았던 개념들이 뇌리에 빡빡 꽃히는 느낌이듭니다. 자만심이 아니라, 제 스스로 조금 발전하겠구나 하는 생각도 들어요.
  근데, JavaScript는 즉, 바닐라 JavaScript는 정말 매력적이에요. 조만간 게임을 만들 예정인데, 관련 글도 올리도록 하겠습니다.

DOM (Document Object Model) ‼️

• JavaScript를 공부할 때, 사실 Window, DOM, BOM 에 대한 깊이 있는 고민을 하지 않았던 것 같아요.
  JavaScript는 객체지향 언어이다
  를 단순히 언어적으로만 이해를 했던 것 같아요. 근데, DOM에 대해서 조금씩 이해를 하다보니, 아! 왜 객체지향언어라고 하는지 이해가 됩니다.

• 브라우저에서 HTML을 불러오게 되면, HTML의 하나하나 있는 코드들을 컴퓨터가 이해할 수 있는 언어? 로 변경을 해줘요. 그게, Node라고 해요. 그래서 컴퓨터는 우리가 작성한 코드를 이해할 수 있는데, Node가 하나의 객체인거에요. 이렇게 말을 하면 참 어려운데, 자바스크립트를 쓸 때 아래 코드처럼 일반적으로 이렇게들 많이 쓰죠. 여기서 말하는 document는 window 안에 있는 객체에요. 또 여기서 말하는 window는 웹브라우저에 나타는 전체? 라고 할 수 있어요. 즉 객체 안에 객체 또 객체 이렇게 된다고 생각하면 되요. 쉽게 이해하려면, 카테고리의 집합 이라고 말을 할 수도 있는데... 그것보다는 좀 더 복잡한... 참 말로 하기 힘드네요. 조금 더 이야기를 해보면, Node는 EventTarget상속해요, 즉 Node는 EventTarget에 있는 메서드를 사용할 수 있는데, 여기에는 우리에게 익숙한 addEventListener, removeEventListener, dispatchEvent가 있답니다. 다시말해서 EventTarget에서 Node로 Node에서 Element로 상속을 하게 되면, 결국은 객체에서 객체로를 이해할 수 있답니다.
  
  document.addEventListener('click' () => {console.log('clicked'})

• DOM 뿐만 아니라 BOM도 있어요. BOM은 Browser Object Model 이에요. 즉, 브라우저에서 제공하는 객체 라고 생각하면 되요. fetch도 브라우저에서 제공하는 BOM 객체안에 있는 함수에요.

끝으로... 🧑‍💻

• JavaScript는 객체들의 집합이랍니다... 객체 투성이야~