자바스크립트 강의 EP_16 | 퀴즈 - 별그리기 | ES6+ 최신 문법 | DOM API | BOM API

자바스크립트 반복문을 활용한 '별 그리기' 퀴즈의 목적은 무엇인가요?

이 퀴즈는 프로그래밍적 사고를 눈에 띄게 향상시키기 위해 준비되었으며, 실력을 빨리 키우고 싶은 분들에게 도움이 됩니다.

별 그리기 퀴즈를 푸는 과정에서 프로그래밍적 사고를 향상시키는 방법은?

• 코드 한 줄 한 줄 수행할 때 변수의 값을 추적하고 분석하는 디버깅 과정을 연습합니다.
• 손으로 직접 적어가며 포문이 어떻게 돌아가는지 확인하고, 다양한 방식으로 문제를 풀어봅니다.

자바스크립트 반복문(for문)의 핵심 원리를 실제 코딩으로 체득하고 싶은 분들을 위한 실전 퀴즈 강의입니다. 단순히 문법을 외우는 것을 넘어, 별 그리기 퀴즈를 통해 for문의 중첩 구조와 변수변화를 직접 추적하며 프로그래밍적 사고력을 효과적으로 향상시킬 수 있습니다. 강사가 1번부터 4번까지의 문제 풀이 과정을 상세히 설명하며 디버깅 과정을 손으로 직접 따라가는 방법을 제시하여, 복잡한 코드의 흐름을 명확하게 이해하고 응용력을 키울 수 있도록 돕습니다. 실무에서 자주 쓰이지 않더라도, 이 퀴즈를 통해 얻는 문제 해결 능력은 어떤 복잡한 코드도 분석하고 해결할 수 있는 탄탄한 기초를 마련해 줄 것입니다.

1. 자바스크립트 반복문(for문)을 활용한 별 그리기 퀴즈 소개

1. 퀴즈 목표: 지난 시간에 학습한 반복문을 활용하여 자바스크립트코드로 별을 그리는 퀴즈를 진행한다.
2. 제공 자료:
   1. 기본 소스: 퀴즈 폴더 내 star.js 파일에 문제를 기술하며, 이 파일에 코딩을 진행한다.
   2. 정답 파일: star-result.js 파일에 정답이 있으며, 직접 풀어본 후 확인하는 것을 권장한다.
3. 퀴즈의 중요성:
   1. 단순히 문법을 외우는 것을 넘어, 프로그래밍적 사고력을 눈에 띄게 향상시킬 수 있다.
   2. 실무에서 이중 for문이 자주 사용되지 않더라도, 이 퀴즈를 통해 얻는 문제 해결 능력은 복잡한 코드 분석 및 해결의 탄탄한 기초를 마련해 준다.
4. 강의 진행 방식:
   1. 강사는 1번부터 4번까지의 문제 풀이 과정을 함께 진행하며 솔루션을 제공한다.
   2. 5번 문제부터는 수강생이 직접 실습을 진행한다.
   3. 정답은 하나뿐이 아니며, 동일한 모양이 나오면 모두 정답으로 간주한다.

2. 별 그리기 퀴즈 문제 풀이 및 디버깅 과정

2.1. 개발 환경 설정 및 기본 출력 방법

1. HTML 파일 설정: index.html 파일에서 star.js 파일을 연결하도록 변경한다.
2. 별 출력: document.write() 함수를 사용하여 파라미터로 별(*)을 넣어 HTML에 출력한다.
   1. 제약 조건: document.write() 함수에는 별을 하나만 넣을 수 있다고 가정한다.
   2. 여러 개의 별 출력: 별 5개를 출력하려면 document.write('*')를 5번 반복하여 호출한다.
3. 줄 바꿈: 다음 줄에 별을 그릴 때는 document.write('<br>')를 사용하여 개행한다.
4. 공백 표현: &nbsp;는 스페이스바를 나타내며, 공백을 표현할 때 사용한다.
5. 구분선: 각 문제의 정답이 끝날 때마다 document.write('<hr>')를 사용하여 가로 구분선을 추가한다.

2.2. 1번 퀴즈: 5x5 정사각형 별 그리기

1. 문제 분석: 5x5 크기의 정사각형 별을 그리는 문제이다.
2. 하드코딩으로 구현:
   1. 별 5개를 출력하고 개행하는 과정을 5번 반복하면 된다.
   2. document.write('*') 5번, document.write('<br>') 1번을 한 세트로 5번 반복한다.
