8.1.3 점 표기법 vs 대괄호 표기법 - 두 가지 접근 방법의 차이점

📘 8.1.3 점 표기법 vs 대괄호 표기법 - 두 가지 접근 방법의 차이점

여러분과 함께 하는 이 시간이 참 소중합니다. 지난 시간에 우리는 객체라는 정보의 집에서 데이터를 찾아내는 두 가지 방법을 익혔습니다. 하나는 점(.)을 사용하는 길이었고, 다른 하나는 대괄호[]를 사용하는 길이었지요.

그런데 이제 여러분의 마음에 하나의 질문이 생겼을 것입니다. "언제 어떤 길을 선택해야 할까요?" 오늘은 이 두 방법의 깊은 차이점과 각각이 가진 특별한 힘을 이해해보겠습니다. 마치 같은 목적지로 가는 두 개의 다른 길이 있을 때, 어떤 길이 더 적합한지 알아가는 것처럼 말이지요.

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

두 가지 접근 방법을 깊이 이해하기 위해, 먼저 새로운 용어들을 살펴보겠습니다.

용어	쉬운 설명
점 표기법	점(.)을 사용해서 정보를 찾는 간단하고 직관적인 방법입니다
대괄호 표기법	대괄호[]를 사용해서 정보를 찾는 유연하고 강력한 방법입니다
동적 접근	프로그램이 실행되면서 어떤 정보를 찾을지 바뀔 수 있는 방법입니다
정적 접근	프로그램을 작성할 때 이미 어떤 정보를 찾을지 정해놓는 방법입니다
특수문자	공백( ), 하이픈(-), 골뱅이(@) 같은 특별한 기호들입니다

이 용어들을 마음에 담아두시면 두 접근 방법의 본질을 더 깊이 이해할 수 있을 것입니다.

✨ 두 접근 방법이 무엇인지 알아보기

점 표기법과 대괄호 표기법은 같은 정보의 집으로 향하는 두 개의 다른 문과 같습니다. 둘 다 객체라는 정보함에서 우리가 원하는 정보를 가져온다는 같은 목적을 가지고 있지만, 각각이 가진 특성과 능력은 다릅니다.

점 표기법은 마치 익숙한 지름길 같습니다. 목적지가 분명하고 길이 단순할 때 가장 빠르고 편안합니다. 코드를 읽기도 쉽고 타이핑하기도 간편하지요. 하지만 특별한 상황에서는 갈 수 없는 제약이 있습니다.

대괄호 표기법은 모든 길을 갈 수 있는 만능 도구와 같습니다. 복잡한 상황이나 특수한 조건에서도 어디든 갈 수 있는 놀라운 능력을 가지고 있습니다. 속성 이름에 공백이나 특별한 기호가 있어도, 심지어 속성 이름이 변수에 담겨 있어도 문제없이 찾을 수 있습니다.

따뜻한 이야기: 우리 동네 도서관의 두 가지 검색 방법

우리가 배우는 개념을 더 쉽게 이해하기 위해 동네 도서관의 이야기를 해보겠습니다.

우리 동네 도서관에는 두 가지 다른 검색 방법이 있습니다.

첫 번째 방법은 간단한 터치스크린입니다. 화면에 "수학", "과학", "문학" 같은 간단한 버튼들이 있어서, 버튼을 누르면 해당 분야의 책들이 나타납니다. 이것이 바로 점 표기법(도서관.수학)입니다. 정말 빠르고 쉽지만, 버튼에 없는 복잡한 제목의 책은 찾을 수 없습니다.

두 번째 방법은 똑똑한 음성 검색 시스템입니다. 이 시스템은 "해리포터와 마법사의 돌", "2023년 과학 대백과사전" 같은 복잡한 제목도 알아듣습니다. 이것이 바로 대괄호 표기법(도서관["해리포터와 마법사의 돌"])입니다.

가장 신기한 것은, 이 똑똑한 시스템은 메모지를 읽을 수도 있다는 것입니다. 여러분이 "오늘 읽을 책"이라고 적힌 메모지를 보여주면, 시스템이 메모지를 읽고 그 안에 적힌 실제 책 제목을 찾아서 가져다줍니다. 메모지 내용이 "수학책"에서 "과학책"으로 바뀌면, 자동으로 과학책을 가져다줍니다.

