35+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

• 부정 연산자
  • 부정 연산자는 참인 값과 거짓인 값을 뒤집는다.
    • 기호는 "!" 를 사용하고 결과는 이렇다.
    • !참 -> 거짓 / !거짓 -> 참
    • 부정 연산자를 사용하면 조건이 거짓일 때 실행되도록 할 수 있다.
  • 이중 부정은 참을 참으로 변경한다.
    • Boolean() 함수를 대신하여 사용할 수 있다.
    • 기호는 "!!" 를 사용하고 결과는 이렇다.
    • !!참 -> 참 / !!거짓 -> 거짓

 

• Undefined는 값이 없음을 나타내는 값이다.
  • 무언가 명시적으로 정의되지 않았을 때 값이 없다고 한다.
  • 변수를 선언했지만 값을 할당하지 않았을 때 undefined라고 나온다.
  • 또한 값을 반환하지 않는 함수가 기본으로 반환하는 값도 undefined다.
• Null은 빈 상태를 나타내는 값이다.
  • 개발자는 명시적으로 값이 비어있음을 나타낼 때 사용한다.
• Undefined와 Null의 차이
  • 둘을 동치 연산자로 비교하면 false가 나온다.
  • 둘의 차이는 "값이 정의되지 않음과 값이 들어있지 않음"의 차이이다.

 

• BOM은 브라우저 객체 모델(Browser Object Model)이다.
  • 브라우저가 제공하는 JS 객체 집합이다.
  • 브라우저가 제공하는 JS 객체 중 가장 근본이 되는 객체는 Window 객체이다.
  • Window 객체의 모든 속성에 접근하는 방법
    • window.document
    • window["document"]
    • 하지만 window 객체는 근본이 되는 객체이므로 생략이 가능하다.
    • document
• DOM은 문서 객체 모델(Document Object Model)이다.
  • HTML 문서를 HTML parser에서 해석해 생성한 것
  • 렌더링 된 트리를 볼 수 있다.
  • document에 접근하는 방법 
    • document

 

HTML 문서의 태그는 브라우저에 의해 해석되어 DOM 요소가 된다.

JS를 사용해 DOM 요소의 텍스트 컬러를 변경하고 싶다면 JS에서 DOM 요소를 선택해야 한다.

// DOM의 객체인 요소를 선택하려면 Web API를 사용해야 한다.

// 메서드가 전달받는 selector 인자는 요소를 식별할 수 있는 CSS 선택자
// 가장 먼저 찾은 첫번째 요소만 반환한다.
document.querySelector()


// 모든 요소를 선택하려면 이 메서드를 사용해야한다.
document.querySelectorAll()

// document.getElementById/All에서 선택한 요소를 저장하고 사용할 수 있다.
// 이해하기 쉽고 버그가 발생할 확률도 줄고 요소를 선택하는 속도도 빠르다.

저장한 변수.querySelector()
저장한 변수.querySelectorAll()

document.getElementsByName()
document.getElementById()
document.getElementsByTagName()

 

// 클래스 이름을 DOM 요소에 추가하려면 요소의 classList 속성을 통해 add() 메서드를 사용해야 한다.

//한 개 추가
변수 이름.classList.add('className')
// 여러 개 추가
변수 이름.classList.add('className1', 'className2', 'className3')

// 제거도 추가와 비슷하게 remove를 사용하면 된다.

변수 이름.classList.remove('className')
변수 이름.classList.remove('className1', 'className2')

// 클래스 이름을 포함하는 지 검사
변수 이름.classList.contains('className')

// 클래스 이름을 전환
// 컴포넌트를 만들 때 자주 사용한다.
변수 이름.classList.toggle('className')

 

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

오늘은 금요일이라서 지금까지 배운 것들을 모아놓은 시험을 봤는데 생각보다 헷갈리는 것들이 많았다.

회고 팀들과 공부를 하며 공부 시간을 늘려야겠다고 생각했다.

그리고 역시 과제도 있다..ㅋㅋ