8.2.2 목록 안에 정보 상자 넣기 - 여러 친구들의 정보 카드 정리하기

📘 8.2.2 목록 안에 정보 상자 넣기 - 여러 친구들의 정보 카드 정리하기

여러분과 함께 하는 이 시간이 또 다른 깨달음의 순간이 되기를 바랍니다. 지난 시간에 우리는 한 상자 안에 여러 개의 보물 목록을 넣는 방법을 배웠습니다. 이번에는 반대로 여러 개의 정보 상자들을 줄세워서 관리하는 방법을 배울 것입니다.

마치 우리 반 친구들의 정보 카드를 순서대로 정리해서 책으로 만드는 것과 같습니다. 각 카드(정보 상자)에는 친구의 이름, 나이, 취미 등이 적혀있고, 이 카드들을 순서대로 모아놓은 것(목록)이 우리의 친구 명단이 되는 것이지요.

🧠 먼저 용어를 알아볼까요?

목록 안의 정보 상자를 이해하기 위해 필요한 용어들을 마음에 담아보겠습니다.

용어	의미
카드 목록	목록의 각 칸에 정보 카드(정보 상자)가 들어있는 것
목록 안의 카드	목록 안에 여러 정보 카드가 순서대로 들어있는 구조
번호로 찾기	목록에서 몇 번째 카드를 가져오는 방법
연달아 접근	목록[번호].정보 형태로 단계별 접근하는 방법
모두 돌아보기	목록의 모든 카드를 하나씩 차례대로 확인하는 것

이 용어들을 이해하면 여러 개의 정보를 체계적으로 관리하는 방법을 쉽게 배울 수 있습니다.

✨ 목록 안 정보 상자의 핵심 개념

목록 안에 정보 상자를 넣는다는 것은 같은 종류의 여러 정보들을 순서대로 정리해서 관리하는 것을 의미합니다. 예를 들어, 우리 반 친구들의 정보를 관리할 때 각 친구마다 이름, 나이, 좋아하는 과목 등의 정보가 있지요? 이런 정보들을 각각 하나의 카드(정보 상자)로 만들고, 이 카드들을 순서대로 모아놓으면 전체 명단(목록)이 됩니다.

이 방법의 가장 큰 장점은 같은 구조의 정보들을 체계적으로 관리할 수 있다는 것입니다. 모든 친구 카드가 같은 형식(이름, 나이, 좋아하는 과목)으로 되어 있어서, 특정 정보를 찾거나 비교하기가 정말 쉬워집니다.

또한 순서가 있어서 관리하기 편합니다. "첫 번째 친구는 누구?", "마지막 친구의 나이는?" 같은 질문에 쉽게 답할 수 있고, 새로운 친구가 전학 오면 맨 뒤에 카드를 추가하기만 하면 되지요.

따뜻한 이야기: 학급 앨범의 친구 소개 페이지

목록 안의 정보 상자를 더 쉽게 이해하기 위해 학급 앨범의 친구 소개 페이지에 비유해보겠습니다.

여러분이 졸업 앨범을 만든다고 생각해보세요. 앨범에는 친구 소개 섹션이 있습니다. 이 섹션은 여러 페이지로 구성되어 있고, 각 페이지에는 한 친구의 정보가 똑같은 형식으로 정리되어 있습니다.

첫 번째 페이지에는 철수의 정보가 있습니다: 이름, 나이, 좋아하는 과목, 장래희망 등이 예쁘게 정리되어 있지요. 두 번째 페이지에는 영희의 정보가 같은 형식으로, 세 번째 페이지에는 민수의 정보가 또 같은 형식으로 되어 있습니다.

이때 전체 친구 소개 섹션이 바로 목록이고, 각 페이지가 정보 상자입니다. 앨범을 보는 사람이 "세 번째 친구의 장래희망이 뭐지?"라고 궁금할 때는 세 번째 페이지를 펼쳐서 장래희망 부분을 보면 되는 것이지요.

프로그래밍에서도 마찬가지입니다. 친구들[2].장래희망처럼 세 번째 친구(인덱스 2)의 장래희망 정보에 쉽게 접근할 수 있습니다.

🎯 목록 안 정보 상자를 사용하는 이유

