12.1.1 addEventListener 사용하기 - 웹페이지의 섬세한 소통법 만들기

📘 12.1.1 addEventListener 사용하기 - 웹페이지의 섬세한 소통법 만들기

여러분과 함께 하는 이 순간들이 소중합니다. 지금까지 HTML 요소들을 만들고, 꾸미고, 없애는 방법을 차근차근 익혀왔어요. 이제는 그보다 더 아름다운 이야기를 나누고 싶어요. 웹페이지와 사용자가 서로 마음을 주고받는 방법을 배워보겠습니다. 마치 현관문을 두드리는 소리에 안에서 "네, 누구세요?"하고 대답하는 것처럼, 버튼을 클릭하면 웹페이지가 따뜻하게 반응하는 방법을 함께 배워봐요.

🧠 새로운 단어들과 친해지기

웹페이지에서 사용자와 소통할 때 사용하는 소중한 단어들을 살펴보겠어요.

단어	쉬운 설명
이벤트 (Event)	웹페이지에서 일어나는 다양한 일들이에요. 클릭하거나 마우스를 움직이는 것 같은 행동들을 말해요.
addEventListener	어떤 일이 일어났을 때 자동으로 특별한 기능이 실행되도록 약속하는 명령어예요.
이벤트 듣는 도우미	어떤 일이 일어났을 때 자동으로 실행되는 특별한 기능이에요.
특별한 기능	특정 상황에서 자동으로 실행되는 함수를 말해요.

addEventListener는 "add(추가하다) + event(사건) + listener(듣는 사람)"을 합친 말이에요. 말 그대로 "사건을 조용히 듣고 있다가 반응하는 친구를 추가하는 것"이랍니다.

✨ addEventListener가 뭔지 알아보기

웹페이지를 단순히 바라보기만 하는 것이 아니라 사용자와 자연스럽게 소통할 수 있는 살아있는 공간으로 만들려면 이벤트 처리가 꼭 필요해요. 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 누를 때마다 웹페이지가 "아, 뭔가 일어났구나"하고 조용히 반응해야 하거든요.

addEventListener는 HTML 요소와 자바스크립트 기능을 조용히 연결해주는 다리 역할을 해요. "이 버튼을 클릭하면 저 기능을 실행해주세요"라고 정중히 약속을 정해두는 거죠. 그러면 사용자가 그 행동을 할 때마다 약속된 기능이 자연스럽게 실행된답니다.

가장 아름다운 점은 하나의 요소에 여러 개의 이벤트 듣는 도우미를 붙일 수 있다는 거예요. 하나의 버튼이 클릭할 때와 마우스를 올릴 때 각각 다른 반응을 보이게 할 수 있어요. 마치 섬세한 감정을 가진 사람처럼 다양한 상황에 맞게 반응하는 웹페이지를 만들 수 있답니다.

일상 속 비유: 섬세한 소통 시스템 이야기

addEventListener를 더 자연스럽게 이해하기 위해 '섬세한 소통 시스템' 이야기를 들려드릴게요.

여러분 집에 아주 특별한 초인종이 있다고 상상해보세요. 이 초인종은 누르는 방법에 따라 조용히 다른 일이 일어나요.

• 한 번 살짝 누르면: "딩동~" 소리와 함께 현관등이 부드럽게 켜져요
• 두 번 연속 누르면: "딩동딩동~" 소리와 함께 강아지가 조용히 달려와요
• 길게 꾹 누르면: "디이이잉~" 소리와 함께 "어서 오세요" 하는 따뜻한 목소리가 들려요

이 모든 동작이 미리 정해둔 조용한 약속이에요. 초인종(HTML 요소)과 각각의 반응(자바스크립트 기능)이 자연스럽게 연결되어 있는 거죠.

addEventListener도 똑같은 섬세한 소통 시스템이에요. 웹페이지의 버튼, 이미지, 입력창 등에 "이런 행동을 하면 이런 일이 조용히 일어나게 해주세요"라고 미리 약속을 정해두는 거예요.

🎯 왜 addEventListener를 배워야 할까요?

