오늘은 계산기를 작동시키기를 하였다. html과 css로 구현된 계산기 껍데기에 자바스크립트로 영혼을 불어 넣는 작업이다. 이미 각 class에 코드가 다 연결되어있고 거기서 나와 팀원이 코드를 추가하여 가동되게 만드는 일종의 퀴즈였다.
난이도는 세단계로 나뉘었는데 첫번째 단계에선 0 + 0 = 0 형식으로 보여지는 우리가 아는 계산기 보다 훨씬 직관적이고 단순한 모영이었다. 크게 네가지의 과제를 해쳐나가야했다.
1. 첫번째 자리에 숫자 보이기
어렵지 않았다.
if (target.matches('button')) {
if (action === 'number') {
firstOperend.textContent = buttonContent;(여기서 보이는 'button'과 'number'는 html의 클래스이다. 그리고 buttonContent는 버튼을 누를 때 입력한 컨텐트를 할당 시켜놓은 변수이다. firstOperend는 html 첫번째 숫자 디스플레이를 할당하였다.)
1 + 0 = 0 이런식으로 바뀌었다. 아직 계산기 기능을 하기엔 멀었다.
2. 두번째 자리에 숫자 보이기
우리의 수준에선 벌써 난관이었다. 그런데 코드스테이츠측에서 힌트를 던져주었다.
'첫번째 자리의 숫자가 0이 아니면 무엇인가 입력된 상태이고 그러면 2번 째 자리에 입력되게 만들면 된다.'
(이것보다 친절하게 적혀있었지만 내가 이해한대로 적었다.)
if (target.matches('button')) {
if (action === 'number') {
if(firstOperend.textContent === '0'){
firstOperend.textContent = buttonContent;
}else if(firstOperend.textContent !== '0'){
secondOperend.textContent = buttonContent;
}
}이런식으로 만들어 보았다. 작동은 되었다.
그러나 문제는 지금처럼 아주 단순한 형식의 계산기에선 작동을 하지만 만약 우리가 실상에서 쓰는 계산기 처럼 작동하게 만들려면 설정한 조건문엔 반드시 문제가 있다.
3. AC버튼을 눌러서 초기화 시키기
이것또한 어렵지 않았다. 그냥 다 0으로 할당 시키면 되는 것!
if (action === 'clear') {
firstOperend.textContent = '0';
operator.textContent = '+';
secondOperend.textContent = '0';
calculatedResult.textContent = '0';
}(참고로 operator, calculatedResult 는 각각 연산자 자리와 결과값 자리의 디스플레이가 할당된 변수이다.)
모두 기본값으로 바꿔주면 간단한 문제.
4. Enter를 눌렀을 때 연산이 되게 만들어라
caculate(n1 , operator, n2) 라는 빈 함수가 주어져 있었고 그 함수를 계산이 가능하게 채워주는 문제이다.
먼저 caculate 함수를 만들고.
function calculate(n1, operator, n2) {
//여기서 부터 밑으로 우리가 채워넣은 부분
let result = 0;
if(operator === '+'){
result = Number(n1) + Number(n2);
}else if(operator === '-'){
result = Number(n1) - Number(n2);
}else if(operator === '*'){
result = Number(n1) * Number(n2);
}else if(operator === '/'){
result = Number(n1) / Number(n2);
}
return String(result);
}어렵지 않아 보였지만 Enter키와 연동을 시킨다는 점에서 조금 이해가 어려웠다.
if (action === 'calculate') {
return calculatedResult.textContent = calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent);
}이렇게 완성 시켜주니 작동은 하였다.
일단 일단계는 클리어!
생각보다 빠른 클리어에 놀란 우리.... 다음 단계로 넘어갔다. 다음단계에선 우리가 아는 그 계산기를 구현하는 과정인데...... 실패하였다.....
숫자가 하나하나 누적되어서 입력되는 것 까진 성공했지만. 계산작업은 도저히 엄두가 나지 않았다.
그래서 친구에게 도움을 청했다. 친구의 말.
저런식으로 코드를 작성하면 분명히 안될거다.
그렇다 .. 내가 생각한 그 문제가 여기서 발생했다. 단순이 0일 때와 아닐 때를 구분하여 넘버를 입력하는 방식은 다른 코드를 짤 때 충돌하는 일을 많이 발생시켰다.
친구의 힌트.
불린 변수를 따로선언하여 눌렀을 땐 스위칭이 되게 만들어라.
머리를 한대 꽝 맞는 느낌이었다. 그래 저렇게하면 얼마나 단순해지는가....
시간이 없어 직접 해보진 못했다. 주말에 시간이 나면 꼭 해볼것이다.
*느낀점
코드를 짤 때 설계가 아주 중요하다 생각했다.
첫 시작부터 잘 만들어 두어야 나중에 수정할 때 골치가 아프지 않다는 것을.
게임을 할 때도 종종 이런일이 있었던 것 같다. 어떠한 버그에 대해 고쳐달라고 말을 하면
'이것을 고칠려면 코드를 처음부터 다시 짜야한다' 라는 말. 이젠 이해가 간다. 만약 그 버그를 고치기위해 건드렸다간 다른 것에서 연쇄적으로 버그가 발생할 것이라는 걸.
변수활용을 잘하여 문제가 일어날 수 있는 가능성을 최소로 하자!!!!!