그렇다면 우리는 왜 목록 안에 정보 상자를 넣어서 사용할까요? 정말 중요한 이유들이 있습니다.

첫째, 현실 세계를 자연스럽게 표현할 수 있습니다. 실제로 학교에는 여러 학생이 있고, 도서관에는 여러 책이 있고, 상점에는 여러 상품이 있잖아요? 이런 "여러 개의 비슷한 것들"을 코드로 표현할 때 목록 안의 정보 상자가 정말 완벽합니다.

둘째, 체계적인 정보 관리가 가능합니다. 모든 정보가 같은 구조로 되어 있어서, 특정 조건에 맞는 정보를 찾거나, 모든 정보를 한 번에 처리하기가 정말 쉬워집니다. "나이가 12살인 친구 찾기", "모든 친구의 이름 출력하기" 같은 작업을 간단하게 할 수 있습니다.

셋째, 확장성이 뛰어납니다. 새로운 친구가 전학 오면 목록 끝에 정보 상자만 추가하면 되고, 기존 코드는 전혀 수정할 필요가 없습니다. 마치 앨범에 새 페이지를 추가하는 것처럼 간단하지요.

⚙️ 기본 문법 살펴보기

목록 안에 정보 상자를 넣고 사용하는 기본적인 방법을 알아보겠습니다.

목록 안에 여러 정보 상자 정의하기:

let 목록이름 = [
    {속성1: 값1, 속성2: 값2},  // 첫 번째 정보 상자
    {속성1: 값3, 속성2: 값4},  // 두 번째 정보 상자  
    {속성1: 값5, 속성2: 값6}   // 세 번째 정보 상자
];

특정 정보 상자 전체에 접근하기:

let 선택된정보상자 = 목록이름[인덱스번호];

특정 정보 상자의 특정 속성에 접근하기:

let 특정값 = 목록이름[인덱스번호].속성이름;

새로운 정보 상자 추가하기:

목록이름.push({속성1: 새값1, 속성2: 새값2});

🧪 실습으로 익혀보기

강물처럼 자연스럽게, 이제 실제 예제를 통해 목록 안의 정보 상자를 어떻게 사용하는지 자세히 알아보겠습니다.

🔹 실습 1: 우리 반 친구들 명단 만들기

단순함 속에서 가장 아름다운 질서를 발견할 수 있습니다. 첫 번째 실습에서는 가장 기본적인 형태인 학생 명단을 만들어보겠습니다.

// 우리 반 친구들의 정보 카드 만들기
let ourClassmates = [
    {name: "철수", age: 12, hobby: "축구", grade: 6},      // 첫 번째 친구 카드
    {name: "영희", age: 11, hobby: "그림그리기", grade: 5}, // 두 번째 친구 카드
    {name: "민수", age: 12, hobby: "독서", grade: 6},      // 세 번째 친구 카드
    {name: "지수", age: 11, hobby: "피아노", grade: 5}     // 네 번째 친구 카드
];

console.log("우리 반 친구들 소개:");
console.log("전체 명단:", ourClassmates);

// 특정 친구의 정보 확인하기
console.log("첫 번째 친구:", ourClassmates[0]);           // 철수의 모든 정보
console.log("첫 번째 친구 이름:", ourClassmates[0].name);  // "철수"
console.log("두 번째 친구 취미:", ourClassmates[1].hobby); // "그림그리기"
console.log("세 번째 친구 나이:", ourClassmates[2].age);   // 12

// 전체 통계 확인하기
console.log("총 친구 수:", ourClassmates.length);         // 4명

// 마지막 친구 정보 확인하기
let lastIndex = ourClassmates.length - 1;                 // 마지막 인덱스 계산
console.log("마지막 친구 이름:", ourClassmates[lastIndex].name); // "지수"

이 과정을 단계별로 살펴보면, 먼저 같은 구조를 가진 여러 친구 정보 상자들을 목록에 담아서 만듭니다. 그다음 전체 명단을 확인하고, 인덱스를 사용해서 특정 친구의 정보에 접근해보지요. 각 친구의 개별 속성에도 접근할 수 있고, 전체 친구 수도 쉽게 알 수 있습니다.

