동작하게 만들기

프로필 카드는 멋져 보여요 — 하지만 그냥 가만히 있을 뿐이죠. 클릭해도, 눌러 봐도 아무 일도 일어나지 않아요. HTML은 구조이고 Tailwind는 스타일이기 때문이에요. 동작은 JavaScript의 몫입니다.

초보자에게 아무도 알려주지 않는 비밀: 바이브 코딩에서는 JavaScript를 외우지 않아요. 무슨 일이 일어나야 하는지를 설명하면, AI가 코드를 작성합니다. 동작은 그저 한 문장이에요:

"누군가 좋아요 버튼을 클릭하면, 하트 옆 숫자가 1씩 올라간다."

이 프롬프트를 AI에 주면, 이런 작은 코드가 나옵니다:

const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
  likes = likes + 1;
  count.textContent = likes;
});

이게 다예요. 매번 세 가지 동작이죠:

1. 요소를 찾고 (getElementById)
2. 이벤트를 듣고 (addEventListener("click", ...))
3. 무언가를 바꾼다 (textContent, 클래스, 무엇이든)

찾고, 듣고, 바꾸기. 여러분이 써 본 거의 모든 웹사이트의 거의 모든 인터랙션 — 드롭다운, 다크 모드 토글, 좋아요 버튼 — 이 모두 이 패턴의 변형이에요.

이번 레슨에서는 카드에 좋아요 카운터를 추가합니다. 레슨이 끝나면, 하트를 클릭하고 여러분이 제어하는 숫자가 올라가는 걸 보게 될 거예요. 페이지가 앱이 되는 순간이죠.