자바스크립트 이론 - 구구단 만들기

Seong Hyeon Kim·2025년 3월 31일

오즈코딩스쿨

오즈코딩

목록 보기

5/5

구구단 만들기

자바스크립트로 만들기

1. 함수 + 하드코딩

아무것도 없는 맨땅에 구구단 만들기를 시작합니다. 단순 반복문으로 해도 되지만 그럴듯해 보이도록(?) 함수까지 써서 만들어 보겠습니다.

함수 + 하드코딩이라는 끔찍한 사용법으로 우선 2단을 만들어 보았습니다. 이제 이 코드를 이쁜 구구단 코드로 변경하는 과정을 거쳐보겠습니다.

2. 숫자를 입력받아서 곱하게 만들기

1번에서 만든건 오로지 2단만 할 수 있고, 이후에는 3단 4단을 만들고 싶으면 하나하나 다 수정해야 했는데요, 이 작업으로 이제 숫자만 넣으면 자동으로 해당 단수가 출력되는 효율적인 함수로 변경되었습니다.

하지만 여전히 콘솔로그가 도배된 이 코딩은 비효율적인 부분이 많아보여서 좀 더 개선해 보겠습니다.

3.반복문 쓰기

드디어 자동화를 위한 무언가가 생성되었습니다.
콘솔로그를 한줄만 써도 된다니 이전과 비교하면 아주 효율적인 코드가 되었습니다.
그렇지만 뭔가 좀 밋밋한게 보기좋게 바꿔보면 좋을것 같네요.

4.구구단처럼 수식이 보이게 만들기

자바스크립트의 쌈@뽕한 기능중 하나인 백틱을 사용한 템플릿 리터럴을 사용해서 변수와 스트링이 모두 합쳐지게끔 콜라보를 해서 이제는 진짜 구구단이 나오는것처럼 그럴듯해 졌습니다.
하지만 여전히 좀 더 개선의 여지가 보입니다. 생각해보니 우리는 함수로 만들어놓고 그걸 제대로 사용하지 않았네요. 그부분을 개선해 보겠습니다.

5. 인자값을 여러개 받아보기

우선 인자값을 기존에는 단수를 뜻하는 num 만 받았지만 이번에 몇단을 할것인지를 의미하는 곱해지는 수까지 받아보겠습니다.
저는 기억력이 안좋아서 대략 100일 후에 이 코드를 봤을때,
이 변수명이 어떤걸 의미하는지 직관적으로 하고자 이렇게 적었지만,
실제로는 이렇게 적으면 같이 일하는 사람들에게 욕을 먹을 확률이 매우 높으니 변수명은 항상 신중하게 적어줍시다.
어쨋든 함수로 받는 인자값을 2개로 변경해준 덕분에 이제 원하는 숫자에 원하는 단수까지 나오도록 세팅이 된 구구단 함수 입니다.

6. 인자값을 실제로 입력받도록 해서 나오게 하기

nodejs 입력받기 라고 구글에 검색해보면 위와 같은 코드를 사용해 자바스크립트가 콘솔창(터미널) 에서 입력을 받을 수 있는것을 확인할 수 있습니다
전 이 블로그를 참고했습니다.
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-%EB%85%B8%EB%93%9C-%EC%BD%98%EC%86%94%EC%B0%BD%EC%97%90%EC%84%9C-%EC%9E%85%EC%B6%9C%EB%A0%A5-%ED%95%98%EB%8A%94%EB%B2%95
무튼 여기를 참고해 드디어 숫자와 단수까지 입력받는 구구단 함수가 완성되었습니다.

7. 프로그램으로 만들기

매번 vscode 를 켠다음 이걸 실행할면 너무 불편할것 같고,
그렇다고 만들어놓은 계산기 안쓰자니 아까우니깐 이걸 버튼만 딸깍 누르면 실행되는 exe 파일로 만들면 그래도 좀 사용할 것 같습니다.

사실 이분야는 파이썬이 훨씬 쉽지만, 오늘은 자바스크립트로 시작하기도했고 찾아보면 자바스크립트도 할수 있을것 같으니 한번 try 해보겠습니다.