🔹 실습 2: 동적으로 친구 추가하기 - 전학생 환영하기

새로운 만남은 늘 우리 삶을 풍요롭게 합니다. 두 번째 실습에서는 기존 명단에 새로운 친구를 추가하는 방법을 알아보겠습니다.

// 처음에는 적은 수의 친구들로 시작
let classmates = [
    {name: "수민", age: 12, subject: "수학", isNew: false},  // 기존 학생
    {name: "하늘", age: 11, subject: "과학", isNew: false}   // 기존 학생
];

console.log("학기 초 우리 반:");
console.log("처음 친구 수:", classmates.length);          // 현재 목록 길이로 친구 수 확인
console.log("기존 친구들:", classmates);

// 새로운 전학생이 왔어요!
console.log("🎉 새로운 친구가 전학 왔어요!");
classmates.push({name: "별이", age: 12, subject: "음악", isNew: true}); // push로 새 정보상자 추가

console.log("전학생 추가 후:");
console.log("현재 친구 수:", classmates.length);          // 3명

// 새로 온 친구 소개하기
let newFriendIndex = classmates.length - 1;               // 마지막 인덱스 = 새 친구
console.log("새 친구 이름:", classmates[newFriendIndex].name);     // "별이"
console.log("새 친구 좋아하는 과목:", classmates[newFriendIndex].subject); // "음악"

// 또 다른 전학생이 왔어요!
console.log("🎉 또 다른 친구가 전학 왔어요!");  
classmates.push({name: "바다", age: 11, subject: "체육", isNew: true}); // 또 다른 정보상자 추가

console.log("최종 친구 수:", classmates.length);          // 4명
console.log("최종 명단:", classmates);

이 실습을 통해 우리는 목록에 새로운 정보 상자를 동적으로 추가하는 방법을 배울 수 있습니다. push() 기능을 사용해서 언제든지 새로운 친구를 명단에 추가할 수 있고, 추가된 친구의 정보에도 바로 접근할 수 있습니다.

🔹 실습 3: 모든 친구들 소개하기 - 반복문 활용

반복되는 것들 속에서 조화와 아름다움을 발견할 수 있습니다. 세 번째 실습에서는 반복문을 사용해서 모든 친구들의 정보를 차례대로 출력해보겠습니다.

// 다양한 친구들의 정보가 담긴 명단
let friends = [
    {name: "토리", type: "강아지", age: 3, isCute: true},    // 반려동물 친구
    {name: "나비", type: "고양이", age: 2, isCute: true},    // 반려동물 친구  
    {name: "코코", type: "앵무새", age: 1, isCute: true}     // 반려동물 친구
];

console.log("우리 동네 동물 친구들 소개:");
console.log("총 " + friends.length + "마리의 친구들이 있어요!"); // length로 전체 개수 확인

// for문으로 모든 친구들을 하나씩 소개하기
for (let i = 0; i < friends.length; i++) {                 // 0부터 목록 길이까지 반복
    console.log("🐾 " + (i + 1) + "번째 친구 소개:");      // 순서 표시 (i+1로 1부터 시작)
    console.log("이름: " + friends[i].name);               // i번째 친구의 이름
    console.log("종류: " + friends[i].type);               // i번째 친구의 종류
    console.log("나이: " + friends[i].age + "살");         // i번째 친구의 나이

    // 귀여운지 확인하기
    if (friends[i].isCute) {                               // i번째 친구의 isCute 속성 확인
        console.log("정말 귀여운 친구예요! 😍");
    }

    console.log("---");  // 구분선으로 보기 쉽게
}

console.log("모든 친구들 소개가 끝났어요! 🎉");

이 실습은 반복문의 진정한 힘을 보여줍니다. 몇 마리의 친구가 있든 상관없이 모든 친구를 차례대로 소개할 수 있습니다. 심지어 각 친구의 특성에 따라 다른 메시지를 보여줄 수도 있습니다. 마치 실제로 친구들을 한 명씩 소개하는 것 같지요.

🧚‍♀️ 이야기로 다시 배우기: 우리 학교의 학생 명부 관리

지금까지 배운 내용을 따뜻한 이야기로 다시 정리해보겠습니다.

