자바스크립트에서 사용자 입력 받기: 가위바위보 게임을 만들며 배우는 개념

프로그래밍을 배우면서 작은 프로젝트를 만들어보는 것은 개념을 이해하는 데 큰 도움이 됩니다. 이번 글에서는 가위바위보 게임을 만들면서 마주쳤던 궁금증을 해결해 보겠습니다.

저는 역사에 약한 편인데, 이유를 생각해보니 사건들을 시간 순서대로 연결하는 능력이 부족한 것 같더라고요. 예를 들면, 영화관에서 영화를 보고 나면 어떤 영화를 먼저 봤는지 잘 기억이 안 나요. 저는 이게 당연한 줄 알았는데, 친구들은 오히려 신기하다고 하더라고요.

이런 성향이 공부할 때도 영향을 미치더라고요. 각각의 개념을 따로 배우면 서로 연결이 잘 안 된달까요? 😅 이번에 개발 공부를 하면서 이런 문제를 어떻게 해결할 수 있을지 고민해봐야겠습니다.

아무튼, 이번에 가위바위보 게임을 자바스크립트로 만들면서 사용자가 가위를 낼지, 바위를 낼지, 보를 낼지를 임의로 정해야 한다는 걸 배우게 됐어요. 그런데 저는 이 부분이 너무 이해가 안 갔거든요. "왜 이렇게 임의로 정하지? 그러면 사용자가 직접 선택할 때는 어떻게 해야 되는 거지?"

나중에 알고 보니, 제가 아직 기초 단계의 학습자라서 그냥 임의로 정해준 것이었어요. 지금 중요한 건 사용자의 입력을 받는 것이 아니라, 가위바위보의 게임 로직을 이해하고 코드를 짜는 것이었죠.

생각해보면, 코딩은 제 삶의 계획과도 비슷한 느낌이에요. 저는 항상 효율을 추구하고, 처음부터 완벽하게 하고 싶어하고, 수정하는 걸 피하려는 경향이 있거든요. 하지만 개발에서도 계획을 세울 때도 그런 마음을 내려놓아야 해요. 완벽한 코드를 처음부터 만들 수는 없고, 끊임없이 수정하고 개선해야 하니까요. 수정하는 걸 두려워할 시간이 없어요. 그냥 전력을 다해 앞으로 나아가야죠.

1. 왜 사용자의 선택을 임의로 지정해야 할까?

가위바위보 게임을 만들면서 처음에는 아래와 같은 코드로 사용자 입력을 받으려고 했습니다.

let userChoice = getUserChoice();

하지만 이렇게 작성하면 getUserChoice 함수에 인자를 넘기지 않았기 때문에, JavaScript는 undefined를 전달하게 됩니다.

const getUserChoice = (userInput) => {
  userInput = userInput.toLowerCase(); // undefined에는 toLowerCase() 적용 불가
  if (userInput === 'rock' || userInput === 'paper' || userInput === 'scissors') {
    return userInput;
  } else {
    console.log('Please write a correct answer.');
  }
}

위 코드에서 userInput이 undefined이면 .toLowerCase()를 실행할 수 없기 때문에 오류가 발생합니다. 따라서 코드를 실행할 때 반드시 사용자의 선택을 getUserChoice('paper')처럼 인자로 넘겨주어야 합니다.

즉, 임의로 값을 지정한 이유는 함수가 정상적으로 동작하게 하기 위해서입니다.

하지만! 서론에서 말했듯이, 이렇게 임의로 값을 지정하는 것은 초보 단계에서 연습을 위한 방법일 뿐, 실제 프로젝트에서는 사용자의 입력을 직접 받을 수 있도록 바꿔야 합니다. 나중에는 버튼 클릭, 입력창 등을 활용해서 사용자가 원하는 값을 넣을 수 있도록 수정해야 합니다.

2. 실제로 사용자가 가위바위보 값을 입력하는 방법

사용자가 직접 가위바위보를 선택할 수 있도록 하기 위해 두 가지 방법을 사용할 수 있습니다.

(1) prompt()를 이용한 사용자 입력 받기 (브라우저 환경)

브라우저에서 실행되는 JavaScript에서는 prompt()를 사용하여 사용자에게 입력을 요청할 수 있습니다.

function playGame() {
  let userInput = prompt("Choose rock, paper, or scissors:"); // 사용자 입력 받기
  let userChoice = getUserChoice(userInput);
  let computerChoice = getComputerChoice();

  console.log("You threw: " + userChoice);
  console.log("The computer threw: " + computerChoice);
  console.log(determineWinner(userChoice, computerChoice));
}

playGame();

이 방식은 웹 브라우저에서 동작하지만, Node.js 환경에서는 prompt()가 지원되지 않기 때문에 오류가 발생할 수 있습니다.

(2) readline 모듈을 이용한 사용자 입력 받기 (Node.js 환경)

만약 코드를 Node.js에서 실행하고 있다면 prompt() 대신 readline 모듈을 사용해야 합니다.

const readline = require("readline");

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

function playGame() {
  rl.question("Choose rock, paper, or scissors: ", (userInput) => {
    let userChoice = getUserChoice(userInput);
    let computerChoice = getComputerChoice();

    console.log("You threw: " + userChoice);
    console.log("Computer threw: " + computerChoice);
    console.log(determineWinner(userChoice, computerChoice));

    rl.close();
  });
}

playGame();

이 코드에서는 rl.question()을 사용하여 터미널에서 사용자 입력을 받을 수 있도록 했습니다.

(3) HTML 버튼을 이용한 입력 받기 (웹 인터페이스 개발)

만약 버튼 클릭을 통해 가위바위보를 선택하고 싶다면, HTML과 JavaScript를 연결하여 처리할 수도 있습니다.

<button onclick="playGame('rock')">Rock</button>
<button onclick="playGame('paper')">Paper</button>
<button onclick="playGame('scissors')">Scissors</button>

<script>
function playGame(userInput) {
  let userChoice = getUserChoice(userInput);
  let computerChoice = getComputerChoice();

  console.log("You threw: " + userChoice);
  console.log("The computer threw: " + computerChoice);
  console.log(determineWinner(userChoice, computerChoice));
}
</script>

이제 사용자가 버튼을 클릭하면 playGame('rock')처럼 함수가 실행되면서 가위바위보 게임이 시작됩니다.

3. 결론

• JavaScript에서 사용자 입력을 받을 때 undefined 오류가 발생하지 않도록 하기 위해 초기 값을 명확히 지정해야 합니다.
• 하지만! 지금처럼 getUserChoice('paper')처럼 임의로 지정하는 것은 초보 단계에서 배우기 위한 방법일 뿐이고, 나중에는 사용자 입력을 직접 받을 수 있도록 수정해야 합니다.
• 브라우저에서는 prompt()를 사용할 수 있지만, Node.js 환경에서는 readline 모듈을 사용해야 합니다.
• 사용자 경험을 개선하기 위해 버튼을 클릭하면 입력이 자동으로 전달되도록 만들 수도 있습니다.