바로 이것이 변수를 사용한 동적 접근의 원리입니다.

🎯 언제 어떤 방법을 사용해야 할까요?

두 접근 방법을 언제 사용해야 하는지 마음으로 이해해보겠습니다.

점 표기법을 사용하는 경우는 일상의 대부분 상황들입니다. 속성 이름이 간단하고 명확할 때, 코드를 빨리 작성하고 읽기 쉽게 만들고 싶을 때, 그리고 다른 사람들이 코드를 봤을 때 쉽게 이해할 수 있게 하고 싶을 때 사용합니다. 마치 일상 대화에서 간단명료하게 말하는 것처럼 말이지요.

대괄호 표기법을 사용하는 경우는 특별한 상황들입니다. 속성 이름에 공백이나 하이픈(-) 같은 특별한 기호가 들어있을 때, 속성 이름이 숫자로 시작할 때, 그리고 가장 중요하게는 속성 이름이 변수에 저장되어 있어서 프로그램이 실행되면서 바뀔 수 있을 때 사용합니다.

특히 이런 이름들은 대괄호 방법만 사용할 수 있습니다: "내 취미", "super-car", "1st-prize", "best@friend" 같은 특별한 이름들 말이지요.

⚙️ 두 가지 방법 사용법 비교하기

두 접근 방법의 기본 사용법을 나란히 비교해보겠습니다.

기본적인 정보 가져오기:

// 점 표기법 - 간단하고 직관적인 방법
let 정보1 = 객체.속성이름;

// 대괄호 표기법 - 유연하고 강력한 방법  
let 정보2 = 객체["속성이름"];

특별한 상황들:

// 공백이 있는 속성 이름 (대괄호만 가능)
let 정보3 = 객체["속성 이름"];

// 변수를 사용한 찾기 (대괄호만 가능)
let 변수 = "취미";
let 정보4 = 객체[변수];

// 특별한 기호가 있는 속성 이름 (대괄호만 가능)  
let 정보5 = 객체["super-hobby"];

🧪 실습으로 익혀보기

조용히 흘러가는 강물처럼, 이제 천천히 실습을 통해 두 접근 방법의 차이점과 사용법을 직접 경험해보겠습니다.

🔹 실습 1: 같은 정보함, 다른 방법 - 기본 비교

첫 번째 실습에서는 두 방법이 정말로 같은 정보를 가져오는지 직접 확인해보겠습니다.

실습1) 우리 반 친구 정보를 "두 가지 방법으로 확인하기"를 해보겠습니다

// 우리 반 친구의 정보를 담은 정보 저장소 만들기
let bestFriend = {
    name: "지우",        // 친구 이름
    age: 11,             // 친구 나이
    hobby: "축구",       // 친구 취미
    grade: 5             // 친구 학년
};

console.log("=== 내 친구 소개해요! ===");

// 점 표기법으로 정보 가져오기 (간단한 방법)
console.log("점 방법으로 이름 찾기:", bestFriend.name);      // "지우"
console.log("점 방법으로 나이 찾기:", bestFriend.age);       // 11
console.log("점 방법으로 취미 찾기:", bestFriend.hobby);     // "축구"

console.log("\n=== 대괄호 방법으로도 같은 정보 찾기 ===");

// 대괄호 표기법으로 같은 정보 가져오기 (만능 방법)
console.log("대괄호 방법으로 이름 찾기:", bestFriend["name"]);   // "지우" (똑같은 정보!)
console.log("대괄호 방법으로 나이 찾기:", bestFriend["age"]);    // 11 (똑같은 정보!)
console.log("대괄호 방법으로 취미 찾기:", bestFriend["hobby"]);  // "축구" (똑같은 정보!)

console.log("\n=== 정말로 같은 정보인지 확인해보기 ===");
console.log("이름이 같나요?", bestFriend.name === bestFriend["name"]);     // true
console.log("나이가 같나요?", bestFriend.age === bestFriend["age"]);       // true
console.log("취미가 같나요?", bestFriend.hobby === bestFriend["hobby"]);   // true

console.log("두 방법으로 가져온 정보가 완전히 똑같네요!");