우리 학교에는 정말 많은 학생들이 있었습니다. 각 학생은 자신만의 특별한 정보를 가지고 있었지요. 학교 사무실에서는 이 모든 학생들의 정보를 체계적으로 관리해야 했습니다.

학교 담당 선생님은 정말 똑똑한 방법을 생각해냈습니다. 각 학생마다 개인 정보 카드를 만드는 것이었지요. 카드에는 학생의 이름, 나이, 학년, 좋아하는 과목, 그리고 특별한 재능이 적혀있었습니다.

예를 들어, 첫 번째 카드에는 "이름: 철수, 나이: 12, 학년: 6, 좋아하는 과목: 수학, 특별재능: 계산"이라고 적혀있었고, 두 번째 카드에는 "이름: 영희, 나이: 11, 학년: 5, 좋아하는 과목: 미술, 특별재능: 그림그리기"라고 적혀있었습니다.

이 카드들을 학급 앨범에 순서대로 정리해놨습니다. 누군가 "세 번째 학생의 좋아하는 과목이 뭐지?"라고 물어보면, 앨범의 세 번째 페이지를 펼쳐서 좋아하는 과목 부분을 확인하면 바로 답할 수 있었지요!

새로운 학생이 전학 오면? 간단했습니다! 새로운 정보 카드를 만들어서 앨범 맨 뒤에 추가하기만 하면 되었습니다.

학부모 참관일에 모든 학생 소개 행사를 할 때는? 앨범을 처음부터 끝까지 넘겨가면서 각 학생을 차례대로 소개하면 되었답니다.

이런 체계적인 명부 관리 시스템 덕분에 우리 학교는 수백 명의 학생들을 효율적으로 관리할 수 있었습니다.

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

목록 안의 정보 상자를 사용할 때 자주 하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있습니다.

❌ 실수 1: 인덱스와 속성 접근 순서 바꾸기

// 우리반 책 목록
let bookList = [
    {title: "해리포터", pages: 300, author: "롤링"},
    {title: "어린왕자", pages: 150, author: "생텍쥐페리"}
];

// ❌ 틀린 방법: 속성을 먼저 접근하려고 시도
// console.log(bookList.title[0]); // 에러! bookList에는 title 속성이 없어요

// ✅ 올바른 방법: 인덱스 먼저, 그 다음 속성
console.log("첫 번째 책 제목:", bookList[0].title);    // "해리포터"
console.log("두 번째 책 저자:", bookList[1].author);   // "생텍쥐페리"
console.log("첫 번째 책 페이지:", bookList[0].pages);  // 300

목록에 접근할 때는 반드시 먼저 인덱스로 특정 정보 상자를 선택하고, 그 다음에 점 표기법으로 속성에 접근해야 합니다.

❌ 실수 2: 반복문에서 length 대신 고정 숫자 사용하기

// 애완동물 목록
let pets = [
    {name: "뽀삐", type: "강아지", color: "갈색"},
    {name: "나비", type: "고양이", color: "검정"},
    {name: "코코", type: "햄스터", color: "흰색"}
];

// ❌ 위험한 방법: 고정 숫자 사용
for (let i = 0; i < 3; i++) {  // 만약 애완동물이 늘어나면?
    console.log(pets[i].name);
}

// ✅ 안전한 방법: length 사용 (목록 크기에 자동으로 맞춤)
for (let i = 0; i < pets.length; i++) {          // pets 목록의 길이만큼 반복
    console.log("애완동물 이름:", pets[i].name);   // i번째 애완동물의 이름
    console.log("종류:", pets[i].type);           // i번째 애완동물의 종류
    console.log("색깔:", pets[i].color);          // i번째 애완동물의 색깔
    console.log("---");
}

// 새로운 애완동물 추가 테스트
pets.push({name: "금붕어", type: "물고기", color: "금색"}); // 새 정보상자 추가
console.log("추가 후 총 애완동물 수:", pets.length); // 이제 4마리!

반복문에서는 항상 length를 사용해야 합니다. 그래야 목록의 크기가 바뀌어도 코드를 수정할 필요가 없습니다.

❌ 실수 3: 빈 목록에서 첫 번째 정보 상자 접근하려고 하기

