2021-12-09 TIL

🦁 Day30

💻 오늘 한 것

사용자에게 숫자를 입력받아 입력받은 값만큼의 라인으로 트리 출력하는 프로그램 구현

문제

[입력]
5
[출력]
    *
   ***
  *****
 *******
*********

⛔ 처음 작성한 코드(오류有)

// 사용자에게 값 입력 받기
do {
    let flag = false;
    const userInput = prompt('숫자를 입력하세요');
    const input = parseInt(userInput);
    if(input < 1 || isNaN(input)){
        alert('1 이상의 정수만 입력해야 합니다.');
    } else {
        flag = true;
    }
} while(!flag)

let n = 0;
let result = '';
for(let i=1; i < input+1; i++){ // 라인 수
    for(let j=input; j > i; j--){ // 공백 수
        result += ' ';
    }
    if(i === 1){
        result += '*'+'\n';
    } else {
        for(let k=0; k<i+n+1; k++){
            result += '*';
        }
        result += '\n';
        n++;
    }
}
console.log(result);

맞닥뜨린 문제점

예외 처리 이후 값 재입력해도 결과물 출력하지 않고 프로그램 종료되는 오류

do..while문을 이용해 사용자가 올바른 값을 입력할 때까지 반복하도록 했다.
일단 do..while문에 들어가면 prompt() 함수로 값을 입력받은 후 올바른 값을 입력하지 않은 경우에 대한 예외처리에 들어간다.

if(input < 1 || isNaN(input)){
        alert('1 이상의 정수만 입력해야 합니다.');
    } else {
        flag = true;
    }

그런데 올바른 값을 입력해도 프로그램 종료, 올바르지 않은 값을 입력해도 alert창 뜨고 확인 누르면 거기서 종료됐다.

수십번의 console.log 와 코드실행순서를 되짚어 본 후 유효성 체크에서 걸려서 prompt()로 다시 입력받은 값을 userInput 변수에 다시 담아주는 것을 빼먹었다는 걸 깨달았다🤦‍♀️

if (input < 1 || isNaN(input)) {
  // 다시 입력받는 값 userInput 변수에 할당
  userInput = prompt('1 이상의 숫자만 입력하세요');
} else {
  flag = true;
}

추가한 것

사용자가 값을 입력하지 않고 취소할 수도 있으므로 prompt()에서 취소를 눌렀을 때 프로그램이 종료되도록 했다

  if(userInput){ // 입력값이 있는 경우
    if (input < 1 || isNaN(input)) { // 1 이상이 아닌, 숫자 이외의 값 입력한 경우
      userInput = prompt('1 이상의 숫자만 입력하세요');
    } else { // 1 이상의 숫자 입력한 경우
      flag = true;
    }
  } else { // 값을 입력하지 않고 취소 버튼을 누른 경우
    alert('프로그램을 종료합니다');
    flag = true;
  }

최종 코드

// 사용자에게 숫자 입력 받기
let flag = false;
let input;
let userInput = prompt('숫자를 입력하세요');
do {
    input = parseInt(userInput);
    if(userInput){
      if (input < 1 || isNaN(input)) {
        userInput = prompt('1 이상의 숫자만 입력하세요');
      } else {
        flag = true;
      }
    } else {
      alert('프로그램을 종료합니다');
      flag = true;
    }
} while (!flag)

// 입력받은 값으로 트리 만들기
let n = 0;
let result = '';
for(let i=1; i < input+1; i++){ // 라인 수
    for(let j=input; j > i; j--){ // 공백 수
        result += ' ';
    }
    if(i === 1){
        result += '*'+'\n';
    } else {
        for(let k=0; k<i+n+1; k++){
            result += '*';
        }
        result += '\n';
        n++;
    }
}
console.log(result);

▶ 결과물 확인하기(트리 만들기)

💭 느낀 점

별찍기는 알고리즘 문제 중의 기초 중의 기초인데도 나에게는 꽤나 어려운 문제였다. 하지만 그냥 수동적으로 수업만 듣는 것보다 이렇게 간단하게라도 프로그램을 만들어보면서 시행착오도 겪고 오류 수정해 나가면서 배우는 것이 꽤 많았다. 이론,문법을 어느정도 배우고 난 후에는 이렇게 간단한 프로그램 만들기를 꼭 해야겠다는 생각이 많이 들었다.