이 과정을 통해 우리는 두 방법이 완전히 똑같은 정보를 가져온다는 것을 확인할 수 있습니다. 마치 같은 방에 정문과 뒷문이 있는 것처럼, 어느 방법으로 접근해도 같은 정보를 만날 수 있습니다.

🔹 실습 2: 대괄호 방법의 특별한 능력 - 특수한 이름들

두 번째 실습에서는 점 방법으로는 불가능하지만 대괄호 방법으로는 가능한 특별한 상황들을 알아보겠습니다.

실습2) 게임 아이템 정보에서 "특별한 이름들 다루기"를 해보겠습니다

// 특별한 게임 캐릭터 정보 저장소 - 복잡한 속성 이름들이 들어있습니다
let gameHero = {
    name: "용사",                    // 일반적인 속성 이름
    "character level": 25,           // 공백이 들어간 속성 이름
    "magic-power": 100,              // 하이픈이 들어간 속성 이름  
    "1st-weapon": "번개검",          // 숫자로 시작하는 속성 이름
    "special@skill": "드래곤 소환"   // 특별한 기호가 들어간 속성 이름
};

console.log("=== 특별한 게임 캐릭터 정보 ===");

// 일반적인 속성은 점 방법으로도 가져올 수 있습니다
console.log("캐릭터 이름:", gameHero.name);  // "용사" (점 방법 OK!)

console.log("\n=== 특별한 속성들은 대괄호 방법만 가능합니다 ===");

// 특별한 속성들은 대괄호 방법만 사용할 수 있습니다
console.log("캐릭터 레벨:", gameHero["character level"]);    // 25
console.log("마법 파워:", gameHero["magic-power"]);          // 100  
console.log("첫 번째 무기:", gameHero["1st-weapon"]);        // "번개검"
console.log("특수 기술:", gameHero["special@skill"]);        // "드래곤 소환"

console.log("\n=== 점 방법으로는 특별한 속성을 가져올 수 없습니다 ===");
// 점 방법으로는 이런 특별한 속성에 접근할 수 없습니다 (에러가 납니다!)
// console.log(gameHero.character level);   // 문법 오류!
// console.log(gameHero.magic-power);       // 문법 오류!

console.log("대괄호 방법은 정말 만능입니다! 어떤 특별한 이름도 찾을 수 있어요!");

이 실습을 통해 대괄호 방법이 점 방법보다 훨씬 유연하고 강력하다는 것을 알 수 있습니다. 마치 만능 도구처럼 어떤 특별한 이름의 정보도 접근할 수 있는 것이지요.

🔹 실습 3: 똑똑한 변수 시스템 - 변수로 동적 접근

세 번째 실습에서는 대괄호 방법의 가장 놀라운 능력인 변수 읽기를 배워보겠습니다.

실습3) 성적 조회 시스템에서 "변수로 과목 찾기"를 해보겠습니다

// 우리 반 학생들의 과목별 점수 저장소
let myGrades = {
    korean: 85,     // 국어 점수
    math: 92,       // 수학 점수  
    science: 88,    // 과학 점수
    english: 90,    // 영어 점수
    art: 95         // 미술 점수
};

console.log("=== 똑똑한 성적 조회 시스템 ===");

// 변수에 어떤 과목을 조회할지 저장하기
let selectedSubject = "math";  // 변수에 "math"라고 저장

console.log("선택한 과목:", selectedSubject);

// 변수를 사용해서 정보 찾기 (대괄호 방법만 가능!)
console.log("해당 과목 점수:", myGrades[selectedSubject]);  // 92 (수학 점수)

console.log("\n=== 변수 내용을 바꿔보기 ===");

// 변수 내용을 "korean"으로 바꾸기
selectedSubject = "korean";  
console.log("바뀐 선택 과목:", selectedSubject);  
console.log("바뀐 과목 점수:", myGrades[selectedSubject]);  // 85 (국어 점수)

// 또 다른 과목으로 바꿔보기
selectedSubject = "art";  
console.log("또 바뀐 선택 과목:", selectedSubject);
console.log("또 바뀐 과목 점수:", myGrades[selectedSubject]);  // 95 (미술 점수)