웹페이지가 사용자와 자연스럽게 소통하는 친근한 공간이 되려면 이벤트 처리가 절대적으로 필요해요. 이벤트 없이는 웹페이지가 그냥 멀리서만 바라보는 그림과 다를 바 없거든요.

카페의 주문 시스템을 생각해보세요. 손님이 메뉴판의 버튼을 누르면 주문이 들어가고, 특별한 옵션 버튼을 누르면 선택사항이 나타나고, 결제 버튼을 누르면 결제 화면으로 이동해야 해요. 이 모든 자연스러운 흐름들이 이벤트 듣는 도우미로 만들어져요.

온라인 쇼핑몰에서도 마찬가지예요. 상품 사진에 마우스를 올리면 더 크게 보이고, "장바구니에 넣기" 버튼을 누르면 상품이 조용히 들어가고, "구매하기" 버튼을 누르면 결제하는 곳으로 자연스럽게 이동하는 것들이 모두 이벤트 처리 덕분이에요.

온라인 학습 사이트에서도 중요해요. 학생이 정답을 클릭하면 "정답이에요! 🎉" 메시지가 부드럽게 나타나고, 틀린 답을 클릭하면 "다시 한번 생각해보세요 😊" 힌트가 따뜻하게 나타나는 것들도 모두 이벤트 듣는 도우미의 작품이랍니다.

⚙️ 기본 사용법 배우기

addEventListener의 기본 사용법은 간단하지만 정말 강력해요.

// 기본 구조
요소.addEventListener("어떤일", 실행할기능);

실제 사용 예시:

// 버튼을 찾고 클릭 이벤트를 연결하기
let 내버튼 = document.getElementById("clickMe");
내버튼.addEventListener("click", function() {
    console.log("버튼이 클릭되었어요!");
});

자주 사용하는 이벤트 종류들:

// 클릭했을 때
요소.addEventListener("click", function() { ... });

// 마우스를 올렸을 때
요소.addEventListener("mouseover", function() { ... });

// 마우스를 뗐을 때
요소.addEventListener("mouseout", function() { ... });

// 키보드를 눌렀을 때
요소.addEventListener("keydown", function() { ... });

// 입력 내용이 바뀌었을 때
요소.addEventListener("change", function() { ... });

여기서 중요한 점은 이벤트 종류를 따옴표로 감싸야 한다는 것과, 기능을 바로 실행하지 않고 기능 자체를 전달해야 한다는 거예요.

🧪 직접 해보면서 배우기

이제 실제 예시를 통해서 addEventListener가 어떻게 작동하는지 자세히 알아볼게요.

🔹 첫 번째 예시: 첫 번째 클릭 반응 만들기

첫 번째 예시에서는 가장 기본적인 클릭 반응을 만들어볼게요.

// ID가 "specialButton"인 버튼을 찾아요
let 특별한버튼 = document.getElementById("specialButton");

// 버튼에 클릭 반응을 연결해줘요
특별한버튼.addEventListener("click", function() {
    console.log("🎉 특별한 버튼이 클릭되었어요!"); // 콘솔에 메시지를 출력해요
    alert("와우! 반응이 일어났습니다!"); // 알림창을 띄워요

    // 버튼 색깔도 바꿔볼게요
    특별한버튼.style.backgroundColor = "gold"; // 버튼을 금색으로 바꿔요
    특별한버튼.textContent = "클릭 완료!"; // 버튼 글씨를 바꿔요
});

console.log("특별한 버튼에 클릭 반응이 연결되었어요!");

이 과정을 차근차근 살펴보면, 먼저 getElementById로 버튼을 찾아서 변수에 저장해요. 그다음 addEventListener로 "click" 이벤트와 실행할 기능을 연결하죠. 사용자가 버튼을 클릭하면 기능 안의 모든 코드가 순서대로 실행돼요.

🔹 두 번째 예시: 마우스 올리기 반응 만들기

이번에는 마우스를 올렸다 뗐다 할 때 반응하는 자연스러운 효과를 만들어볼게요.

// ID가 "colorBox"인 상자를 찾아요
let 색깔상자 = document.getElementById("colorBox");

