📜 Develop Log
2022.02.28 - STEP1. 콘솔에 값을 출력하는 계산기
2022.03.09 - STEP2. input에 값을 입력 받아 화면에 보여주는 계산기
2022.03.18 - STEP3. button 이벤트로 사용자 입력을 받아 화면에 보여주는 계산기
2022.03.25 - STEP3 보완
1. STEP 1. 콘솔에 값을 출력하는 계산기
Language: HTML, JavaScript
Comment: calculator 객체에 console에 결과값을 찍어주는 plus, minus, multi, divide 메서드를 만들었다.
1.1. ✍️ 요구사항
- 두 수로 덧셈, 뺄셈, 곱셈, 나눗셈이 가능한 calculator 만들기
- console.log로 계산 결과 출력
1.2. 💻 CODE
<code />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
</head>
<body>
<script src="./js/app.js"></script>
</body>
</html>
<javascript />
function App() {
const calculator = {
plus: function (a, b) {
console.log(a + b);
},
minus: function (a, b) {
console.log(a - b);
},
multi: function (a, b) {
console.log(a * b);
},
divide: function (a, b) {
console.log(a / b);
},
};
calculator.plus(1, 2);
calculator.minus(3, 5);
calculator.multi(6, 2);
calculator.divide(20, 3);
}
App();
1.3. 🪄 실행결과
1.4. 🤔 회고
화살표 함수(Arrow Function)을 사용하여 좀 더 간단한 코드로 만들 수 있었다.
코드가 길진 않아서 화살표 함수가 필수적이진 않아 보이지만 의미가 훼손되지 않는 선에서
코드를 최소화하고 중복을 없애는 리팩터링을 수시로 하는 습관을 들이고자 했다.
참고한 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
2. STEP 2. input에 값을 입력 받아 화면에 보여주는 계산기
Language: HTML, JavaScript
Comment: 숫자는 input에 입력받고, 연산자는 button click event를 받아서 계산 결과를 input에 출력하는 계산기
2.1. ✍️ 요구사항
- 두 수를 하나의 input에서 사용자에게 입력받는다.
- 첫 번째 수를 입력 받은 다음 button(+, -, x, /)으로 클릭 이벤트를 받고, 두 번째 수를 입력받는다.
- 두 수와 연산자 클릭 이벤트를 다 입력 받았으면 button(=)을 클릭했을 때 계산 결과가 화면에 출력된다.
2.2. 💻 CODE
<html />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
</head>
<body>
<div>
<form id="calculate-form">
<input
id="input-number"
type="text"
placeholder="숫자를 입력해주세요."
/>
<div id="operation-button">
<button data-ops="plus" class="operation">+</button>
<button data-ops="minus" class="operation">-</button>
<button data-ops="multi" class="operation">x</button>
<button data-ops="divide" class="operation">/</button>
</div>
<button
data-ops="equal"
id="equal-button"
class="operation"
name="submit"
>
=
</button>
</form>
<div id="calculate-display"></div>
</div>
<script src="./js/app.js"></script>
</body>
</html>
<javascript />
const $ = (selector) => document.querySelector(selector);
function App() {
// Variables
let numOne = "",
numTwo = "",
ops = "",
result = "";
// +, -, x, / 을 클릭했을 때 변수에 값을 세팅한다.
const setValue = (e) => {
const isOpsButton = e.target.classList.contains("operation");
if (isOpsButton) {
if (result) {
numOne = "";
numTwo = "";
ops = "";
}
if (!numOne) {
numOne = Number($("#input-number").value);
}
ops = e.target.dataset.ops;
}
};
// = 을 클릭했을 때 input에 결과값을 출력한다.
const displayResult = () => {
if (!numTwo && ops) {
numTwo = Number($("#input-number").value);
switch (ops) {
case "plus":
result = numOne + numTwo;
break;
case "minus":
result = numOne - numTwo;
break;
case "multi":
result = numOne * numTwo;
break;
case "divide":
result = numOne / numTwo;
break;
}
$("#input-number").value = result;
} else {
result = $("#input-number").value;
}
};
$("#calculate-form").addEventListener("submit", (e) => e.preventDefault());
$("#operation-button").addEventListener("click", (e) => setValue(e));
$("#equal-button").addEventListener("click", displayResult);
}
App();
2.3. 🪄 실행결과
2.4. 🤔 회고
input에서 받은 값과 클릭된 연산자의 값을 연산자 클릭 이벤트에서 한번에 저장하려니 순간 혼란이 왔다.
정확한 분기점을 찾기 어려워서 쉬울거라 생각했던 계산기가 한없이 어려워 보였다.
그래서 제일 큰 단위부터 작은 단위까지 순서도를 그려보고 코딩을 시작하니 백짓장 같았던 머릿속에 조금씩 그림이 그려졌다ㅠㅠ
내가 잡은 기준은 이랬다.
click 이벤트를 받을 연산자 버튼과 equal 버튼을 기준으로 numOne과 numTwo의 값에 대해서 기준을 잡았다.
하지만 위처럼 동작하게 할시에 displayResult 함수가 결과를 보여준다는 함수명과는 다르게 numTwo도 저장하고, 계산도 하고, 결과도 보여주기 때문에 displayResult 함수의 의미가 불분명해지는 느낌을 받았다.
또, numOne과 numTwo가 없는 상태에서 연산자 기호를 누르게 되면
<javascript />
numOne = Number($("#input-number").value);
위의 코드에 의해서 numOne에 0이 할당되고, 그 상태로 =(eqaul)을 누르면 NaN 결과가 나온다.
이러한 내용들을 다음 step에서 같이 수정해봐야겠다🥲
3. STEP 3. button 이벤트로 사용자 입력을 받아 화면에 보여주는 계산기
Language: HTML, CSS3, JavaScript
Comment: 기본 계산기 스타일을 적용했고, 숫자와 연산자 모두 button 클릭 이벤트로 값을 입력 받아서 계산 결과를 화면에 보여준다.
3.1. ✍️ 요구사항
- 숫자 버튼을 클릭하면 newNum에 숫자가 하나씩 더해지고 화면에 newNum을 보여준다.
- 연산자 버튼을 클릭하면 newNum을 oldNum에 옮겨준다.
- '=' button 클릭 이벤트로 계산 결과를 화면에 보여준다.
3.2. 💻 CODE 및 실행결과
3.3. 🤔 회고
이전 코드보다는 어떤 상황일 때 이벤트가 동작하는지 한 눈에 보여지는 것 같다 !
두 수에 값이 없을 때 '=' 을 눌러도 NaN이 보이지도 않는다 :)
하지만 두 수만 입력할 수 있다는 단점과 연산자를 두 번 클릭하거나 0으로 나누면 오류가 난다는 점이다.
일단 오류처리 먼저 진행해야겠다!
이번 스텝을 진행하면서 전에 강의에서 봤던 data-* 속성에 대해서 한번 더 보게됐는데 확실히 개인 프로젝트에 적용하니 이해가 더 잘 되었고 사용하기 수월했다.
그리고 최대한 step2의 내용을 업그레이드 하는 식으로 프로젝트를 진행하고 싶었는데 한 스텝씩 코드를 계속 갈아엎어버리는 기분이 들었다.
첫 코드가 굉장히 중요하다는 점과 요구사항을 정확하게 작성해야한다는 것을 깨달았다.
4. STEP 3 보완하기
4.1. ✍️ 수정사항
- css 수정
- 결과값 계산 오류 제거
- 연산자 중복 클릭 오류 제거
- 0이 앞에 보이는 오류
4.2. 💻 CODE 및 실행결과
4.3. 🤔 회고
이번 계산기 프로젝트는 javascript로 기능을 구현하는 것이 주된 목표였어서 css는 크게 신경쓰지않고 ios의 계산기 스타일을 적용했다.
여러 시도를 통해 오류들을 발견하고, 고치는 과정에서 새로운 개념도 배웠고 사소한 오류일 수 있지만 내 힘으로 해결할 수 있다는 점에서 매우 뿌듯했다.
5. 🔗 Github
👇 코드와 에러 해결 과정은 아래 깃허브에서 볼 수 있습니다. 👇
GitHub - mihyunLee/calculator-JS: 자바스크립트 계산기
자바스크립트 계산기. Contribute to mihyunLee/calculator-JS development by creating an account on GitHub.
github.com
'Retrospective > Project' 카테고리의 다른 글
| [AWS] AWS Lambda + S3 연동해서 파일 가져오기 (0) | 2023.11.15 |
|---|---|
| [Vuepress] Vuepress 설치부터 배포 자동화 적용하기 (0) | 2023.09.19 |
| [React] 상품/장바구니 수량 조절 기능 구현하기 (0) | 2023.06.09 |
| [HTML/CSS] 오늘 내 사자는? - 웹 접근성과 성능을 고려하여 TIL 기록 페이지 리팩토링하기 (0) | 2023.05.15 |
| [JS] <progressbar>를 사용하여 설문지의 진행도를 구현해보자! (0) | 2023.04.29 |
