10.2.3 코드 여행길의 쉼터 만들기 - 중단점이라는 특별한 정거장

📘 10.2.3 코드 여행길의 쉼터 만들기 - 중단점이라는 특별한 정거장

혹시 긴 여행을 떠날 때, 중간중간 휴게소에서 잠깐 쉬어가며 "지금까지 얼마나 왔지? 뭘 놓친 건 없을까?" 하고 생각해본 적 있나요? 코딩의 세상에도 이런 쉼터가 필요할 때가 있어요. 우리 프로그램이 어디쯤 와 있는지, 변수들이 우리 생각대로 변하고 있는지 잠깐 멈춰서 살펴보고 싶을 때 말이에요.

지난 시간에 배운 브라우저 디버거는 우리에게 코드를 천천히 들여다볼 수 있는 돋보기를 선물해주었어요. 오늘은 그 돋보기를 더욱 효과적으로 사용할 수 있게 해주는 중단점이라는 특별한 도구에 대해 이야기해보려고 해요.

🧠 새로운 친구들과 인사하기

오늘 새롭게 만날 단어들을 먼저 살펴볼까요?

단어	마음으로 이해하기
중단점 (Breakpoint)	코드의 긴 여행길에 만들어둔 휴게소. 이곳에 도착하면 자동으로 멈춰 서요.
잠시 멈춤 (Pause)	달리던 코드가 숨을 고르며 잠깐 쉬는 시간이에요.
다시 시작 (Resume)	충분히 쉬었으니 다시 목적지를 향해 달려가는 거예요.

중단점은 "break(멈추다)"와 "point(지점)"이 만나서 탄생한 단어예요. 마치 산책길에 벤치를 놓아두는 것처럼, 코드의 특정 지점에 쉴 수 있는 자리를 마련해두는 거죠.

✨ 중단점, 왜 필요한 친구일까요?

코드를 짜다 보면 가끔 이런 생각이 들어요. "내가 만든 이 함수가 정말 내 생각대로 동작하고 있을까?" "이 변수는 지금 어떤 값을 가지고 있지?" 이런 궁금증이 생길 때, 중단점은 우리의 가장 든든한 친구가 되어줘요.

중간점의 가장 큰 매력은 정확한 순간을 포착할 수 있다는 거예요. 마치 사진사가 결정적 순간을 기다리다가 셔터를 누르는 것처럼, 우리가 원하는 그 정확한 순간에 코드를 멈춰세워서 모든 상황을 자세히 들여다볼 수 있어요.

또한 중단점은 설정하기도 정말 쉬워요. 복잡한 설정이나 어려운 명령어가 필요하지 않아요. 그냥 마우스로 딸깍 한 번 클릭하는 것만으로도 강력한 디버깅 도구가 준비돼요.

무엇보다 중단점은 우리가 원할 때 언제든지 만들고 지울 수 있어요. 오늘은 이 부분이 궁금하고, 내일은 저 부분이 궁금할 때, 그때그때 필요한 곳에 설치할 수 있는 이동식 휴게소 같은 존재예요.

마음을 담은 이야기: 할머니의 뜨개질

할머니가 긴 목도리를 뜨개질하시는 모습을 본 적 있나요? 할머니는 가끔씩 뜨개질을 멈추고 지금까지 뜬 부분을 펼쳐보세요. "여기 코가 빠졌네", "이 부분은 너무 꽉 뜬 것 같아"라며 중간중간 점검하시죠.

중단점도 바로 할머니의 이런 지혜와 같아요. 코드라는 긴 실을 짜나가면서, 중요한 지점마다 잠깐 멈춰서 "지금까지 잘 되고 있나?" "실수한 부분은 없을까?" 하고 살펴보는 거예요.

할머니께서 뜨개질 도중에 실수를 발견하면, 그 부분만 풀어서 다시 뜨시잖아요. 우리도 중단점에서 문제를 발견하면, 그 부분만 고쳐서 다시 실행할 수 있어요. 이렇게 하면 완성도 높은 아름다운 프로그램을 만들 수 있답니다.

🎯 중단점을 사용하는 이유들

개발자들이 중단점을 사랑하는 이유가 참 많아요. 하나하나 살펴볼까요?