// 마우스를 올렸을 때 반응을 연결해요
색깔상자.addEventListener("mouseover", function() {
    색깔상자.style.backgroundColor = "lightblue"; // 상자를 하늘색으로 바꿔요
    색깔상자.style.transform = "scale(1.1)"; // 상자를 조금 크게 만들어요
    console.log("🐭 마우스가 상자 위로 올라왔어요!"); // 콘솔에 메시지를 출력해요
});

// 마우스를 뗐을 때 반응을 연결해요
색깔상자.addEventListener("mouseout", function() {
    색깔상자.style.backgroundColor = "lightgray"; // 상자를 회색으로 되돌려요
    색깔상자.style.transform = "scale(1)"; // 상자를 원래 크기로 되돌려요
    console.log("🐭 마우스가 상자에서 떠났어요!"); // 콘솔에 메시지를 출력해요
});

console.log("상자에 마우스 호버 반응이 연결되었어요!");

이 예시에서는 하나의 요소에 두 개의 서로 다른 반응을 연결해요. 마우스를 올릴 때와 뗄 때 각각 다른 반응을 보여서 사용자에게 자연스러운 경험을 선물해줘요.

🔹 세 번째 예시: 입력창 변화 감지 반응

마지막으로 사용자가 입력창에 글을 쓸 때 실시간으로 반응하는 예시를 만들어볼게요.

// ID가 "nameInput"인 입력창을 찾아요
let 이름입력창 = document.getElementById("nameInput");
let 인사말영역 = document.getElementById("greeting");

// 입력 내용이 바뀔 때 반응을 연결해요
이름입력창.addEventListener("change", function() {
    // 사용자가 입력한 이름을 가져와요
    let 사용자이름 = 이름입력창.value; // 입력창에서 내용을 가져와요

    // 인사말을 만들어서 화면에 보여줘요
    인사말영역.textContent = "안녕하세요, " + 사용자이름 + "님! 👋"; // 인사말을 만들어요
    인사말영역.style.color = "green"; // 글씨를 초록색으로 만들어요

    console.log("입력된 이름:", 사용자이름); // 콘솔에 입력된 이름을 출력해요
});

console.log("입력창에 변화 감지 반응이 연결되었어요!");

이 예시에서는 사용자의 입력을 실시간으로 감지하여 개인화된 인사말을 만들어줘요. 입력창의 내용이 바뀔 때마다 자동으로 기능이 실행되어 화면이 업데이트돼요.

🔄 addEventListener 사용하는 순서 정리하기

지금까지 배운 addEventListener 사용 과정을 자연스럽게 정리해볼게요.

첫 번째 단계는 요소 찾기예요. getElementById 등을 사용해서 반응을 연결할 HTML 요소를 찾아서 변수에 저장하는 거죠. 두 번째는 어떤 일에 반응할지 정하기예요. "click", "mouseover", "change" 등 어떤 종류의 일에 반응할지 정하는 단계예요.

세 번째는 반응 기능 준비예요. 그 일이 발생했을 때 실행할 코드를 기능 형태로 작성하는 과정이에요. 네 번째는 반응 연결하기예요. addEventListener를 사용해서 요소, 이벤트 종류, 기능을 연결하는 단계예요.

마지막으로는 사용자 행동 기다리기 단계예요. 모든 설정이 완료되면 사용자가 해당 행동(클릭, 마우스 이동 등)을 할 때까지 조용히 기다리고, 행동이 일어나면 등록된 기능이 자동으로 실행돼요.

🧚‍♀️ 이야기로 다시 배우기: 조용한 도서관 이야기

지금까지 배운 내용을 하나의 이야기로 다시 정리해볼까요?

어느 조용한 오후, 우리 동네 도서관에 사서 도우미 EventListener가 있었어요. 이 도우미는 도서관에서 방문자들의 작은 행동들을 조용히 지켜보며 도움이 필요한 순간을 놓치지 않았답니다.

어느 날, 도서관 관리자가 사서 도우미를 찾아왔어요. "도우미님, 방문자들이 책 검색 버튼을 누를 때마다 친절한 안내가 나오게 해주실 수 있나요?"

사서 도우미는 조용히 고개를 끄덕이며 말했어요. "addEventListener 시스템을 사용하면 됩니다"

