[노마드코더 / 바닐라JS]　momentum 클론 코딩(1)

Front-End/JavaScript

[노마드코더 / 바닐라JS]　momentum 클론 코딩(1)_JS in browser

Olivia Kim 2023. 3. 21. 21:19

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다.

HTML in JavaScript

1. document.getElementById()

document

JavaScript가 HTML과의 상호작용을 가능하게 한다.
브라우저에서 그냥 사용이 가능하다. (콘솔 창에서 document를 바로 출력해 볼 수 있음)

document.getElementById()

document의 함수 중 하나이다.
HTML에서 id를 통해 element를 찾아낸다.
예시

// string을 전달받는 함수이므로 괄호 안에 ''를 쓴다.
document.getElementById('title');  // <h1 id="title">Olivia!</h1>

// log보다 더 자세히 출력되는 console.dir를 이용해 살펴보자.
const title = document.getElementById('title');
console.dir(title);  // h1#title

2. HTML의 값 읽어오기

// HTML
<body>
	<h1 class="hello" id="title>Olivia!</h1>
</body>

// JavaScript
const title = document.getElementById('title');
console.log(title.id);        // hello
console.log(title.className); // title

HTML에서 JavaScript를 import했기 때문에 JS에서 HTML의 내용을 가져올 수 있다.
JS에서의 document는 HTML이 해당 .js 파일을 load했기 때문에 존재하는 것이다.
그다음, 브라우저가 우리가 document에 접근할 수 있도록 해준다.
앞으로 우리가 진행할 작업들도 아래와 같은 방식으로 이루어진다.
1. HTML에서 항목들을 가지고 와서
2. JS를 통해 변경한다.

Searching for Elements

1. document.getElementsByClassName()

// HTML
<body>
  <h1 class="hello">Hello World!</h1>
  <h1 class="hello">Hello World!</h1>
  <h1 class="hello">Hello World!</h1>
</body>

// JavaScript
const hellos = document.getElementsByClassName('hello');
console.log(hellos);

배열로 출력되므로, hellos.(something)으로 뭔가를 가져올 순 없다.
많은 elements를 가져와야 할 때 사용한다.

2. document.getElementsByTagName()

// HTML
<body>
	<div class="hello">
    <h1>Hello World!</h1>
  </div>
</body>

// JavaScript
const title = document.getElementsByTagName('h1');
console.log(title);

아직도 배열로 출력된다. 여전히 hellos.(something)으로 뭔가를 가져올 순 없다.

3. document.querySelector() || document.querySelectorAll() 👍🏼

// HTML
<body>
	<div class="hello">
    <h1>Hello World!</h1>
  </div>
</body>

// JavaScript
const title = document.querySelector('.hello');
console.log(title);

element를 CSS 방식으로 검색할 수 있다.
즉, hello라는 class 내부에 있는 h1을 가지고 올 수 있다는 것!
.querySelector()는 단 하나의 element를 return한다.
여러 개의 return을 받고 싶다면 .querySelectorAll()을 사용한다.

4. document.querySelector('').style

JS에서 HTML 요소의 style을 변경할 수 있다.
[참고] 다만, 우리가 JS에서 작업할 일의 대부분은 event를 listen하는 것이다!
예시
- document.querySelector(’.hello h1’).style.color = ‘blue’;
- document.querySelector('.hello h1').style.fontSize = '12px';

Events

클릭하는 것, 마우스를 그냥 올려두는 것 등 어떤 사건을 발생시키는 것들이 모두 event다.
JS는 모든 event들을 listen할 수 있다.

✨ [event의 실행]
1. element를 찾는다.
2. event를 listen한다.
3. 그 event에 반응한다.

1. eventListener

event를 listen한다. 단, JS에게 무슨 event(ex. click)를 listen하고 싶은지 알려줘야 한다.
왜냐하면, 모든 이벤트를 다 감시하고, 알고 싶지는 않기 때문!
예를 들어 click 이벤트를 listen한다면, 지정한 해당 요소가 클릭되는지 지켜본 후 클릭되는 순간 지정한 함수 등을 호출하는 것을 말한다.

// HTML은 이전과 동일
const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
  console.log('title was clicked!');
}

title.addEventListener('click', handleTitleClick);

📢 [주의사항]
• 위의 코드에서 handleTitleClick을 인자로 넘겨줄 때, handleTitleClick()과 같이 작성하게 된다면 함수를 실행시켜 버리게 된다!
• 우리의 의도는 h1이 클릭되었을 때 자바스크립트가 해당 이벤트를 감지한 후, 대신 함수를 실행할 수 있도록 하는 것이므로, 바로 실행되지 않고 인자로만 넘어갈 수 있도록 ()를 없애고 함수명만 넘겨줘야 한다.

2. event를 사용하는 두 가지 방법

(1) addEventListener

(2) oneventname

const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
  console.log('title was clicked!');
}

// 1. 
title.addEventListener('click', handleTitleClick);
// 2.
title.onclick = handleTitleClick;

그렇다면 eventListener가 더 선호되는 이유?
⇒ 나중에 removeEventListener를 사용해 이벤트 리스너를 제거할 수 있기 때문이다.

3. window의 event를 listen 해보기

JS에서 document를 기본적으로 제공하듯이 window도 기본 제공한다.

(1) resize 예시

function handleWindowResize() {
  document.body.style.backgroundColor = 'tan';
}

window.addEventListener('resize', handleWindowResize);