첫 번째는 정확한 진단이에요. 감기에 걸렸을 때 체온계로 정확한 체온을 재는 것처럼, 중단점은 프로그램의 정확한 상태를 알려줘요. console.log가 편지를 받는 것 같다면, 중단점은 직접 그 현장에 가서 눈으로 보는 것과 같아요.

두 번째는 복잡한 상황의 단계별 이해예요. 어려운 수학 문제를 풀 때도 한 번에 답을 구하지 않고 단계별로 차근차근 풀어가잖아요. 중단점도 복잡한 코드의 실행 과정을 단계별로 나누어서 이해할 수 있게 도와줘요.

세 번째는 함수들 사이의 대화 엿듣기예요. 여러 함수가 서로 정보를 주고받는 복잡한 상황에서, 어떤 순서로 실행되는지, 어떤 값들이 전달되는지를 생생하게 관찰할 수 있어요.

마지막으로 효율적인 문제 해결이에요. 문제가 있을 것 같은 핵심 부분에만 중단점을 설정하면, 시간을 아끼면서도 정확하게 문제를 찾아낼 수 있어요.

⚙️ 중단점 설정하는 마음가짐과 방법

중단점을 설정하는 것은 정말 간단해요. 하지만 효과적으로 사용하려면 올바른 마음가짐이 필요해요.

준비 단계: 마음의 정리
먼저 무엇을 확인하고 싶은지 명확히 해보세요. "이 변수의 값이 궁금해", "이 조건문이 제대로 동작하는지 보고 싶어"처럼 구체적인 목표를 가져보세요.

첫 번째 단계: 개발자 도구와의 만남

• F12 키를 눌러 개발자 도구를 불러내요
• "Sources" 탭을 클릭해서 소스 코드 세상으로 들어가요
• 왼쪽 패널에서 확인하고 싶은 파일을 찾아 클릭해요

두 번째 단계: 중단점이라는 표식 남기기

• 멈추고 싶은 줄을 찾아보세요
• 그 줄의 번호를 부드럽게 클릭해보세요
• 빨간색 동그라미가 나타나면 성공이에요

세 번째 단계: 실제 동작 확인하기

• 웹페이지를 새로고침하거나 해당 코드를 실행해보세요
• 코드가 중단점에 도달하면 마법처럼 멈춰요
• 이제 모든 변수들의 비밀을 들여다볼 수 있어요

중단점과의 대화:

• 지우기: 빨간 점을 다시 클릭하면 사라져요
• 잠시 끄기: 체크박스를 해제하면 임시로 쉬어가요
• 모두 정리하기: 디버거 패널에서 한 번에 모든 중단점을 정리할 수 있어요

🧪 함께 체험해보는 중단점의 세계

이제 실제 예시를 통해서 중단점이 어떻게 우리의 코딩 여행을 도와주는지 체험해볼까요?

🔹 첫 번째 체험: 함수가 받는 선물 확인하기

함수가 호출될 때 어떤 값들을 받는지 중단점으로 확인해보는 체험이에요.

// 두 친구의 키를 비교해주는 다정한 함수
function compareHeight(friend1, height1, friend2, height2) {
    let difference;
    if (height1 > height2) {
        difference = height1 - height2;
    } else {
        difference = height2 - height1;
    }  // 이곳에서 잠깐 쉬어가며 확인해보세요

    let tallerFriend = height1 > height2 ? friend1 : friend2;

    if (difference < 5) {
        return friend1 + "과(와) " + friend2 + "의 키가 비슷해요!";
    } else {
        return tallerFriend + "이(가) 더 키가 커요!";
    }
}

// 함수에게 선물 보내기
let result = compareHeight("철수", 150, "영희", 148);
console.log(result);

체험하며 느껴보기: 함수 시작 부분에 중단점을 설정하고 코드를 실행해보세요. 함수가 friend1, height1, friend2, height2라는 네 개의 선물을 잘 받았는지 확인할 수 있어요.

🔹 두 번째 체험: 조건문의 갈래길 따라가기

복잡한 조건문에서 어떤 길로 코드가 흘러가는지 중단점으로 따라가보는 체험이에요.