console.log("\n=== 점 방법으로는 변수를 읽을 수 없습니다 ===");
// 점 방법으로는 변수를 읽을 수 없습니다
// console.log(myGrades.selectedSubject);  // undefined (selectedSubject라는 속성을 찾게 됨)

console.log("대괄호 방법은 변수도 읽을 수 있습니다! 정말 똑똑하지요?");

console.log("\n=== 실시간으로 다른 과목들도 확인해보기 ===");
let subjects = ["korean", "math", "science", "english", "art"];
for (let i = 0; i < subjects.length; i++) {
    let currentSubject = subjects[i];
    console.log(currentSubject + " 점수:", myGrades[currentSubject]);
}

이 실습은 대괄호 방법의 진정한 능력을 보여줍니다. 마치 변수에 적힌 내용을 읽어서 그에 맞는 정보를 찾아주는 정말 똑똑한 시스템과 같습니다.

🧠 자주 하는 실수와 조심할 점

두 접근 방법을 사용할 때 자주 하는 실수들을 미리 알아두면 더 안전하고 정확한 코드를 만들 수 있습니다.

❌ 실수 1: 특별한 이름에 점 방법 사용하려고 하기

// 우리 반 친구들의 취미 정보 저장소
let friendsHobbies = {
    name: "수빈",                // 일반적인 이름
    "best hobby": "그림그리기",   // 공백이 들어간 이름
    "second-choice": "독서",      // 하이픈이 들어간 이름
    "3rd-favorite": "축구"       // 숫자와 하이픈이 들어간 이름
};

console.log("=== 점 방법 vs 대괄호 방법 ===");

// ❌ 틀린 방법: 특별한 이름에 점 방법 사용
// console.log(friendsHobbies.best hobby);     // 문법 오류!
// console.log(friendsHobbies.second-choice);  // 문법 오류!

// ✅ 올바른 방법들
console.log("친구 이름:", friendsHobbies.name);                    // "수빈" (점 방법 OK)
console.log("가장 좋아하는 취미:", friendsHobbies["best hobby"]);   // "그림그리기"
console.log("두 번째 선택:", friendsHobbies["second-choice"]);      // "독서"
console.log("세 번째 좋아하는:", friendsHobbies["3rd-favorite"]);   // "축구"

console.log("특별한 이름들은 대괄호 방법으로만 접근할 수 있습니다!");

특별한 기호나 공백이 들어간 이름은 반드시 대괄호 방법을 사용해야 합니다. 점 방법으로는 접근할 수 없습니다.

❌ 실수 2: 변수를 점 방법으로 사용하려고 하기

// 우리 집 애완동물들 정보 저장소
let ourPets = {
    dog: "멍멍이",    // 강아지 이름
    cat: "야옹이",    // 고양이 이름
    bird: "짹짹이"    // 새 이름
};

let petType = "dog";  // 변수에 "dog"라고 저장

console.log("=== 변수 사용하기 ===");

// ❌ 틀린 방법: 점 방법으로 변수 사용
console.log("점 방법으로 변수 읽기:", ourPets.petType);  // undefined (petType이라는 속성을 찾음)

// ✅ 올바른 방법: 대괄호 방법으로 변수 사용  
console.log("대괄호 방법으로 변수 읽기:", ourPets[petType]);  // "멍멍이" (변수 내용인 "dog" 속성에 접근)

console.log("\n=== 변수 내용 바꿔보기 ===");
// 변수 내용을 바꿔서 다른 동물 찾기
petType = "cat";
console.log("고양이 이름:", ourPets[petType]);    // "야옹이"

petType = "bird";
console.log("새 이름:", ourPets[petType]);        // "짹짹이"

console.log("변수는 대괄호 방법으로만 읽을 수 있습니다!");

변수를 사용할 때는 반드시 대괄호 방법을 써야 합니다. 점 방법은 변수 이름 자체를 속성 이름으로 생각해버립니다.

❌ 실수 3: 대괄호에서 따옴표 규칙 헷갈리기

// 학교 동아리 정보 저장소
let schoolClubs = {
    soccer: "축구부",     // 축구부
    music: "음악부",      // 음악부
    art: "미술부"         // 미술부
};

let clubChoice = "soccer";  // 변수에 "soccer"라고 저장