// 웹페이지 크기를 resize할 경우, 설정해둔 tan으로 배경색이 변경된다!

(2) copy

function handleWindowCopy() {
  alert('copier!');
}

window.addEventListener('copy', handleWindowCopy);

// 키보드 또는 마우스를 이용한 복사 이벤트를 감지해 해당 함수를 실행한다!

(3) online

[참고] online ↔ offline

function handleWindowOnline() {
  alert('Welcome to Internet World!');
}

window.addEventListener('online', handleWindowOnline);

// wifi가 offline에서 online으로 연결되었는지를 감지해 해당 함수를 실행한다!

CSS in JavaScript

1. if-else를 활용해 h1의 color 변경하기

const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
  if(title.style.color === 'tomato') {
    title.style.color = 'chocolate';
  } else {
    title.style.color = 'tomato';
  }
}

title.addEventListener('click', handleTitleClick);

→ 위의 코드를 변수를 활용해 변경하기

const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
  const currentColor = title.style.color;
  let newColor;
  if(currentColor === 'tomato') {
    newColor = 'chocolate';
  } else {
    newColor = 'tomato';
  }
  title.style.color = newColor;
}

title.addEventListener('click', handleTitleClick);

코드 해석
- currentColor는 getter로써, 최근 color값을 복사하는 역할을 한다. 그렇기에 의미론적으로 봤을 때 const를 선언하는 것이 적절하다.
- newColor는 setter로써, 변수에 대입된 색상값을 title.style.color에 최종적으로 할당하는 역할을 한다. 의미론적으로 봤을 때 값이 변경될 수 있으므로 let으로 선언하는 것이 적절하다.
- 프로그래밍 언어에서의 = (equal)은 오른쪽의 값 → 왼쪽에 대입한다는 의미이다.
- 따라서 newColor = title.style.color가 아니라 title.style.color = newColor인 이유는 newColor의 값을 title.style.color에 넣어주어야 하는 것이 맞기 때문이다!
  → 이렇게 대입해주지 않으면 그냥 newColor = '색상' 선언만 되고 끝! 인 상태이다.
- 위의 내용을 토대로 순차적으로 코드를 이해해 보자면,
  1. click event 발생 및 handleTitleClick 함수 실행
  2. currentColor 변수 선언 후 title.style.color 값 복사 (getter)
  3. newColor 변수 확인
  4. currentColor 현재 값 확인
  5. 조건에 따라 newColor에 'tomato' 혹은 'chocolate' 값 대입
  6. 마지막으로 title.style.color에 newColor값 대입 (setter)

2. JS와 CSS를 분리하기

<!-- html -->

<div class="hello">
  <h1>Hello World!</h1>
</div>

/* CSS */

h1 {
  color: chocolate;
}

.active {
  color: tomato;
}

// JavaScript

const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
  if(title.className === 'active') {
    title.className = '';
  } else {
    title.className = 'active';
  }
}

title.addEventListener('click', handleTitleClick);

→ 위의 코드 더 좋게 고쳐보기

(1) 'active'라는 string을 두 번 반복해서 사용하고 있다. 이는 error의 위험이 있다. active는 내가 임의로 정해준 클래스 명이기 때문에 나중에 바꿔버리거나, 오탈자가 있으면 동작하지 않기 때문이다.

const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
	const clickedClass = 'active';
  if(title.className === clickedClass) {
    title.className = '';
  } else {
    title.className = clickedClass;
  }
}

title.addEventListener('click', handleTitleClick);

⇒ 따라서 내가 정의한 이름을 한 번만 사용하도록 (여러 번 사용해서 오탈자가 날 위험을 줄이도록) 변수를 선언해 사용한다!

(2) 이미 className이 존재하는 상태라면? 또한 JS에서 className 그 자체를 바꿔버리는 것은 좋은 방법이 아니다.

// HTML
<div class="hello">
  <h1 class="font">Hello World!</h1>
</div>


// JavaScript
const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
	const clickedClass = 'active';
  if(title.classList.contains(clickedClass)) {
    title.classList.remove(clickedClass);
  } else {
    title.classList.add(clickedClass);
  }
}

title.addEventListener('click', handleTitleClick);

⇒ className 그 자체를 바꿔버리지 않고, JS를 이용해 특정한 className만 변경하도록 한다! classList는 class들의 목록으로 작업할 수 있게끔 허용해 준다.

(3) 위의 작업을 더 편하게 하기 위해 toggle을 사용해 보자.

/* CSS */

h1 {
  color: chocolate;
}

.active {
  color: tomato;
}

// JavaScript

const title = document.querySelector('div.hello:first-child h1');

function handleTitleClick() {
  title.classList.toggle('active');
}

title.addEventListener('click', handleTitleClick);

⇒ title의 classList에 active가 이미 있는지 확인해서 만약 있다면 toggle이 active를 제거해 준다. 만약 존재하지 않는다면, 추가해 준다!

✅ 주변 분들에게 해당 강의를 많이 추천받았는데, 직접 들어보니 왜 그렇게 추천했는지 알겠다. 머릿속에 애매하게 정리되어있던 자바스크립트가 이거는 이렇기 때문에 이렇다! 라고 깔끔하게 정리되는 느낌! 앞으로 배울 내용들을 바탕으로 간단한 개인 프로젝트도 만들어보면서 자바스크립트랑 더 친해지는 시간을 가져야겠다.

[관련 글 함께 보기]

[참고 자료]

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

Javascript for Beginners

nomadcoders.co

저작자표시 비영리 변경금지