3. for문을 이용한 구현:
   1. 별 5개 출력 및 개행:
      1. for문을 사용하여 i가 0부터 4까지 5번 반복하도록 설정한다 (let i = 0; i < 5; i++).
      2. 반복문안에서 document.write('*')를 호출하여 별 5개를 출력한다.
      3. 반복문이 끝난 후 document.write('<br>')를 호출하여 개행한다.
      4. 개발자 도구에서 요소 검사를 통해 5개의 별이 출력되고 개행된 것을 확인할 수 있다.
   2. 이중 for문을 이용한 5x5 정사각형 그리기:
      1. 위에서 구현한 '별 5개 출력 및 개행' 코드를 5번 반복해야 한다.
      2. 바깥쪽 for문을 추가하여 i가 0부터 4까지 5번 반복하도록 설정한다 (let i = 0; i < 5; i++).
      3. 안쪽 for문을 추가하여 j가 0부터 4까지 5번 반복하도록 설정한다 (let j = 0; j < 5; j++).
      4. 바깥쪽 for문은 행(줄)을 의미하고, 안쪽 for문은 열을 의미한다.
      5. 이중 for문을 통해 5x5 정사각형 별이 그려지는 것을 확인할 수 있다.
      6. 참고: 3중 for문은 실무에서 거의 사용되지 않으며, 필요하다면 설계부터 다시 고려해야 한다.
4. 디버깅 과정 (손으로 추적):
   1. 변수 초기화: i는 0으로 초기화되고, i < 5 조건이 true이므로 안쪽 for문이 수행된다.
   2. 안쪽 for문 (j) 수행:
      1. j는 0으로 초기화되고, j < 5 조건이 true이므로 별을 하나 그린다.
      2. j가 1씩 증가하며 0, 1, 2, 3, 4일 때 각각 별을 하나씩 그려 총 5개의 별을 그린다.
      3. j가 5가 되면 j < 5 조건이 false이므로 안쪽 for문 블록을 빠져나온다.
   3. 개행 수행: 안쪽 for문이 끝난 후 document.write('<br>')가 수행되어 개행된다.
   4. 바깥쪽 for문 (i) 반복:
      1. 바깥쪽 for문의 표현식(i++)이 수행되어 i는 1이 된다.
      2. i < 5 조건이 true이므로 다시 안쪽 for문이 수행되며, j는 다시 0으로 초기화된다.
      3. 이 과정이 i가 4가 될 때까지 반복되어 총 5줄의 별이 그려진다.
      4. i가 5가 되면 i < 5 조건이 false이므로 바깥쪽 for문도 종료된다.
   5. 디버깅의 중요성:
      1. 코드 라인별로 변수의 값이 어떻게 변하는지 추적하고 분석하는 과정을 디버깅이라고 한다.
      2. 디버깅은 프로그래밍 툴 외에도 손으로 직접 메모하며 연습할 수 있으며, 정보처리 자격증 실기 시험에도 출제될 정도로 중요하다.
      3. 코드 한 줄 한 줄을 따라가며 변수값과 최종 출력을 예측하는 연습을 꾸준히 하는 것이 프로그래밍 실력 향상에 매우 도움이 된다.

2.3. 2번 퀴즈: 직각 삼각형 별 그리기

1. 문제 분석: 첫 줄에 별 1개, 둘째 줄에 별 2개, ..., 다섯째 줄에 별 5개가 출력되는 직각 삼각형 모양의 별을 그리는 문제이다.
2. 하드코딩으로 구현:
   1. 첫 줄: 별 1개 + 개행
   2. 둘째 줄: 별 2개 + 개행
   3. ...
   4. 다섯째 줄: 별 5개 + 개행
3. for문을 이용한 구현:
   1. 기본 구조: 바깥쪽 for문은 5줄을 만들기 위해 i가 0부터 4까지 5번 반복하도록 설정한다 (let i = 0; i < 5; i++).
   2. 안쪽 for문 (별 개수 조절):
      1. 안쪽 for문은 j가 0부터 시작한다.
      2. 별의 개수가 각 줄마다 1개, 2개, 3개...로 증가해야 하므로, j의 반복 조건에 i 값을 활용한다.
      3. 첫 번째 줄(i=0)에서는 별 1개, 두 번째 줄(i=1)에서는 별 2개가 필요하므로, j < i + 1 조건을 사용한다.
      4. 디버깅 (i+1 조건):
         1. i가 0일 때: j < 0 + 1 (즉, j < 1)이므로 j는 0일 때 한 번만 별을 찍는다.
         2. i가 1일 때: j < 1 + 1 (즉, j < 2)이므로 j는 0, 1일 때 두 번 별을 찍는다.
      5. 이러한 방식으로 i+1을 조건으로 사용하면 각 줄마다 별의 개수가 1개씩 증가하는 삼각형이 만들어진다.
4. 퀴즈의 목적: 이 퀴즈는 프로그래밍적 사고력, 즉 뇌의 회전을 빠르게 하기 위함이다. 간단한 홈페이지 제작이 목표라면 필수는 아니지만, 실력 향상을 위해서는 해보는 것이 매우 도움이 된다.

2.4. 3번 퀴즈: 역삼각형 별 그리기