console.log("=== 따옴표 사용 규칙 ===");

// ❌ 틀린 방법들
// console.log(schoolClubs[soccer]);        // 에러! soccer 변수가 정의되지 않음
// console.log(schoolClubs["clubChoice"]);  // "clubChoice" 문자열을 속성 이름으로 찾음 → undefined

// ✅ 올바른 방법들
console.log("직접 이름 쓰기:", schoolClubs["soccer"]);   // "축구부" (문자열이니까 따옴표 필요)
console.log("변수 사용하기:", schoolClubs[clubChoice]); // "축구부" (변수니까 따옴표 없음)

console.log("\n=== 따옴표 규칙 정리 ===");
console.log("음악부:", schoolClubs["music"]);            // 직접 이름 → 따옴표 필요
clubChoice = "art";
console.log("미술부:", schoolClubs[clubChoice]);         // 변수 사용 → 따옴표 없음

console.log("문자열엔 따옴표, 변수엔 따옴표 없이!");

대괄호 안에서는 문자열일 때는 따옴표를 쓰고, 변수일 때는 따옴표를 쓰지 않아야 합니다.

💪 보너스 문제: 좀 더 어려운 동적 접근

보너스 문제는 조금 어려우니까, 기본 내용을 모두 이해한 분들만 도전해보세요.

Q1. 사용자 입력에 따라 다른 정보를 보여주는 시스템 만들어보기

let studentInfo = {
    name: "김철수",
    grade: 5,
    hobby: "축구",
    subject: "수학"
};

// 사용자 질문을 배열로 만들어서 처리하기
let questions = ["name", "grade", "hobby"];

console.log("학생 정보 질의응답 시스템:");
for(let i = 0; i < questions.length; i++) {
    let question = questions[i];
    let answer = studentInfo[question];
    console.log("질문: " + question + " → 답변: " + answer);
}

이 보너스 문제는 대괄호 표기법의 동적 접근 기능을 활용한 고급 활용법입니다.

✏️ 연습문제로 실력 기르기

한 사람 한 사람의 노력이 모여 큰 강을 이루듯이, 이제 배운 내용을 연습문제를 통해서 차근차근 익혀보겠습니다.

Q1. 두 방법으로 같은 정보 찾기

// 좋아하는 계절 정보 저장소 만들기
let favoriteSeasons = {
    spring: "벚꽃이 예뻐요",
    summer: "수영을 할 수 있어요", 
    autumn: "단풍이 아름다워요",
    winter: "눈사람을 만들 수 있어요"
};

console.log("=== 두 방법으로 같은 정보 찾기 ===");

// 점 방법과 대괄호 방법으로 같은 정보 가져오기
console.log("점 방법 - 봄:", favoriteSeasons.spring);
console.log("대괄호 방법 - 봄:", favoriteSeasons["spring"]);
console.log("결과가 똑같나요?", favoriteSeasons.spring === favoriteSeasons["spring"]);

Q2. 특별한 이름의 정보 다루기

// 게임 아이템 정보 저장소 (특별한 이름들 포함)
let gameItems = {
    sword: "기본 검",
    "magic sword": "마법 검",
    "super-shield": "슈퍼 방패",
    "1st-prize": "1등 상품"
};

console.log("=== 특별한 이름들 찾기 ===");

// 일반적인 이름은 점 방법으로 가능
console.log("기본 검:", gameItems.sword);              

// 특별한 이름들은 대괄호 방법만 가능
console.log("마법 검:", gameItems["magic sword"]);      
console.log("슈퍼 방패:", gameItems["super-shield"]);   
console.log("1등 상품:", gameItems["1st-prize"]);       

Q3. 변수로 동적 찾기

// 요일별 급식 메뉴 저장소
let lunchMenu = {
    monday: "김치찌개",
    tuesday: "불고기",
    wednesday: "생선구이",
    thursday: "카레라이스",
    friday: "짜장면"
};

console.log("=== 변수로 급식 확인하기 ===");

// 변수를 사용해서 동적으로 찾기
let today = "tuesday";
console.log("오늘 급식:", lunchMenu[today]);

// 변수 내용 바꾸기
today = "friday";  
console.log("금요일 급식:", lunchMenu[today]);