도우미는 먼저 지켜볼 대상을 정했어요. (getElementById로 버튼 찾기) 그다음 어떤 행동을 지켜볼지 정했답니다. ("click" 이벤트 선택) 마지막으로 그 행동이 일어나면 무엇을 할지 미리 계획했어요. (실행할 기능 준비)

"자, 이제 addEventListener 명령을 사용해보세요" 도우미가 차분히 방법을 가르쳐주었어요.

// 조용한 도서관 명령
버튼.addEventListener("click", function() {
    // 여기서 친절한 안내가 나가요!
});

그 순간부터 도서관은 조용히 변해갔어요. 방문자들이 버튼을 누를 때마다 따뜻한 안내가 자연스럽게 나타났답니다. "검색 중입니다", "결과를 확인해보세요", "좋은 책을 찾으셨길 바라요" 같은 유용한 안내들이 말이에요.

다른 공간들도 사서 도우미의 도움을 요청했어요. 카페, 박물관, 학습센터... 모든 곳들이 자신의 공간을 방문자들과 자연스럽게 소통하는 따뜻한 곳으로 만들고 싶어했거든요.

이렇게 해서 우리 동네는 사람들과 조용히 소통하는 친근한 공간들로 가득하게 되었답니다.

🧠 자주 하는 실수와 주의할 점

addEventListener를 사용할 때 실수하기 쉬운 부분들을 미리 알아두면 더 안전하게 코딩할 수 있어요.

❌ 실수 1: 이벤트 종류를 따옴표로 감싸지 않기

// 잘못된 방법 - 따옴표 없음
요소.addEventListener(click, function() {
    console.log("클릭됨");
}); // 에러가 나요!

// 올바른 방법 - 따옴표로 감싸기
요소.addEventListener("click", function() {
    console.log("클릭됨");
});

이런 실수가 생기는 이유는 이벤트 종류가 글자이기 때문이에요. click, mouseover 같은 이벤트 이름들은 모두 글자이므로 반드시 따옴표로 감싸야 해요.

❌ 실수 2: 기능을 바로 실행해버리기

// 잘못된 방법 - 기능을 바로 실행
요소.addEventListener("click", alert("안녕하세요!")); // 바로 실행돼버려요!

// 올바른 방법 - 기능 자체를 전달
요소.addEventListener("click", function() {
    alert("안녕하세요!");
});

두 번째 부분에는 기능 자체를 전달해야 해요. 기능을 바로 실행(alert("안녕하세요!"))하면 이벤트 듣는 도우미를 등록할 때 실행되어버리고, 나중에 클릭해도 아무 일이 일어나지 않아요.

❌ 실수 3: 없는 요소에 이벤트 걸기

// 위험한 방법 - 요소가 있는지 확인 안 함
let 버튼 = document.getElementById("notExist");
버튼.addEventListener("click", function() {
    console.log("클릭됨");
}); // 버튼이 없으면 에러가 나요!

// 안전한 방법 - 있는지 먼저 확인
let 버튼 = document.getElementById("myButton");
if (버튼) {
    버튼.addEventListener("click", function() {
        console.log("클릭됨!");
    });
} else {
    console.log("버튼을 찾을 수 없어요!");
}

HTML 파일에 해당 ID가 없거나 오타가 있으면 getElementById가 null을 가져와요. null에는 addEventListener 기능이 없어서 에러가 발생해요.

✏️ 연습문제로 개념 다지기

이제 배운 내용을 잘 이해했는지 확인해보는 시간이에요. 여러분의 마음속에 이런 생각이 조용히 스며들기를 바라요. 웹페이지의 이벤트를 다루는 일은 단순한 기능 구현이 아니라, 사용자와 따뜻하게 소통하기 위한 다정한 배려라는 것을요. 마치 친구가 문을 두드릴 때 "잠깐, 금방 나갈게"라고 대답해주는 마음처럼요.

Ex1) "안녕!" 메시지를 띄우는 인사 버튼 만들어보자

// 인사 버튼을 찾아서 변수에 저장해요
let 인사버튼 = document.getElementById("sayHello");

// 클릭했을 때 인사말을 보여주는 기능을 연결해요
인사버튼.addEventListener("click", function() {
    console.log("안녕하세요! 👋"); // 콘솔에 인사말을 출력해요
    alert("반갑습니다!"); // 알림창으로 인사말을 띄워요
});