// 학생의 성적을 따뜻하게 평가해주는 함수
function evaluateGrades(korean, math, english) {
    let average = (korean + math + english) / 3;  // 첫 번째 쉼터
    let grade = "";

    if (average >= 90) {  // 두 번째 쉼터
        if (korean >= 85 && math >= 85 && english >= 85) {
            grade = "최우수";
        } else {
            grade = "우수";
        }
    } else if (average >= 80) {  // 세 번째 쉼터
        grade = "양호";
    } else if (average >= 70) {
        grade = "보통";
    } else {
        grade = "노력 필요";
    }

    return "평균: " + average + "점, 등급: " + grade;
}

// 여러 학생들의 성적 확인해보기
let student1 = evaluateGrades(95, 92, 88);  // 우수한 학생
let student2 = evaluateGrades(82, 85, 79);  // 양호한 학생
let student3 = evaluateGrades(65, 70, 68);  // 응원이 필요한 학생

체험하며 느껴보기: 평균 계산 부분과 각 조건문 앞에 중단점을 설정해보세요. average 값이 어떻게 계산되는지, 어떤 조건문으로 코드가 흘러가는지 한 걸음씩 따라가 볼 수 있어요.

🔹 세 번째 체험: 반복문 속 변화의 순간들

반복문 안에서 변수들이 어떻게 변해가는지 중단점으로 지켜보는 체험이에요.

// 구구단을 정성스럽게 계산해주는 함수
function calculateMultiplicationTable(number) {
    console.log(number + "단을 계산합니다:");
    let results = [];

    for (let i = 1; i <= 9; i++) {  // 반복의 시작점에서 쉼터
        let result = number * i;  // 계산의 순간에서 쉼터
        let equation = number + " × " + i + " = " + result;
        results.push(equation);
        console.log(equation);
    }

    console.log(number + "단 계산 완료!");  // 모든 여행이 끝난 후 쉼터
    return results;
}

// 3단 계산 시작하기
let threeTable = calculateMultiplicationTable(3);

체험하며 느껴보기: 반복문의 여러 지점에 중단점을 설정해서 i, result, equation 변수들이 각 반복마다 어떻게 성장해가는지 지켜보세요.

우아한 연습 시간 전에, 지금까지 연습해온 내용을 이야기로 정리해볼게요.

🧚‍♀️ 마음을 담은 이야기: 정원사의 세심한 돌봄

상상해보세요. 당신이 아름다운 정원을 가꾸는 정원사라고 해보세요.

봄에 씨앗을 심고, 여름 내내 물을 주고 가꿔왔어요. 이제 가을이 되어 열매를 맺을 시간이에요. 하지만 정원이 너무 넓어서 모든 식물의 상태를 한 번에 확인하기 어려워요.

그래서 당신은 특별한 방법을 생각해내요. 정원 곳곳에 작은 표식을 세워두는 거예요. "이곳에서 토마토 상태 확인", "저곳에서 장미 물주기 점검"처럼 말이에요.

매일 아침 정원을 돌아다니다가 그 표식에 도달하면, 잠깐 멈춰서 그 순간의 식물 상태를 자세히 관찰해요. 토마토가 얼마나 익었는지, 장미에 물이 충분한지, 잡초는 없는지 꼼꼼히 살펴보죠.

중단점도 바로 이런 정원사의 지혜와 같아요. 코드라는 넓은 정원에서 중요한 지점마다 표식을 세워두고, 프로그램이 그곳에 도달하면 잠깐 멈춰서 모든 변수들의 상태를 세심하게 돌봐주는 거예요.

이렇게 정성스럽게 관리된 정원에서는 건강하고 아름다운 꽃과 열매가 자라나듯이, 중단점으로 세심하게 관리된 코드에서는 안정적이고 완벽한 프로그램이 탄생해요.

🔄 중단점 활용의 자연스러운 흐름

중단점을 활용하는 과정을 자연스러운 흐름으로 정리해보면 이렇게 돼요.

첫 번째 물결: 호기심의 시작
"이 부분에서 무슨 일이 일어나고 있을까?"라는 순수한 호기심에서 시작돼요. 코드를 보다가 문득 궁금해지는 지점들을 발견하는 거죠.

