🥞 오늘 한 일

• JavaScript 문법 종합반
  • 5주차 진행 중
• 알고리즘 특강 및 숙제 (09:00, 강창민 튜터님)
• 알고리즘 코드카타
  • 두 수의 차
  • 두 수의 곱
  • 몫 구하기
  • 나이 출력
  • 숫자 비교하기
  • 두 수의 합
  • 두 수의 나눗셈
  • 각도기
  • 짝수의 합
  • 배열의 평균값
• 캠프 대여 맥북 세팅 및 적응

🍽️ 문제 해결

간단한 문제들

• 문제 : 전 팀원분께서, 같은 클래스를 가진 여러 개의 노드에 한꺼번에 클릭 이벤트를 주는 방법에 대해 여쭤보셨다. 해당 코드는 아래와 같았다.

const movieId = document.querySelector('.card')
movieId.addEventListener('click', function() {
    alert ("해당 영화 id =", `${movie.id}`)
});

• 해결 : 우선 querySelector을 사용하면 하나만 가져와지기 때문에 querySelectorAll을 써야한다는 점을 알려드렸고, 또 그냥 addEventListener로 클릭 이벤트를 넣어주게 되면 전체의 '.card' 하나하나를 가져올 수 없게 되기 때문에 forEach를 사용하면 좋다는 것도 알려드림으로써 문제가 해결되었다. 알려드리면서 참고한 나의 코드는 다음과 같다.

document.querySelectorAll(".movieCard").forEach((item) => {
	item.addEventListener("click", clickMovieCard);
});

🍪 새로 알게된 것

• DOM, DOM_API, 클래스, getters setters에 대해 배웠다. 아래는 강의를 들으며 DOM에 대해 정리한 글이다.

DOM (Document Object Model)

(1) DOM의 기본 개념

1. JavaScript가 생긴 이유

• 기본적으로 브라우저에서 쓰려고 만들어졌다.
• 본연의 역할은 웹 페이지를 동적으로 만들기 위해, 즉 HTML 문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어.

2. 웹 페이지가 뜨는 과정

• a. 사용자가 브라우저에 주소를 입력한다.
• b. HTML 문서를 서버로부터 수신한다.
• c. 브라우저가 HTML 파일을 해석(parsing)
• d. javascript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 DOM Tree를 구성한다.

3. DOM이란?

• Document(HTML 파일)을 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것.
• 브라우저에 기본적으로 내장되어 있는 API.

  API란?
  다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할. 브라우저 역시 기본적으로 DOM과 관련된 API를 제공함으로써 브라우저의 DOM 객체에 접근할 수 있도록 도와준다.

• DOM이 브라우저에 내장되어 있기 때문에 우리는 HTML의 내용을 javascript로 접근, 제어할 수 있다.
• 모든 DOM의 node들은 '속성'과 '메서드'를 갖고 있다.
  • 속성 : 값, 해당 객체의 특성을 나타내는 값을 가져오거나 설정
  • 메서드 : 동작, 해당 객체가 수행하는 작업을 나타내는 함수
  • 예를 들어, Node 객체의 nodeName 속성은 해당 노드의 이름을 나타내는 문자열 값을 반환한다. 반면에 appendChild() 메서드는 해당 노드의 자식 노드를 추가하는 메서드이며, DOM 트리에서 해당 노드의 위치를 변경하는 동작을 수행한다.

(2) DOM 접근 및 제어

• 1. 항상 돔트리의 최상단 노드는 document
• 2. DOM은 모두 노드로 이루어져 있기 때문에 부모노드 - 자식노드관계 로 이루어져 있다.

🍴 느낀 점

• 하루종일 맥북과 씨름하느라 목표한 바를 다 이루지 못했다. 맥북이라는 기기를 처음 써보는 것이기도 하고, 세팅도 어렵고 단축키 등이 윈도우와 상이해서 정말 쉽지 않았다... 너무 빈약한 공부량에 아쉬움이 많이 남는 날이다. 내일은 반드시! 오늘의 두 배 이상을 공부에 투자해야겠다.

🍳 내일 할 일

• JavaScript 문법 종합반 5주차 마무리
• JavaScript 문법 종합반 3주차 2회독