자바스크립트 콘솔 한글자씩 출력하기(두 줄)

김동욱·2024년 11월 18일
  • process.stdout.write()는 표준 출력 스트림을 통해 직접 문자열을 출력하는 메서드이며 console.log()처럼 개행 문자를 포함하지 않는다.
  • \r은 캐리지 리턴(Carriage Return)을 나타내어 현재 라인의 맨 앞으로 커서를 이동시킵니다. 따라서 한글자씩 늘어나면서 현재 라인에서 계속 갱신되어 출력되게 할 수 있다.
  1. str = '\r1'; // 1 출력
  2. str += '2';
  3. 커서 앞으로 이동
  4. str = '\r12' // 12 출력
    커서가 앞으로 이동하지 않는다면 112가 출력되며
    console.log를 사용하면 1\n12가 출력된다.
  • 두 줄 이상이면 \r 캐리지 리턴을 하여도 개행 후 줄에서 맨 앞으로 커서가 이동하기 때문에 개행 전 줄은 커서가 앞으로 이동하지 않은채 반복 출력된다.
    1234\n56 -> 1234\n567 이런식이 아니라
    1234\n56 -> 1234\n1234\n567 이런식
  • process.stdout.write()로는 한 줄만 출력하고 console.log()로 개행 후
    문자열을 비우고 process.stdout.write()로 두 번째 줄을 출력하면 된다.
async escape(stage) {
    let isEscaped = false;
    let escapeRateStage = this.escapeRate - (stage - 1) * 10;
    let rand = Math.random() * 100;
    let log = `${this.name}는 도망갔다. `;

    if (rand < escapeRateStage) {
      //도망
      isEscaped = true;
      log += `\n성공적으로 도망갔다!`;
    } else {
      log += `\n` + chalk.red(`하지만 도망갈 수 없었다!`);
    }

    let logs = log.split('\n');
    let displayText = ``;

    let i = 0;
    let j = 0;
    // 0.1초마다 출력 관리 타이머 설정
    const displayInterval = setInterval(() => {
      if (i < logs[0].length) {
        displayText += logs[0][i];
        i++;
        process.stdout.write(chalk.green(`\r${displayText}`));
      } else if (i === logs[0].length) {
        console.log();
        displayText = '';
        i++;
      } else if (j < logs[1].length) {
        displayText += logs[1][j];
        j++;
        process.stdout.write(chalk.green(`\r${displayText}`));
      } else {
        clearInterval(displayInterval);
      }
    }, 50);  // 0.05초마다 실행
    return new Promise((resolve) => {
      setTimeout(() => {
        if (isEscaped) {
          resolve([log, true]);
        } else {
          resolve([log, false]);
        }
      }, log.length * 50 + 2000);
    });
  }

[실행결과]

profile
갓겜만들어야지

0개의 댓글