두 번째 물결: 지혜로운 계획 세우기
모든 곳에 중단점을 설정하는 것이 아니라, 정말 중요하고 핵심적인 지점들을 신중하게 선택해요. 마치 여행 계획을 세울 때 꼭 가봐야 할 명소들을 고르는 것처럼요.

세 번째 물결: 실행과 관찰의 시간
코드를 실행시키고 중단점에서 자동으로 멈추는 순간을 경험해요. 그 순간 시간이 멈춘 것처럼 모든 것을 천천히 관찰할 수 있어요.

네 번째 물결: 깊이 있는 이해
멈춘 지점에서 모든 변수들의 값을 확인하고, 예상했던 것과 실제가 같은지 비교해봐요. 이 과정에서 새로운 발견과 깨달음을 얻게 돼요.

다섯 번째 물결: 완성도 향상
발견한 문제점들을 해결하고, 다시 중단점을 통해 올바르게 수정되었는지 확인하는 과정을 반복해요. 이렇게 하면서 점점 더 완벽한 프로그램으로 발전시켜 나가요.

🧠 피하고 싶은 흔한 실수들

중단점을 사용할 때 조심해야 할 점들을 미리 알아두면 더 효과적으로 활용할 수 있어요.

❌ 실수 1: 너무 많은 중단점으로 인한 혼란

function simpleFunction(a, b) {
    let x = a;         // 중단점 1
    let y = b;         // 중단점 2  
    let sum = x + y;   // 중단점 3
    let result = sum;  // 중단점 4
    return result;     // 중단점 5
}

이렇게 모든 줄에 중단점을 설정하면 오히려 혼란스러워져요. 정말 중요한 핵심 지점에만 설정하는 것이 현명해요.

❌ 실수 2: 멈춘 순간을 충분히 활용하지 않기

function calculatePrice(price, discount) {
    let finalPrice = price * (1 - discount);  // 중단점을 설정했지만
    return finalPrice;                        // 변수들을 확인하지 않음
}

중단점의 가장 큰 장점은 그 순간의 모든 변수 상태를 확인할 수 있다는 건데, 단순히 멈추기만 하고 아무것도 확인하지 않으면 의미가 없어져요.

❌ 실수 3: 실행되지 않는 코드에 중단점 설정

function onlyCalledInSpecialCase() {
    let important = "중요한 값";  // 중단점을 설정했지만
    return important;             // 이 함수를 호출하지 않음
}

// 함수를 호출하지 않아서 중단점이 의미없음

중단점은 코드가 실제로 실행되어야만 효과가 있어요. 실행되지 않는 코드에 중단점을 설정하면 아무 일도 일어나지 않아요.

🌸 연습 문제로 조금씩 나아가기

기계가 만든 어려운 연습문제가 아니라, 마음을 따뜻하게 해주는 친근한 문제들로 연습해볼까요?

연습 문제 1: 첫 중단점과의 만남

// 두 친구의 나이를 더해주는 친절한 함수
function addAge(friendName, age1, age2) {
    console.log(friendName + "의 나이 계산을 시작해요");
    let totalAge = age1 + age2;  // 이곳에서 첫 중단점을 만나보세요
    console.log("계산 완료! 총 나이는 " + totalAge + "살이에요");
    return totalAge;
}

addAge("철수와 영희", 12, 13); // 함수를 실행해서 중단점을 경험해보세요

첫 중단점 여행 가이드:

1. 개발자 도구를 열어보세요 (F12)
2. "Sources" 탭으로 이동해보세요
3. let totalAge = age1 + age2; 줄의 번호를 클릭해보세요
4. 빨간 점이 생기는 것을 확인해보세요
5. 웹페이지를 새로고침해보세요
6. 코드가 그 지점에서 멈추는 신기한 경험을 해보세요

연습 문제 2: 조건문의 갈래길 탐험하기

// 날씨에 따라 조언을 해주는 따뜻한 함수
function weatherAdvice(weather) {
    let advice = "";

    console.log("오늘 날씨는 " + weather + "이에요");

    if (weather === "맑음") {  // 첫 번째 갈래길 중단점
        advice = "☀️ 산책하기 좋은 날이에요!";
        console.log("맑은 날 길로 향해요");
    } else if (weather === "비") {  // 두 번째 갈래길 중단점
        advice = "🌧️ 우산을 꼭 챙기세요!";
        console.log("비 오는 날 길로 향해요");
    } else {  // 세 번째 갈래길 중단점
        advice = "🌤️ 오늘도 좋은 하루 되세요!";
        console.log("기타 날씨 길로 향해요");
    }

    return advice;
}