1. 문제 분석: 첫 줄에 별 5개, 둘째 줄에 별 4개, ..., 다섯째 줄에 별 1개가 출력되는 역삼각형 모양의 별을 그리는 문제이다.
2. for문을 이용한 구현 (방법 1: 5 - i 활용):
   1. 기본 구조: 바깥쪽 for문은 5줄을 만들기 위해 i가 0부터 4까지 5번 반복하도록 설정한다 (let i = 0; i < 5; i++).
   2. 안쪽 for문 (별 개수 조절):
      1. 안쪽 for문은 j가 0부터 시작한다.
      2. 별의 개수가 각 줄마다 5개, 4개, 3개...로 감소해야 하므로, j의 반복 조건에 5 - i를 활용한다.
      3. 디버깅 (5 - i 조건):
         1. i가 0일 때: j < 5 - 0 (즉, j < 5)이므로 j는 0부터 4까지 5번 별을 찍는다.
         2. i가 1일 때: j < 5 - 1 (즉, j < 4)이므로 j는 0부터 3까지 4번 별을 찍는다.
      4. 이러한 방식으로 5 - i를 조건으로 사용하면 각 줄마다 별의 개수가 1개씩 감소하는 역삼각형이 만들어진다.
3. for문을 이용한 구현 (방법 2: i를 감소시키며 활용):
   1. 바깥쪽 for문: i를 5부터 시작하여 0보다 클 때까지 1씩 감소시킨다 (let i = 5; i > 0; i--).
      1. i는 5, 4, 3, 2, 1 순서로 반복된다.
   2. 안쪽 for문: j가 0부터 시작하여 i보다 작을 때까지 반복한다 (let j = 0; j < i; j++).
      1. i가 5일 때 j < 5이므로 5번, i가 4일 때 j < 4이므로 4번... 별을 찍는다.
   3. 이 방법으로도 동일한 역삼각형이 출력되는 것을 확인할 수 있다.
   4. 참고: 정답은 하나만 있는 것이 아니므로 다양한 방법으로 시도해 볼 수 있다.

2.5. 4번 퀴즈: 역삼각형 공백 별 그리기

1. 문제 분석: 역삼각형 모양으로 공백이 먼저 출력되고 그 뒤에 별이 출력되는 형태의 별을 그리는 문제이다.
   1. 힌트: 별 앞에 있는 공백(&nbsp;)도 하나의 값으로 생각해야 한다.
   2. 공백 출력: document.write('&nbsp;')를 사용하여 공백을 출력한다.
2. 하드코딩으로 구현:
   1. 첫 줄: 공백 4개 + 별 1개 + 개행
   2. 둘째 줄: 공백 3개 + 별 2개 + 개행
   3. 셋째 줄: 공백 2개 + 별 3개 + 개행
   4. 넷째 줄: 공백 1개 + 별 4개 + 개행
   5. 다섯째 줄: 공백 0개 + 별 5개 + 개행
   6. 참고: 공백을 &nbsp; 대신 다른 특수 기호(^)로 대체하여 시각적으로 구분하며 작업할 수 있다.
3. for문을 이용한 구현:
   1. 기본 구조: 바깥쪽 for문은 5줄을 만들기 위해 i가 0부터 4까지 5번 반복하도록 설정한다 (let i = 0; i < 5; i++).
   2. 공백 출력 (jfor문):
      1. 공백은 첫 줄에 4개, 둘째 줄에 3개...로 감소해야 한다.
      2. j가 4부터 시작하여 0보다 클 때까지 1씩 감소시킨다 (let j = 4; j > 0; j--).
      3. 이때, j의 반복 조건에 i를 활용하여 j > i로 설정한다.
         1. i가 0일 때: j는 4, 3, 2, 1일 때 공백을 찍어 4개의 공백을 출력한다.
         2. i가 1일 때: j는 4, 3, 2일 때 공백을 찍어 3개의 공백을 출력한다.
      4. document.write('&nbsp;')를 호출하여 공백을 출력한다.
   3. 별 출력 (kfor문):
      1. 별은 첫 줄에 1개, 둘째 줄에 2개...로 증가해야 한다.
      2. k가 0부터 시작하여 i + 1보다 작을 때까지 반복한다 (let k = 0; k < i + 1; k++).
         1. i가 0일 때: k < 1이므로 k는 0일 때 별을 찍어 1개의 별을 출력한다.
         2. i가 1일 때: k < 2이므로 k는 0, 1일 때 별을 찍어 2개의 별을 출력한다.
      3. document.write('*')를 호출하여 별을 출력한다.
   4. 개행: 공백과 별 출력이 끝난 후 document.write('<br>')를 호출하여 개행한다.
   5. 이러한 과정을 통해 역삼각형 공백 별이 완성된다.

3. 퀴즈 마무리 및 학습 권장 사항

1. 정답 확인 및 응용:
   1. 문제를 풀기 어렵다면 답을 보면서 이해하고, 다른 방법으로도 풀어보는 것을 권장한다.
   2. 답을 이해하는 것만으로도 학습에 도움이 된다.
2. 디버깅 연습 강조: 머릿속으로 또는 노트에 직접 적어가면서 디버깅을 많이 해보며 for문이 어떻게 동작하는지 확인하는 것이 중요하다.
3. 꾸준한 실습: 오늘 하루 안에 별을 그리지 못했더라도 주말이나 여가 시간을 활용하여 꾸준히 연습하는 것을 권장한다.

자바스크립트 강의 EP_17 | 연산자(Operator)1 | ES6+ 최신 문법 | DOM API | BOM API 바로가기

자바스크립트 강의 EP_17 | 연산자(Operator)1 | ES6+ 최신 문법 | DOM API | BOM API - 하나이프 블로그