50 Project In 50 Days-Dad jokes

Parkboss·2025년 9월 10일

50 Project In 50 Days

목록 보기

8/8

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Dad Jokes</title>
  </head>
  <body>
    <div class="container">
      <h3>Don't Laugh Challenge</h3>
      <div id="joke" class="joke">// Joke goes here</div>
      <button id="jokeBtn" class="btn">Get Another Joke</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

const jokeEl = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');

jokeBtn.addEventListener('click', generateJoke);

generateJoke();
async function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  };

  const res = await fetch('https://icanhazdadjoke.com', config);

  const data = await res.json();

  jokeEl.innerHTML = data.joke;
}

// function generateJoke() {
// const config = {
// Headers: {
// Accept: 'application/json',
// },
// };
//
// fetch('https://icanhazdadjoke.com', config)
// .then((res) => res.json())
// .then((data) => (jokeEl.innerHTML = data.joke));
// }
//

🔑 핵심 차이: id vs class

id -> 페이지 안에서 유일(unique) 해야 함.

document.getElementById('...') 같은 DOM 접근할 때 많이 씀.

하나의 요소만 정확히 찍어낼 때 유리.

class -> 여러 요소에서 공통 스타일 줄 때 사용.

document.getElementsByClassName('...') or querySelectorAll('.className') 로 가져오면 여러 개가 선택됨.

특정 1개만 다루려면 인덱싱 필요 ([0] 이런 식으로).

👉 지금 코드에서 왜 id를 쓰는가?
const jokeEl = document.getElementById('joke');

이 프로젝트에서는 딱 하나의 joke 영역과 딱 하나의 버튼만 존재.

그러니까 id로 바로 잡아오는 게 직관적이고 간단합니다.

만약 class로 한다면:

const jokeEl = document.getElementsByClassName('joke')[0];
const jokeBtn = document.getElementsByClassName('btn')[0];

이렇게 배열-like 객체에서 꺼내야 해요. 좀 더 귀찮죠.

🚀 정리

하나뿐인 요소 → id 사용 (빠르고 직관적)

여러 요소에 공통 스타일/동작 → class 사용

즉, 스타일링은 class, 단일 DOM 조작은 id 쓰는 게 베스트입니다.

Parkboss

ur gonna figure it out. just like always have.

이전 포스트

50 Project In 50 Days-Dad jokes

50 Project In 50 Days

50 Project In 50 Days-Form wave input

0개의 댓글