// 모든 요일 급식 확인하기
let weekdays = ["monday", "tuesday", "wednesday", "thursday", "friday"];
for (let i = 0; i < weekdays.length; i++) {
    let day = weekdays[i];
    console.log(day + " 급식:", lunchMenu[day]);
}

🔄 복습하기: 지난 시간에 배운 속성 접근과 삭제

이전 단원에서 배운 속성 접근과 삭제를 조용히 복습해보겠습니다.

복습 문제: 두 가지 접근 방법과 삭제를 함께 사용해서 "개인 일정 관리 시스템" 만들기

// 개인 일정 관리 객체 (지난 시간 내용 포함)
let personalSchedule = {
    "morning task": "운동하기",
    lunch: "친구와 만나기",
    "afternoon-plan": "숙제하기",
    evening: "독서",
    "temp-note": "삭제 예정"
};

console.log("📅 개인 일정 관리 시스템");

// 기본 정보 확인 (지난 시간 배운 속성 접근)
console.log("\n=== 오늘의 일정 확인 ===");
console.log("점심 일정:", personalSchedule.lunch);  // 점 표기법
console.log("저녁 일정:", personalSchedule["evening"]);  // 대괄호 표기법

// 특수 이름들은 대괄호만 가능 (오늘 배운 내용)
console.log("아침 일정:", personalSchedule["morning task"]);
console.log("오후 일정:", personalSchedule["afternoon-plan"]);

// 사용자가 선택한 시간대의 일정 보여주기 (변수 활용)
let selectedTime = "lunch";
console.log("\n=== " + selectedTime + " 시간 일정 ===");
console.log(selectedTime + " 할 일:", personalSchedule[selectedTime]);

// 시간대 변경
selectedTime = "evening";
console.log(selectedTime + " 할 일:", personalSchedule[selectedTime]);

// 불필요한 정보 삭제하기 (지난 시간 배운 delete)
console.log("\n=== 임시 메모 삭제 ===");
console.log("삭제 전:", personalSchedule);
delete personalSchedule["temp-note"];
console.log("삭제 후:", personalSchedule);

console.log("\n🎯 결론: 두 접근 방법을 상황에 맞게 사용하면 완벽한 정보 관리가 가능합니다!");

정답 설명: 지난 시간에 배운 기본적인 속성 접근과 delete 기능을 오늘 배운 두 접근 방법의 차이점과 조합하면 더 완벽한 객체 관리 시스템을 만들 수 있습니다. 일반적인 속성은 점 표기법으로, 특수한 속성이나 변수 사용이 필요한 경우는 대괄호 표기법으로 접근하면 됩니다.

지금까지 점 표기법과 대괄호 표기법의 차이점과 사용법을 차근차근 배워보았습니다. 이제 여러분도 상황에 맞는 올바른 접근 방법을 선택해서 객체 정보함을 효율적으로 다룰 수 있게 되었습니다. 🎉✨

✅ 학습 완료 체크리스트

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

학습 내용	이해했나요?
두 표기법의 기본 차이점	✅
점 표기법의 특징과 한계	✅
대괄호 표기법의 장점	✅
변수를 이용한 동적 접근	✅
자주 하는 실수들	✅
실전 예제 이해	✅

🔄 단계별 진행 과정 정리

지금까지 배운 내용을 단계별로 다시 한번 정리해보겠습니다.

1단계: 1) 기본 객체 생성 → 2) 점 표기법으로 속성 접근 → 3) 대괄호 표기법으로 같은 속성 접근 → 4) 두 결과가 동일함 확인 → 5) 결과 비교

2단계: 1) 특수 문자 포함 속성들로 객체 생성 → 2) 대괄호 표기법으로 특수 속성 접근 → 3) 각 특수 속성값 출력 → 4) 점 표기법 불가능함 주석으로 표시 → 5) 특수 상황에서 대괄호 필수임 확인

3단계: 1) 기본 객체 생성 → 2) 속성 이름을 변수에 저장 → 3) 대괄호 표기법으로 변수 사용하여 접근 → 4) 변수값 변경 후 다시 접근 → 5) 점 표기법으로는 변수 사용 불가함 확인

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---