console.log("인사 버튼에 클릭 반응이 연결되었어요!");

Ex2) 마우스를 올리면 색깔이 바뀌는 자연스러운 상자 만들어보자

// 자연스러운 상자를 찾아서 변수에 저장해요
let 색깔상자 = document.getElementById("colorBox");

// 마우스를 올렸을 때 분홍색으로 바뀌는 반응을 연결해요
색깔상자.addEventListener("mouseover", function() {
    색깔상자.style.backgroundColor = "pink"; // 상자를 분홍색으로 바꿔요
    console.log("🌸 상자가 분홍색으로 바뀌었어요!"); // 콘솔에 메시지를 출력해요
});

// 마우스를 뺐을 때 하늘색으로 돌아가는 반응을 연결해요
색깔상자.addEventListener("mouseout", function() {
    색깔상자.style.backgroundColor = "lightblue"; // 상자를 하늘색으로 되돌려요
    console.log("💙 상자가 하늘색으로 돌아왔어요!"); // 콘솔에 메시지를 출력해요
});

Ex3) 안전하게 이벤트를 연결하는 완벽한 코드를 작성해보자

// 테스트 버튼을 찾아서 변수에 저장해요
let 테스트버튼 = document.getElementById("testButton");

// 버튼이 실제로 있는지 확인한 후에 이벤트를 연결해요
if (테스트버튼) {
    테스트버튼.addEventListener("click", function() {
        console.log("테스트 버튼이 안전하게 클릭되었어요! ✅"); // 콘솔에 성공 메시지를 출력해요
        테스트버튼.style.backgroundColor = "lightgreen"; // 버튼을 연초록색으로 바꿔요
        테스트버튼.textContent = "클릭 완료!"; // 버튼 글씨를 바꿔요
    });
    console.log("테스트 버튼에 이벤트가 안전하게 연결되었어요!");
} else {
    console.log("testButton을 찾을 수 없어요! HTML을 확인해주세요.");
}

📚 11단원 복습문제 - DOM 조작 기억하기

12단원을 배우면서 11단원에서 배운 DOM 조작도 함께 기억해볼까요?

복습문제 1: 이벤트와 DOM 조작을 함께 사용하기

// 11단원에서 배운 DOM 조작과 12단원의 이벤트를 함께 사용해보세요
let 추가버튼 = document.getElementById("addButton");
let 메시지컨테이너 = document.getElementById("messageContainer");

추가버튼.addEventListener("click", function() {
    // 11단원에서 배운 createElement로 새 요소 만들기
    let 새메시지 = document.createElement("p");
    새메시지.textContent = "새로운 메시지가 추가되었어요! 🎉";
    새메시지.style.color = "blue";

    // 11단원에서 배운 appendChild로 요소 추가하기
    메시지컨테이너.appendChild(새메시지);

    console.log("✅ 이벤트로 새 메시지를 DOM에 추가했어요!");
});

해설: 11단원에서 배운 createElement, appendChild 같은 DOM 조작 기능과 12단원의 addEventListener를 함께 사용하면 사용자의 행동(클릭)에 따라 웹페이지의 내용을 동적으로 바꿀 수 있어요! 이렇게 이벤트 처리와 DOM 조작을 결합하면 진짜 interactive한 웹페이지를 만들 수 있답니다.

🤔 심화 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해 addEventListener에 대한 이해를 확인해보겠어요.

Q1. 이벤트 듣는 도우미가 무엇인지 초등학생도 이해할 수 있게 설명해보세요.

정답: 이벤트 듣는 도우미는 특정 행동을 조용히 지켜보고 있다가 그 행동이 일어나면 미리 정해둔 일을 실행하는 도우미예요.

해설: 마치 교실에서 선생님이 "조용히 하세요"라고 말씀하시는 것을 듣고 있다가 그 말씀이 나오면 자동으로 조용해지는 것과 같아요. 웹페이지에서는 사용자가 버튼을 클릭하거나 마우스를 움직이는 행동을 듣고 있다가, 그런 행동이 일어나면 정해진 기능을 실행해주는 역할을 해요.

