자바스크립트 기본 논리적 구조만들기(feat.계산기)

자바스크립트를 통해 계산기를 만들면서 많은 어려움을 맞이하고 열심히 검색을 통해 어떻게 어떻게 누더기가 된 코드로 기능을 하게 만들었다. 

 

그리고 나서 reference code를 보니 망치로 머리를 맞은 것 같은 충격을 받았다. 

 

나는 코딩을 함에 있어서 하나하나의 기능을 구현해보는데 전전긍긍했다. 

아무래도 코딩을 처음시작하였기때문에 어쩔수 없다고는 생각하지만, 

 

reference code를 보는 순간 이러한 하나의 기능을 만드는 것도 중요하지만, 전체적인 논리구조를 파악하고 

거기에 기반하여 코딩을 진행하는 것이 중요하다는 생각이 들어 스스로 채찍질하고 잊지 않기위해 이 글을 적게 되었다. 

 

아래는 계산기의 논리 구조이다. 

 

 

계산기의 작동모습

계산기는 1)내가 처음누른 숫자 와 2)두번째 누른 숫자를 3) 눌려진 사칙연산을 통해 4)답을 도출한다. 

 

답을 도출 할 수 있는 함수를 

function cal(n1, operator, n2){

}라고 선언하고 내용을 사칙연산이 되도록 알맞게 적었다고 가정하자. 

 

내가 주목하고 싶은부분은 여기에서 n1과 n2 매개변수에 있다. 

과연 함수 cal에 있는 n1과 n2의 매개변수에 어떠한 값을 줄것인가?

당연히 내가 처음 눌렀던 숫자가 n1, 두번째 누른 숫자가 n2가 될것이지만, 

 

내가 이를 코딩으로 나타내려고 할때에는 굉장히 난감하였다. 

 

이를 코딩적으로 접근하기 위해서는 조금 다른 관점에서 접근할 필요가 있다. 

 

 우선, 내가 처음 누른 숫자는 내가 사칙연산을 누른 후, 숫자를 누른 시점부터 화면에서 사라지게 되므로 저장할 필요가 있다. 

 

이를 위해서는 사칙연산 operator버튼이 눌러질때, 화면에 보여지고 있을 처음누른 숫자를 저장할 필요가 있다. 

 

그리고 난뒤, 내가 2번째 숫자까지 다 누르게 되면 해당 화면에 보이고 있는 숫자는 두번째 숫자 즉, n2가 되게 됨으로

나는 cal(저장한값, operator, 지금화면에보여지는값)으로 전달인자를 입력하여 값을 도출 할 수 있는 것이다. 

 

이번과 같은 누더기 코드를 만들지 않기 위해서 

앞으로 여러 프로젝트를 진행함에 있어서 우선 이러한 논리구조를 짜기 위해 노력할 것이다.