// 새 학기가 시작된 빈 교실
let newClassroom = [];  // 아직 학생이 없는 빈 목록

// ❌ 위험한 접근: 빈 목록의 첫 번째 요소에 접근
// console.log(newClassroom[0].name); // 에러! undefined.name에 접근

// ✅ 안전한 방법: 목록에 요소가 있는지 먼저 확인
if (newClassroom.length > 0) {                      // 목록에 요소가 있는지 확인
    console.log("첫 번째 학생:", newClassroom[0].name);
} else {
    console.log("아직 학생이 없어요. 곧 새 친구들이 올 거예요!");
}

// 학생들이 등교하기 시작!
newClassroom.push({name: "철수", age: 12, subject: "수학"}); // 첫 번째 학생 추가
newClassroom.push({name: "영희", age: 11, subject: "과학"}); // 두 번째 학생 추가

console.log("학생들 등교 완료!");
console.log("현재 학생 수:", newClassroom.length);           // 목록 길이로 학생 수 확인
console.log("첫 번째 학생:", newClassroom[0].name);          // 이제 안전!

빈 목록에서 요소에 접근하려고 하면 오류가 발생합니다. 항상 목록에 요소가 있는지 먼저 확인하는 습관을 기르세요.

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

연습을 통해 배움이 깊어지고, 깊어진 배움이 지혜가 됩니다. 이제 배운 내용을 연습문제를 통해 차근차근 익혀보겠습니다.

Ex1) 과일가게의 과일들을 목록으로 만들고 접근해보자

자연의 선물인 과일들도 저마다의 특성이 있습니다. 과일가게의 과일 목록을 만들어보겠습니다.

// 과일가게의 과일 목록 만들기
let fruitShop = [
    {name: "사과", color: "빨강", price: 1000},     // 첫 번째 과일 정보상자
    {name: "바나나", color: "노랑", price: 800}     // 두 번째 과일 정보상자
];

// 과일 정보 출력해보기
console.log("과일가게 목록:", fruitShop);                    // 전체 목록 출력
console.log("첫 번째 과일:", fruitShop[0].name);             // 첫 번째 과일의 name 속성
console.log("두 번째 과일 색깔:", fruitShop[1].color);       // 두 번째 과일의 color 속성
console.log("첫 번째 과일 가격:", fruitShop[0].price);       // 첫 번째 과일의 price 속성
console.log("총 과일 종류:", fruitShop.length);             // 목록의 길이로 과일 종류 개수 확인

Ex2) 동물원에 새로운 동물을 추가해보자

모든 생명체는 저마다의 소중한 자리가 있습니다. 동물원에 새로운 동물을 추가해보겠습니다.

// 작은 동물원의 동물 목록
let zoo = [
    {name: "코끼리", type: "포유류", isLarge: true},    // 첫 번째 동물 정보상자
    {name: "원숭이", type: "포유류", isLarge: false}   // 두 번째 동물 정보상자
];

console.log("처음 동물 수:", zoo.length);                // 현재 목록 길이로 동물 수 확인

// 새로운 동물 추가하기
zoo.push({name: "기린", type: "포유류", isLarge: true}); // push로 새 동물 정보상자 추가
console.log("기린 추가 후:", zoo.length);                // 추가 후 목록 길이 확인
console.log("새로 온 동물:", zoo[2].name);               // 세 번째(인덱스 2) 동물의 이름

Ex3) 모든 학생의 좋아하는 과목을 반복문으로 출력해보자

각자가 가진 특별함을 하나씩 돌아보며 소중히 여깁니다. 모든 학생의 정보를 반복문으로 확인해보겠습니다.

// 우리반 학생들의 좋아하는 과목
let students = [
    {name: "민지", subject: "수학", grade: 6},           // 첫 번째 학생 정보상자
    {name: "철수", subject: "과학", grade: 6},           // 두 번째 학생 정보상자
    {name: "영희", subject: "국어", grade: 6}            // 세 번째 학생 정보상자
];

// 반복문으로 모든 학생 소개하기
console.log("우리반 학생들의 좋아하는 과목:");
for (let i = 0; i < students.length; i++) {             // 0부터 목록 길이까지 반복
    console.log((i + 1) + ". " + students[i].name + " → " + students[i].subject); // i번째 학생의 이름과 과목 출력
}

