[Mini] 사칙연산 계산기 개발 #1

세세님·2025년 11월 22일

JavaScript 개발

1. 개발 프로젝트 주제

사칙연산과 기타 기능이 가능한 웹 페이지 계산기를 개발해보자.

기본 기능 구현
1) 덧셈, 뺄셈, 곱셈, 나눗셈 사칙연산이 가능하다. (*오늘의 주제)
2) 작성된 내용이 모두 삭제되는 Clear 기능이 가능하다.
3) 계산기의 전원을 켜고 끌 수 있어야 한다.
~~심화 기능 구현 (아직은 비활성화)~~
1) 소숫점 자리를 통한 사칙연산이 가능하다.
2) 백분율 계산이 가능하다.

2. 역할 분담

HTML/CSS 기본 구성 - Claude AI 활용
Javascript - 나

큭... Javascript 코드 작성 연습과 DOM API 연습을 위해 Javascript는 직접 작성할 겁니다.

웹 디자인의 솜씨는 저의 비루한 실력을 공개할 수 없어, 신통방통 금방 예쁘게 제작해주는 Claude AI를 활용해보았습니다.

네. 저는 디자인이 안 예쁘면 다음 진행을 못하는 병에 걸려 있습니다.
그런데 이런 저의 병을 단번에 낫게 해줄만큼, Claude AI의 디자인은 약간의 벤치마킹할 요소를 던져주면, 정말 기가 막히게 예쁘게 만들어줍니다.

일단 Claude를 통해 구현한 계산기 디자인과 배치 요소는 다음과 같습니다.
당연히 Javascript 코드는 제가 직접 작성할 거라, script 동작 부분은 일부로 빼달라고 요청하여 실제 동작은 하지 않습니다.

이제 계산기가 동작이 되도록 한 번 코드를 구현해보겠습니다.

3. Javascript 구현

[주의] Javascript 코드는 처음이라, 코드가 다소 비효율적일 수 있습니다.

* 숫자 입력 (하나씩)

// 배열로 숫자 버튼 한번에 구현
const arrayBtns = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9];

arrayBtns.forEach(function(btn) {
   btn.addEventListener('click', function() {
      display.textContent = btn.textContent;
   });
});

구현한 결과는 이렇습니다.

어라, 근데 예를 들어 '12' 같이 십의 자리 숫자 이상은 입력이 안됩니다.
그럼 일의 자리만 사칙연산되는 계산기라고 우겨볼까 싶습니다.

하지만 그런 기본 입력조차 안되는 계산기는 아무도 안 쓰겠죠? (^^)

휴 그럼 숫자를 연달아 입력할 때는 줄줄이 숫자가 입력되도록 다시 구현해 보겠습니다.

* 숫자 입력 (여러 개)

arrayBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
       if(display.textContent == 0) {
          display.textContent = btn.textContent;
       } else {
          display.textContent += btn.textContent;
       }; 
    });
});

Javascript 강의에서 배웠던 배열과 조건문을 모두 적용해보았습니다.

1) display가 0 (입력X) - 숫자로 변경
2) display가 숫자 (입력O) - 기존 숫자에 새로운 숫자 추가

이제 십의 자리뿐만 아니라 그 이상도 눌러집니다. 신기합니다.

그럼 이제 본격적으로 메인인 사칙연산 기능을 구현해보겠습니다.

* 사칙연산 기능

덧셈, 뺄셈, 나누기, 곱셈 계산은 사실 너무나 쉽습니다.
하지만 갑자기 프로그램으로 구현을 하라니까 조금 아니 꽤 막막하군요.

그나마 떠오르는 아이디어는, 사칙연산 버튼을 누르기 전 값과 누른 후의 값을 가지고 어떻게 뚝딱 만들어야 한다는 건데, 이게 감이 안 잡힙니다.

일단 변수부터 선언해보겠습니다.

1) 변수 선언 & 생각하기

pre 이전 값 (첫번째 숫자)
curr 현재 값 (두번째 숫자)
icon 사칙 연산 기호 저장
isInput 값이 입력 되었는지 확인하는 boolean 변수

let pre = 0;  // 이전 값
let curr = 0;  // 현재 값
let icon = '';  // 사칙 연산 기호
let isInput = false;  // 숫자 초기화

음. 저의 생각은 이렇습니다.

숫자 입력 (첫번째 숫자)

사칙연산 버튼을 누르면
1. 입력한 숫자를 이전 값(pre)에 넣는다
2. 사칙연산 버튼의 기호를 기억해둔다 -> 나중에 equal(=) 때 써야함
3. 입력한 숫자를 초기화한다

다시 숫자 입력 (두번째 숫자)

계산

2) 코드 구현

1. 숫자 입력(첫번째 숫자)

// 기존 코드 활용
const arrayBtns = [btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9];

arrayBtns.forEach(function(btn) {
   btn.addEventListener('click', function() {
      if (display.textContent == 0) {
         display.textContent = btn.textContent;
      } else {
         display.textContent += btn.textContent;
      }; 
   }); 
});

2. 사칙연산 버튼 구현

const calBtns = [
   {cal_btn : btnPlus, op : '+'},
   {cal_btn : btnMinus, op : '-'},
   {cal_btn : btnMultiply, op : '*'},
   {cal_btn : btnDivide, op : '÷'}
];
    
// 사칙연산 버튼 누를 때 실행
calBtns.forEach(function(cal) {
   cal.cal_btn.addEventListener('click', function() {
      pre = Number(display.textContent); // display 값을 pre에 삽입
      icon = cal.op; // 사칙연산 기호 넣기
      isInput = true; // 값이 입력됨 -> 초기화 필요
   });
});

3. 다시 숫자 입력 (두번째 숫자)


// 1 코드를 변경
arrayBtns.forEach(function(btn) {
   btn.addEventListener('click', function() {
   	  
      if(isInput) { // *추가* 값 입력 시 초기화
         display.textContent = btn.textContent; // 두번째 숫자
         isInput = false;
   	  } 
     
      else if (display.textContent == 0) {
         display.textContent = btn.textContent;
      } else {
         display.textContent += btn.textContent;
      }; 
   }); 
});

4. 계산

btnEquals.addEventListener('click', function() {
   curr = Number(display.textContent);

   if(icon === '+') { // 덧셈
      display.textContent = pre + curr;
   } else if (icon === '-') { // 뺄셈
      display.textContent = pre - curr;
   } else if (icon === '*') { // 곱셈
      display.textContent = pre * curr;
   } else if (icon === '÷') { // 나눗셈
      display.textContent = pre / curr;
   }

   isInput = true; // 계산 끝! 다음 입력 준비
  
  });