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
오늘은 금요일이라서 지금까지 배운 것들을 모아놓은 시험을 봤는데 생각보다 헷갈리는 것들이 많았다.
회고 팀들과 공부를 하며 공부 시간을 늘려야겠다고 생각했다.
그리고 역시 과제도 있다..ㅋㅋ
반응형
