멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 35 (부정 연산자, Null & Undefined, BOM & DOM, DOM 요소 선택, class 속성 값 변경)

 

목차

• 부정 연산자
• Null & Undefined
• BOM & DOM
• DOM 요소 선택
• class 속성 값 변경
• 오늘 하루를 돌아보며

 

부정 연산자

참인 값(truthy)과 거짓인 값(falsey)을 뒤집는 역할을 하는 부정 연산자는 ! 기호를 사용한다. 참인 값은 거짓으로, 거짓은 값은 참으로 바꾼다.

• !true → false
• !false → true

 

때때로 두 개의 부정(!!) 연산자를 사용하여 이중 부정(Double negation)을 하기도 한다. 참으로 평가되는 데이터를 Boolean 값인 true로 변경하거나 거짓으로 평가되는 데이터를 false로 변경한다. Boolean()을 사용하는 것보다 이중 부정이 코드를 더 적게 사용하여 동일한 결과를 만들기 때문에 이중 부정을 더 많이 사용한다.

 

Null & Undefined

Null은 빈 상태(empty state)를 나타내는 값이다. 개발자가 명시적으로 값이 비었다는 것을 나타낼 때 null을 사용한다.

Undefined는 값이 없음을 나타내는 값이다. 무언가 명시적으로 정의되지 않았을 때 값이 없다고 한다. 변수를 선언하고 아무런 값도 할당하지 않은 변수와 값과 명시적인 반환 값이 없는 함수의 반환 값은 모두 undefined다.

 

null과 undefined를 동치(===) 연산자로 비교하면 false가 출력된다. 둘은 다른 기본 타입이기 때문이다. 하지만 동등(==) 연산자로 비교하면 true를 출력한다. null과 undefined의 타입을 자동 변경해서 비교하기 때문이다. 따라서, 비교할 때는 항상 ===, !== 연산자를 사용하자!

console.log(null === undefined) // false
console.log(null == undefined) // true

 

BOM & DOM

구분	BOM(Browser Object Model) 브라우저 객체 모델	DOM(Document Object Model) 문서 객체 모델
의미	브라우저가 제공하는 JavaScript 객체 집합	HTML 문서를 해석하여 구성한 객체 구조
핵심 객체	window	document
주요 역할	브라우저 창 및 환경 관리(팝업, URL, 타이머 등)	HTML 문서 구조를 표현하고 조작
접근 방법	window 또는 Window() 속성	document

 

DOM 요소 선택

HTML 문서의 태그는 브라우저에 의해 해석되어 DOM 요소가 된다. JavaScript를 사용해 DOM 요소의 값을 변경하고 싶다면 DOM에서 요소를 선택해야 한다.

 

DOM의 객체인 요소를 선택하려면 Web API(앱을 만드는 데 필요한 함수들의 집합)를 사용해야 한다.

• Document.getElementById(): id 이름으로 요소를 가져온다. (많이 사용하지만, id 남용은 피해라)
• Document.getElementsByTagName(): 태그 이름으로 요소들을 가져온다.
• Document.getElementsByName(): form>input 요소의 name 속성 값으로 요소들을 가져온다.
• Document.getElementsByClassName(): 클래스 이름으로 요소들을 가져온다.
• Document.querySelector(): CSS 선택자로 요소를 식별하여 가장 먼저 찾은 첫번째 요소를 가져온다.
• Document.querySelectorAll(): CSS 선택자로 요소를 식별하여 찾은 모든 요소를 가져온다.

다음은 querySelector() 메서드가 전달받는 selector 인자의 예시다.

document.querySelector('#id')
document.querySelector('.class')
document.querySelector('tag-name')
document.querySelector('[aria-hidden="true"]')

 

querySelector() 메서드는 document 객체에서만 아니라, 선택된 DOM 요소도 querySelector() 메서드를 사용할 수 있다. 그래서 아래처럼 작성할 수 있고, 이전 코드보다 이해하기 쉽고, 버그가 발생할 가능성도 줄고, 요소를 선택하는 속도도 더 빠르다.

<ol class="musicians">
  <li>드렁큰 타이커</li>
  <li>다이내믹 듀오</li>
  <li>소울 딜리버리</li>
</ol>

const musicianList = document.querySelector('.musicians')
const firstMusician = musicianList.querySelector('li')

console.log(firstMusician) // <li>드렁큰 타이거</li>

 

class 속성 값 변경

JavaScript로 CSS를 변경할 수는 있지만 변경하는 방법이 쉽지는 않다. 현 시점에서는 클래스 이름을 사용해 CSS를 변경하는 것이 가장 좋은 방법이다.

• add(): 클래스를 추가하여 스타일을 적용한다.
• remove(): 클래스를 제거하여 스타일이 적용되지 않게 한다.
• contains(): if 문 등으로 특정 클래스를 포함하는지 여부를 확인한다. 특정 스타일이 있는지 확인할 수 있다.
• toggle(): 클래스를 전환하여 스타일을 바꾼다. 다크모드 버튼 등에 적용하여 UI 전환 효과를 줄 수 있다.

<p class="target">클래스 이름을 추가해 글자 색상을 변경할 수 있습니다.</p>

.text-primary {
	color: #6c5ce7;
}

.font-bold {
  font-weight: 700;
}

.text-4xl {
  font-size: 42px;
}

 

위와 같은 HTML과 CSS가 있을 때 target 클래스를 가진 요소에 클래스를 사용해 스타일링하는 방법은 다음과 같다.

const target = document.querySelector('.target')

// 스타일 추가
target.classList.add('text-primary')
// 여러 클래스 한 번에 추가
target.classList.add('text-primary', 'font-bold', 'text-4xl')

// 스타일 제거
target.classList.remove('text-primary')

// 스타일 포함 여부 확인
if (target.classList.contains('text-primary') {
  target.classList.remove('text-primary')
} else {
  target.classList.add('text-primary')
}

 

오늘 하루를 돌아보며

이번 주에 JavaScript 첫 과제를 받았다. 무려 첫 과제다! 생각보다 어렵진 않았지만, 과제를 위한 저장소를 만들고 필요한 파일과 폴더를 구성하는 게 생각보다 시간이 걸렸다. 분명 배웠는데 배운 내용을 다 까먹었다ㅠㅠ

 

HTML/CSS를 할 때의 수업 노트를 다시 살펴보고, 예시로 주신 저장소도 들어가보고 하면서 어떻게든 만들었는데… 명확한 가이드가 없으니까 어려웠다. ‘이렇게 해도 되나?’, ‘이게 맞나?’, ‘혹시 틀렸으면 어떡하지?’하는 생각이 머리 속을 막 휘저었는데, 그래도 ‘틀린 건 없다! 방법은 다양하다! 일단 해보자!’하고 생각을 바꿔서 질러봤다.

 

여전히 조금 불안한 마음이 들긴 하지만 다음 과제를 할 때 수정하면 되니까! 지금은 배우는 시간이니까! 괜찮을 것이다! 화이팅!!