Q2. 다음 코드에서 잘못된 부분 2곳을 찾고 올바르게 수정해보세요.

let button = document.getElementById("myBtn");
button.addEventListener(click, alert("클릭됨"));

정답: 이벤트 종류에 따옴표가 없고, 기능을 바로 실행하고 있어요.

해설: 첫 번째 문제는 click에 따옴표가 없다는 거예요. 이벤트 종류는 글자이므로 "click"으로 써야 해요. 두 번째 문제는 alert("클릭됨")이 바로 실행된다는 거예요. 기능 자체를 전달해야 하므로 function() { alert("클릭됨"); }로 감싸야 해요.

올바른 코드:

let 버튼 = document.getElementById("myBtn");
버튼.addEventListener("click", function() {
    alert("클릭됨");
});

Q3. 하나의 요소에 여러 개의 이벤트 듣는 도우미를 연결하면 어떻게 되는지 설명해보세요.

정답: 모든 이벤트 듣는 도우미가 연결되어서 해당 이벤트가 발생하면 연결된 순서대로 모든 기능이 실행돼요.

해설: 마치 하나의 현관문에 여러 개의 벨을 연결한 것과 같아요. 초인종을 누르면 연결된 모든 벨이 차례차례 울리는 것처럼, 버튼에 클릭 이벤트를 3개 연결하면 클릭할 때마다 3개 기능이 모두 순서대로 실행돼요.

지금까지 addEventListener의 모든 비밀을 알아보았어요. 이제 여러분도 웹페이지와 사용자가 자연스럽게 소통할 수 있게 해주는 이벤트 전문가가 되었답니다!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
addEventListener의 기본 개념	✅
기본 사용법과 문법	✅
주요 특징과 차이점	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

조금 더 연습하고 싶은 친구들을 위한 추가 문제들이에요!

추가 문제 1. ID가 "sayHello"인 버튼에 클릭 이벤트를 등록해보세요.

// 답:
let 인사버튼 = document.getElementById("sayHello");
인사버튼.addEventListener("click", function() {
    console.log("안녕하세요!");
    alert("반갑습니다!");
});

추가 문제 2. 마우스를 올렸을 때 색깔이 바뀌는 이벤트를 등록해보세요.

// 답:
let 색깔상자 = document.getElementById("colorBox");
색깔상자.addEventListener("mouseover", function() {
    색깔상자.style.backgroundColor = "red";
    console.log("색깔이 빨간색으로 바뀜");
});

추가 문제 3. 안전하게 이벤트를 등록하는 코드를 작성해보세요.

// 답:
let 내버튼 = document.getElementById("testButton");
if (내버튼) {
    내버튼.addEventListener("click", function() {
        console.log("테스트 버튼 클릭됨!");
    });
    console.log("이벤트 등록 완료");
} else {
    console.log("버튼을 찾을 수 없어요!");
}

추가 문제 4. addEventListener의 첫 번째 매개변수와 두 번째 매개변수는 각각 무엇인가요?

답: 첫 번째 매개변수는 이벤트 타입(예: "click", "mouseover")이고, 두 번째 매개변수는 해당 이벤트가 발생했을 때 실행할 함수입니다.

추가 문제 5. 다음 코드에서 잘못된 부분을 찾고 수정해보세요.

let button = document.getElementById("myBtn");
button.addEventListener(click, alert("클릭됨"));

답: 두 가지 문제가 있습니다. 올바른 코드:

let 버튼 = document.getElementById("myBtn");
버튼.addEventListener("click", function() {
    alert("클릭됨");
});

(이벤트 타입에 따옴표 추가, 함수로 감싸기)

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해볼게요.

1단계 과정: 버튼 찾기 → 클릭 이벤트 등록 → 사용자 클릭 시 함수 자동 실행

2단계 과정: 이미지 찾기 → 마우스 올리기 이벤트 등록 → 마우스 빼기 이벤트 등록

3단계 과정: 입력창 찾기 → 변경 이벤트 등록 → 입력값 확인 → 결과 표시

📂 마무리 정보

오늘 배운 12.1.1 내용이 여러분의 자바스크립트 지식 창고에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---