// 여러 날씨로 실험해보기
let sunny = weatherAdvice("맑음");
let rainy = weatherAdvice("비");
let cloudy = weatherAdvice("흐림");

갈래길 탐험 가이드:

1. 각 조건문 시작 부분에 중단점을 설정해보세요
2. 각각의 날씨 테스트에서 어떤 갈래길로 가는지 관찰해보세요
3. weather 값에 따라 advice 변수가 어떻게 달라지는지 확인해보세요

연습 문제 3: 반복문 속 변화의 순간들

// 1부터 특정 숫자까지 더해주는 성실한 함수
function sumNumbers(endNumber) {
    console.log("1부터 " + endNumber + "까지 더하기 시작!");
    let sum = 0;

    for (let i = 1; i <= endNumber; i++) {  // 반복의 시작점 중단점
        console.log("현재 숫자: " + i);
        sum = sum + i;  // 더하기 계산 중단점
        console.log("현재까지의 합: " + sum);
    }

    console.log("최종 결과: " + sum);  // 반복 완료 후 중단점
    return sum;
}

sumNumbers(5); // 1+2+3+4+5 = 15

변화의 순간 관찰 가이드:

1. 반복문 시작 부분과 계산 부분에 중단점을 설정해보세요
2. i, sum 변수들이 각 반복마다 어떻게 변하는지 확인해보세요
3. 단계별 실행 버튼을 사용해서 천천히 진행해보세요

🤔 좀 더 깊이 생각해보기

기본 연습을 마쳤다면, 조금 더 생각해볼 만한 질문들로 이해를 깊게 해보겠어요.

생각해보기 1: 중단점의 가장 소중한 장점은 무엇일까요?

마음에서 우러나는 답: 코드가 실행되는 바로 그 순간에 멈춰서, 그 순간의 모든 변수들의 마음을 들여다볼 수 있다는 점이에요.

따뜻한 해설: console.log는 편지로 소식을 전해주는 것과 같다면, 중단점은 직접 그 현장에 가서 눈으로 보고 손으로 만져볼 수 있는 경험을 선사해줘요.

생각해보기 2: 언제 중단점을 설정하는 것이 가장 도움이 될까요?

마음에서 우러나는 답: 복잡한 조건문이나 반복문, 여러 함수가 얽혀있는 부분에서 핵심 지점에만 설정할 때가 가장 효과적이에요.

따뜻한 해설: 모든 곳에 중단점을 설정하면 오히려 혼란스러워져요. 대신 "여기서 문제가 생길 수 있겠다"고 직감하는 중요한 지점에만 설정하면, 효율적으로 문제를 찾고 해결할 수 있어요.

🔄 앞서 배운 것들과의 다정한 만남

지금까지 우리가 함께 걸어온 길을 잠깐 되돌아보며, 이전에 배운 내용들과 오늘 배운 중단점이 어떻게 어우러지는지 살펴볼까요?

다시 만나는 친구 1: apply 메서드와 this의 변화

// 과일 친구들과 공통 인사법
let apple = { name: "사과", color: "빨간색" };
let banana = { name: "바나나", color: "노란색" };

function introduce() {
    console.log("안녕하세요! 저는 " + this.color + " " + this.name + "이에요!");
}

introduce.apply(apple);   // 결과는?
introduce.apply(banana);  // 결과는?

다정한 해설:

• apply 메서드는 함수의 this를 다른 객체로 바꿔주는 마법 같은 도구예요
• introduce.apply(apple): "안녕하세요! 저는 빨간색 사과이에요!" 라고 인사해요
• introduce.apply(banana): "안녕하세요! 저는 노란색 바나나이에요!" 라고 인사해요
• apply는 call과 비슷하지만 매개변수를 배열로 전달하는 차이가 있어요

다시 만나는 친구 2: bind 메서드로 this 영원히 고정하기