지금까지 목록 안에 정보 상자를 넣어서 사용하는 방법을 차근차근 배워보았습니다. 이제 여러분도 체계적인 정보 관리의 전문가가 되었습니다.

🔄 복습 문제 - 이전에 배운 내용들 기억하나요?

8단원을 배우면서 이전에 배운 내용들도 잊지 않도록 조용히 복습해보겠습니다.

🔁 7단원 복습: 배열 메서드와 객체 함께 활용하기

// 문제: 학생 목록에서 forEach를 사용해 모든 학생 소개하기
let students = [
    {name: "철수", age: 12, hobby: "축구"},
    {name: "영희", age: 11, hobby: "그림그리기"},
    {name: "민수", age: 12, hobby: "독서"}
];

console.log("우리 반 학생들 소개:");
students.forEach(function(student, index) {
    console.log((index + 1) + "번째 학생: " + student.name);
    console.log("나이: " + student.age + "살");
    console.log("취미: " + student.hobby);
    console.log("---");
});

// 새 학생 추가
students.push({name: "지수", age: 11, hobby: "피아노"});
console.log("새 학생 추가 후 총 학생 수:", students.length);

🔁 5단원 복습: 함수로 학생 정보 처리하기

// 문제: 학생 정보를 받아서 소개하는 함수 만들기
function introduceStudent(student) {
    console.log("=== 학생 소개 ===");
    console.log("이름: " + student.name);
    console.log("나이: " + student.age + "살");
    console.log("취미: " + student.hobby);
}

// 나이가 12살인 학생들만 찾는 함수
function findStudentsByAge(studentList, targetAge) {
    let result = [];
    for (let i = 0; i < studentList.length; i++) {
        if (studentList[i].age === targetAge) {
            result.push(studentList[i]);
        }
    }
    return result;
}

// 사용해보기
let allStudents = [
    {name: "철수", age: 12, hobby: "축구"},
    {name: "영희", age: 11, hobby: "미술"},
    {name: "민수", age: 12, hobby: "독서"}
];

introduceStudent(allStudents[0]);
let twelveYearOlds = findStudentsByAge(allStudents, 12);
console.log("12살 학생들:", twelveYearOlds.length + "명");

✅ 학습 완료 체크리스트

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

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

🎯 추가 연습 문제들

조금 더 연습하고 싶은 분들을 위한 추가 문제들입니다.

추가 문제 1. 간단한 도서 목록을 만들고 접근해보세요.

let books = [
    {title: "해리포터", author: "롤링"},
    {title: "어린왕자", author: "생텍쥐페리"}
];

console.log("책 목록:", books);
console.log("첫 번째 책:", books[0].title);
console.log("두 번째 저자:", books[1].author);
console.log("총 책 수:", books.length);

추가 문제 2. 음식 목록에 새로운 음식을 추가해보세요.

let foods = [
    {name: "피자", price: 15000},
    {name: "치킨", price: 18000}
];

console.log("처음 메뉴:", foods);

foods.push({name: "햄버거", price: 8000});
console.log("햄버거 추가 후:", foods);
console.log("마지막 음식:", foods[2].name);

추가 문제 3. 반복문으로 모든 학생 이름을 출력해보세요.

let students = [
    {name: "철수", subject: "수학"},
    {name: "영희", subject: "국어"},
    {name: "민수", subject: "과학"}
];

for(let i = 0; i < students.length; i++) {
    console.log((i + 1) + "번 학생:", students[i].name);
    console.log("좋아하는 과목:", students[i].subject);
}

추가 문제 4. 다음 배열에서 "영희"의 나이에 접근하는 방법은?

let people = [
    {name: "철수", age: 12},
    {name: "영희", age: 11},
    {name: "민수", age: 13}
];

답: people[1].age

설명: "영희"는 배열의 두 번째 요소(인덱스 1)이므로 people[1]로 접근하고, .age로 나이 속성에 접근합니다.

📂 마무리 정보

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

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

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

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

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

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

💻 무료로 학습하러 가기

---