📝 [250317/오답노트] 자바스크립트 addEventListener(), parseInt(), classList.add('클래스명') 정리

자바스크립트에서 HTML 요소를 선택하고(querySelector()), 새로운 요소를 만들고(createElement()), 추가하는 방법까지는 알았다. 근데 

처음에는 
💭 "그냥 HTML에서 div를 미리 만들어 놓으면 안 돼?"
💭 "parseInt()는 무슨 기능인거지?"
💭 "classList.add()와 querySelector()는 HTML,CSS차이만 있는 걸까?"

이런 생각이 들었다.

하지만 직접 코드를 분석하면서 이렇게 작성해야 하는 이유가 있었다..!
그래서 생각도 정리할 겸 오답노트 형식으로 기록해 보았다! ✍️

🎯 1. createElement('태그') - 새로운 요소 만들기

"그냥 HTML에서 div를 미리 만들어 놓으면 안 돼?"
👉 미리 만들어 놓으면 새로운 트윗을 추가할 수 없음! 😢
👉 사용자가 입력한 내용을 반영할 수 없음!

✅ 정답 코드

const tweetDiv = document.createElement('div'); // 새로운 div 만들기
tweetDiv.classList.add('tweet'); // 스타일 적용
tweetDiv.textContent = "새로운 트윗 추가됨!"; // 내용 추가

document.getElementById("tweets_container").appendChild(tweetDiv);

 

📌 결과:
✔ 버튼을 누를 때마다 새로운 트윗이 추가됨!
✔ 사용자가 입력한 텍스트도 반영 가능!

🏆 이렇게 정리하자!

✔ createElement()를 사용하면 새로운 요소를 동적으로 추가 가능!
✔ HTML에 미리 작성해두지 않아도 JavaScript로 필요한 요소를 만들어 화면에 추가할 수 있음!

🎯 2. parseInt() - 글자를 숫자로 변환하기

"그냥 likeCounter.textContent + 1 하면 되지 않나?"
👉 하지만 textContent는 기본적으로 문자열(string)!
👉 그냥 더하면 "0" + 1 → "01"처럼 이상한 값이 나옴! 😱

let count = parseInt(likeCounter.textContent); // 문자열을 숫자로 변환
likeCounter.textContent = count + 1; // 숫자 1 증가

📌 결과:
✔ "0" → 숫자 0으로 변환 → 0 + 1 = 1 (올바르게 증가됨!)

🏆 이렇게 정리하자!

✔ parseInt()를 사용하면 숫자로 변환할 수 있음!
✔ "0" + 1 하면 "01"이 되지만, parseInt("0") + 1 하면 1이 됨.
✔ 좋아요 버튼을 누를 때 숫자가 정상적으로 증가하려면 반드시 필요함!

그렇다면 왜 문자열을 숫자로 변환을 해야할까?

✅ textContent는 기본적으로 문자(string) 형태라서, 그냥 더하면 숫자가 아닌 글자로 연결된다.
✅ parseInt()를 사용하면 문자를 숫자로 변환하여 정상적인 계산이 가능하다.
✅ parseInt("0") + 1 → 1 ✅ (정상 작동), "0" + 1 → "01" ❌ (잘못된 결과)
✅ 좋아요 버튼을 누를 때 숫자가 올바르게 증가하려면 반드시 필요하다!
✅ 즉, parseInt()는 문자로 저장된 숫자를 올바르게 계산하기 위해 꼭 필요한 함수다. 🚀

🎯 3. classList.add('클래스명') - CSS 스타일 추가하기

"classList는 querySelector()랑 비슷한 거 아닌가?"
👉 비슷해 보이지만 역할이 다름!
👉 querySelector()는 HTML 요소를 선택하는 기능,
👉 classList.add()는 CSS 스타일을 적용하는 기능!

✅ 정답 코드

const likeButton = document.createElement('button'); // 버튼 만들기
likeButton.textContent = "♥️"; // 하트 모양 추가
likeButton.classList.add('like-button'); // CSS 스타일 적용

document.body.appendChild(likeButton); // 화면에 버튼 추가

📌 결과:
✔ 하트 버튼이 생기고, CSS에서 미리 지정한 like-button 스타일이 적용됨!

🏆 이렇게 정리하자!

✔ querySelector()는 HTML 요소를 찾는 기능!
✔ classList.add('클래스명')는 CSS 스타일을 적용하는 기능!
✔ classList.toggle('클래스명')을 사용하면 있으면 제거, 없으면 추가 가능!

🎯 4. 최종 정리

✅ createElement('태그') → 새로운 HTML 요소 만들기
✅ parseInt("10") → 문자를 숫자로 변환
✅ classList.add('클래스명') → CSS 스타일 적용

✅ 자바스크립트는 여전히 어렵구나..! 🚀🔥