// 인사를 좋아하는 친구
let person = {
    name: "철수",
    greet: function() {
        console.log("안녕! 나는 " + this.name + "이야!");
    }
};

let sayHello = person.greet.bind(person);
setTimeout(sayHello, 1000);  // 1초 후 실행

다정한 해설:

• bind 메서드는 함수의 this를 영원히 특정 객체에 고정시켜주는 친절한 도구예요
• sayHello는 언제 실행되든 항상 person 객체를 this로 기억해요
• 1초 후 "안녕! 나는 철수야!"라는 따뜻한 인사가 들려와요
• bind는 새로운 함수를 만들어서 돌려주므로 원본 함수는 그대로 보존돼요

지금까지 중단점이라는 특별한 친구와 함께 코드의 세밀한 순간들을 관찰하는 방법을 배웠어요. 중단점은 우리가 프로그래밍의 세계에서 더욱 세심하고 정확한 개발자로 성장할 수 있게 도와주는 소중한 도구예요.

마치 정원사가 식물 하나하나를 정성스럽게 돌보듯이, 우리도 중단점을 통해 코드의 구석구석까지 따뜻한 관심을 기울여 완성도 높은 프로그램을 만들어갈 수 있을 거예요.

✅ 오늘 함께 나눈 이야기들

이번 시간에 함께 나눈 소중한 이야기들을 마음에 잘 간직하고 있는지 확인해보세요!

함께 배운 내용	마음에 담았나요?
중단점의 따뜻한 개념	✅
설정하는 마음가짐과 방법	✅
활용할 때의 지혜로운 전략	✅
피해야 할 흔한 실수들	✅
실제 예제를 통한 체험	✅

🎯 더 깊이 연습하고 싶은 마음을 위한 문제들

조금 더 연습하며 성장하고 싶은 분들을 위한 따뜻한 문제들이에요!

심화 문제 1. 함수에 중단점을 설정하고 매개변수들의 마음 들여다보기

function calculateRectangleArea(width, height) {
    let area = width * height;  // 이곳에서 잠깐 쉬며 변수들과 인사해보세요
    return area;
}

// 테스트해보기
calculateRectangleArea(5, 8);

// 중단점 체험법: 줄 번호 클릭 → 코드 실행 → width, height, area 값 확인하기

심화 문제 2. 반복문에서 변수들의 성장 과정 지켜보기

function countdown() {
    for (let i = 3; i >= 1; i--) {
        console.log("카운트:", i);  // 이곳에서 i의 변화를 지켜보세요
    }
    console.log("시작!");
}

// 테스트해보기
countdown();

// 중단점 체험법: 반복문 안에 중단점 설정 → i 값이 3, 2, 1로 변하는 과정 관찰하기

심화 문제 3. 조건문에서 코드의 여행길 확인하기

function checkStudentGrade(age) {
    if (age >= 18) {         // 이 줄 앞에서 잠깐 쉬며 age 값 확인하기
        return "성인";
    } else {
        return "미성년";
    }
}

// 테스트해보기
checkStudentGrade(20);
checkStudentGrade(15);

// 중단점 체험법: if문 앞에 중단점 설정 → age 값 확인 → 어떤 길로 가는지 관찰하기

심화 문제 4. 중단점을 설정하는 가장 자연스러운 방법은?

따뜻한 답: 브라우저 개발자 도구의 Sources 탭에서 코드 왼쪽에 있는 줄 번호를 부드럽게 클릭하면 돼요. 빨간색 점이 나타나면 중단점이 설정된 거예요.

심화 문제 5. 중단점에서 코드가 멈췄을 때 가장 중요하게 살펴볼 점은?

따뜻한 답: 그 순간 모든 변수들의 값을 확인하는 거예요. 변수에 마우스를 올리거나 Watch 패널을 통해 현재 상태가 우리 예상과 같은지 차근차근 비교해보는 것이 중요해요.

📂 오늘의 배움 정리

오늘 함께 나눈 10.2.3 중단점 이야기가 여러분의 마음에 따뜻하게 자리 잡았나요? 다음 시간에도 더 재미있고 유익한 내용으로 만나뵐게요!

마음에 새기기: 오늘 배운 내용을 꼭 직접 체험해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

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

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

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

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

💻 무료로 학습하러 가기

---