[js입문] 계산기 만들기

See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.

이번에는 자바스크립트를 이용해서 간단한 계산기를 만들어 보았다. 만들기 전에 컴퓨터 계산기의 원리에 대해 구글링 해보았다가 멘탈이 터져서 흐물흐물 해질뻔 했다..

 

암튼, 계산기 형태는 유튜브에서 어느 친절한 유튜버분(수코딩)이 계산기 강의를 하셔서 거기서 참작하여 카피했다. 그 외에는 홀로 직접 코드를 하나 씩 구성하여 기능을 구현하였다.

 

처음 코드를 작성 시 젤 먼저 생각 났던 것은 기존에 존재하는 계산기가 어떠한 방식으로 값을 전달 받아 출력을 하는가에 대한 방향성이었다. 물론, 나의 자그마한 지식으로는 하나하나 독파하는 것은 현재로서는 시간적으로나 실력적으로나 불가능하다고 판단했고, 자바스크립트 안에서 산술을 자동적으로 계산해주는 함수가 있지 않을까 싶어서 찾아 보았더니,

(솔직한 마음으로는 이러한 함수를 직접 구현해보고 싶어서 기초문법을 최대한 활용해서 구성해보았지만,  이틀 이라는 시간동안 해결책이 보이지 않았다 ㅠ..).

eval() 이라는 고마운 존재를 찾을 수 있었다. 이 함수는 인자값으로 사칙연산 기호와 숫자를 알아서 우선순위에 따라 계산을 해주는 내장함수로 이번 계산기 만들기의 핵심이 되는 치트키와 마찬가지였다.

 

즉, 이번에 내가 해야 할 일은 숫자와 기호를 마우스로 클릭 했을 때 그 값이 eval 함수의 매개변수로 전달이 되고, 매개변수로 전달된 값이 실행된 결과가 계산기의 result 창에 뜨도록 하는 것이었다.

 

정리) 기초문법을 독파하면서 반복문과 배열, 조건문, 이벤트 등등에 대하여 많은 것을 알게 되었지만, 이런저런 고민 끝에 eval() 함수를 활용하기로 했기에 그리 복잡한 코드를 구성할 필요 없이 클릭 이벤트를 적극 활용할 것이라는 말

 

 

그렇게 나온 결과물이 현재의 계산기다(총 3일 소요- 2일 시간 낭비/1일 구현). 

 

이번에 계산기 만들기를 해보면서 크게 느낀 점은 다양한 개발자님들이 손수 고생하며 만들어둔 함수의 존재가 얼마나 중요한지를 깨닫게 되었다. eval() 이라는 함수를 뜯어서 본다면, 아마 나는 머리가 바람풍선이 되어 어디론가 날아가버릴지도..

 

무엇보다 다른 개발자님들이 만든 계산기 작성 코드를 보았는데, 같은 자바스크립트의 단순한 계산기 인데도 이렇게 차이가 날 수 있구나 라는 것을 많이 느꼈다. 무엇보다 코드를 구성하는 난이도면에서 부터 눈에 보이는 차이가 났고, 반복문, 조건문 등을 활용하여서도 계산기를 만든 것을 보고 아.. 겉으로는 같아 보여도 언어에 대한 이해 수준에 따라서 이렇게 차이가 날 수 있구나 라는 점을 알게 되었다(생각해보면 당연한 말이네).