계산기 웹 애플리케이션 제작 with vanilla JavaScript

프레임워크나 라이브러리를 사용하지 않고, 오직 자바스크립트만으로 계산기 애플리케이션을 제작하였습니다.

 

스스로 공부하면서 구현해본 첫 프로젝트인 만큼 저에게 의미가 있는 시간이었습니다.

 

기간: 2023/10/08 ~ 2023/10/13 (6일)

 

제작하면서 배운 점과 힘들었던 점을 글로 작성하고자 합니다.

 

파일 구조

 

바닐라 자바스크립트 계산기!

 

기능 설명:

2개의 숫자에 대해 덧셈이 가능합니다.

2개의 숫자에 대해 뺄셈이 가능합니다.

2개의 숫자에 대해 곱셈이 가능합니다.

2개의 숫자에 대해 나눗셈이 가능합니다.

AC(All Clear) 버튼을 누르면 0으로 초기화 합니다.

☒(Backspace) 버튼을 누르면 가장 최근에 입력된 값을 제거합니다.

=(Calculate) 버튼을 누르면 계산 결과를 출력합니다.

숫자는 한번에 최대 열 자리 수까지 입력 가능합니다.

계산 결과를 표현할 때 소수점 이하는 버림합니다.

숫자 입력은 클릭과 키보드 입력으로 가능합니다.

AC(All Clear) 버튼은 키보드의 ESC 키를 눌러도 동작합니다.

☒(Backspace) 버튼은 키보드의 Backspace 키를 눌러도 동작합니다.

=(Calculate) 버튼은 키보드의 Enter 키를 눌러도 동작합니다.

 

 

제작하면서 배운 점 1:  

숫자의 결과값이 보여지는 html 요소를 <h1>으로 정하게 되었는데, 숫자의 길이가 길어지게 되면 숫자가 검은색 영역을 벗어나게 되므로 <h1>의 innerText 값이 변경될 때마다  innerText의 length를 가져와서 정해진 조건문에 따라 <h1>의 font-size를 변경하는 기능을 만들고 싶었습니다. 

 

첫 아이디어는 addEventListener의 매개변수 type의 값 중 change 이벤트를 통해 기능을 만들려고 했습니다. 그러나 change 이벤트는 <input>, <select>, <textarea> 태그에만 적용된다는 것을 알게 되었습니다.

 

두 번째 아이디어는 MutationObserver() 함수를 통해 DOM tree의 변경을 캐치하여 기능을 구현하는 것이었습니다.

index.js -> MutationObserver()

h1태그를 total에 할당하고 observer 변수에 할당한 MutationObserver()함수 내부에서 currentLength변수에 h1태그의 text의 값을 할당하였습니다. observer.observe(total, config)을 통해서 currentLength의 값을 지속적으로 확인하게 만들었습니다. 

만약 currentLength가 각 조건문에 맞게 포함된다면, h1태그의 클래스 이름을 추가하거나 제거하여 font-size를 줄이고 늘리는 기능을 구현하게 되었습니다.

 

 

제작하면서 배운 점 2:

정규표현식(RegExp)을 활용할 수 있게 되었습니다. 

const.js -> 정규표현식

index.js -> 정규표현식을 사용하여 숫자 키의 입력 자리수 제한

정규표현식을 통해 total의 innerText 값중 0번째 string이 '-'이 있거나 없기, 한 자리수부터 열 자리수까지의 숫자, (/,X,-,+)연산자 기호 한개, 한 자리 수부터 열 자리수까지의 숫자를 정의하였습니다.

사용자는 첫 입력에 숫자를 10자리까지 입력할 수 있고, 연산자를 한 개 입력할 수 있으며 연산자를 입력한 뒤 다시 숫자를 10자리까지 입력할 수 있습니다. 이후 계산식에서 음수가 나오게 될 경우의 수를 생각하여 0번째 string이 '-'가 있거나 없는 정규표현식까지 정의했습니다.

 

 

힘들었던 점:

코드를 리팩토링하는 능력이 아직 부족합니다. 또한 코드를 명령형으로 짜는 습관이 있습니다. 추상화를 통하여 선언형으로 코드를 짜는 습관을 만들어야 할 필요성을 느꼈고 이를 개선하기 위해 노력중입니다.

좋은 코드는 잘 동작하는 것이 우선이지만, 남이 보았을 때 이해가 쉽게 만드는 것도 중요합니다. 이해하기 쉬운 코드를 만드는 개발자가 되고싶습니다. 

 

 

프로젝트 깃허브 링크: https://github.com/K-Y-Hoo/JS-Calculator

프로젝트 배포 링크: https://k-y-hoo.github.io/JS-Calculator/