우선 빠르게 구글링을 해줍시다. 구글에 자바스크팁트 exe 파일로 만들기 라고 치면 여러개 나옵니다.
전 제일 단순하게 잘 설명된 요기를 참고했습니다. https://breadrich.tistory.com/18
우선 node 는 당연히 기본으로 설치되어야 하고, 필수적으로 pkg 라는 라이브러리를 추가로 설치해야 우리가 원하는걸 실행할 수 있는걸 확인했으니, 간단한 세팅을 좀 해보겠습니다.

세팅

설치는 npm 이라는 node 전용 패키지 및 라이브러리 다운로드 시스템을 사용할 겁니다

근데 그러려면 기본적으로 package.json 이라는 패키지 및 의존성등 라이브러리들을 가져와서 쓰겠다고 명시하는 파일이 있어야 하기 때문에 이걸 설치해줘야 합니다.

수동으로 만들어도 되지만, 간단하게 터미널에서 몇글자만 치면 빠르고 쉽게 만들어집니다.

npm init -y

npm init -y 란 ?

package.json을 빠르게 기본 설정으로 생성해주는 명령어입니다.

-y 안 붙이면 하나하나 질문 나옴 (프로젝트 이름, 설명, author 등)

npm install 전에 npm init을 꼭 해야 하는 이유는, 
npm이 뭘 설치해야 할지를 적어둘 곳(package.json)이 필요하기 때문이에요.

라고 친절히 지피티가 알려주네요.

역시나 흔하게 발생할 수 있는 휴먼 에러로 시작합니다.
npm 파일이 생성할때 디렉토리 이름이 package.json의 "name" 필드로 자동 들어가는데, npm은 패키지 이름에 한글이나 특수문자가 들어가는 걸 금지하고 있습니다.
우회하는 방법도 있지만, 귀찮으니 그냥 디렉토리 이름 빠르게 변경해줍시다.

디렉토리 이름을 영어로 바꾸니 바로 실행이 되네요. 이제 아까하려던 pkg 도 설치해줍니다.

npm install pkg

무사히 의존성이 잘 추가된것을 볼 수 있습니다.

패키지를 설치했으니 이제 실행만 해주며 끝입니다.

npx pkg exe로만들파일이름.js

라고 쳐주면 정상적으로 실행이 된다면 새로운 파일이 생성된 것을 볼 수 있습니다.

8. 일단 성공

보통은 exe 파일을 실행해야 나오는게 맞지만, 맥은 exe 파일이 아니라 macos 라는 이름으로 끝나느 파일을 실행해주면 됩니다.
패키지가 실행되면서 생성될때 자동으로 OS 별로 실행할수 있는 파일들을 모두 생성해 준다고 하네요. 역시 패키지같은거 아무나 만드는게 아닌가 봅니다. 참 똘똘하네요.

이제 실행해주면 잘 되는것을 볼 수 있습니다. 아주 감격적인 순간이네요

10.조금만 더 개선하기

지금은 한번만 하고 종료되니, 내가 종료하기 전까진 계속 되게 만들어줍니다.

const readline = require("readline");

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

function guguadnStart() {
  rl.question("구구단을 진행할 숫자: ", (num1) => {
    rl.question("단수: ", (num2) => {
      gugudan(num1, num2);

      rl.question("구구단을 이어서 하시겠습니까? (멈춰 를 입력하세요): ", (answer) => {
        if (answer.toLowerCase() === '멈춰') {
          console.log("구구단 프로그램을 종료합니다.");
          rl.close();
        } else {
          guguadnStart(); // 재시작
        }
      });
    });
  });
}

function gugudan(gugudanNumber, multiplyNumber) {
  for (let i = 1; i <= multiplyNumber; i++) {
    console.log(`${gugudanNumber} * ${i} = ${gugudanNumber * i}`);
  }
}

guguadnStart(); // 처음 실행

이젠 구구단 실행이라는 함수를 한개 더 추가하고 rl.question 도 추가해주고 조건문도 추가해줘서 완벽하게 내가 제어할 수 있는 듯한 환경을 세팅해줍니다.
이제 한국인이라면 누구나 알고있는 멈춰 를 입력하기 전까진 이 구구단은 멈추지 않습니다.
하는김에 파일명도 좀 변경해줍니다.