[미니 프로젝트 2] 계산기

짜스의 하루 ·2024년 5월 15일

project

계산기는 미친놈이다

진짜 todo를 할 때에는 솔~~직히
조금 틀려도 틀린대로 뭐 ~~ 이런생각이 있었는데 계산기는 뭐 대충이란게 없이
딱 - 딱 - 딱 - 딱 - 딱 - 이루어져야 하니까
그게 참 ... 고역이였다 🥲

처음에는 강의를 듣고 한번 쭉 같이 해보았는데, 거의 뇌를 빼고 따라친 느낌이라 (사실 투두때보다 너어어무 신경써야할 것도 많고, 어려워서 정신줄을 놨던 것 같다)

다시 혼자서 코드를 작성해 나가기 시작했다.

두번째 프로젝트 : 계산기 만들기 🧾

블랙 앤 화이트 되게 깔끔하게 만들어 보고 싶어서 (숫자도 눈에 잘 들어올 수 있도록)
요런 디자인으로 만들어 보았다 !

1 . html

강의를 보면서 <button data-number>에서 data-number은 뭐지? 라는 생각이 들었다.
이 코드에서 data-number와 같이 속성(attribute)으로 정의된 것을 "데이터 속성" 또는 "data attribute" 라고 한다.
data-number와 같은 데이터 속성을 사용하면 JavaScript와 CSS에서 해당 요소를 선택하거나 특정한 정보를 저장할 수 있으며, 특히 JavaScript에서 요소를 선택하고 조작하는 데 유용하다고 한다.

예를 들어, data-number 속성을 가진 버튼을 JavaScript로 선택하여 숫자 버튼을 클릭할 때마다 계산기의 현재 입력 값을 추적하거나 처리할 수 있다. 이렇게 하면 버튼의 의미를 더 명확하게 전달하고 JavaScript에서 더 쉽게 요소를 조작할 수 있다고 한다!

그래서 늘 class 나 id를 사용했었었는데,
이렇게 공통된 요소를 정의해두면, 코드도 깔끔하고, 어떤 버튼인지의 의미 전달이 더 수월해 질 수 있었다.

2. css

계산기의 모양을 grid를 사용해서 정의해 보았다. grid가 나온 부분만 간단하게 설명하자면,
그리드(Grid) 레이아웃은 웹 페이지의 요소를 수평과 수직의 격자(grid)로 배치하는 데 사용되는 CSS 속성이다. 그리드 레이아웃은 요소들을 보다 유연하게 배치하고 정렬할 수 있도록 도와주며, 반응형 디자인을 쉽게 구현할 수 있다.

grid-template-columns : 그리드 컨테이너의 열(수평)의 크기를 정의합니다. repeat(4, 100px)는 100px 크기의 열을 4번 반복한다는 의미이다.
grid-template-rows: 그리드 컨테이너의 행(수직)의 크기를 정의한다. minmax(120px, auto) repeat(5, 100px)는 최소 120px의 높이를 가진 첫 번째 행을 설정하고, 그 다음 행들은 100px의 높이를 가진 행을 5번 반복한다는 의미한다.
grid-column, grid-row: 그리드 아이템의 열과 행을 지정합니다. span 2는 해당 아이템이 2개의 열에 걸쳐있음을 의미한다.

3. 대망의 JS

숫자 버튼 클릭 이벤트 처리:
$numberButtons에 대해 forEach 반복문을 사용(데이터 속성으로 명시해 두었던)하여 각 숫자 버튼에 클릭 이벤트를 추가한다. 숫자 버튼이 클릭되면 현재 숫자에 해당 숫자를 추가하고 화면을 업데이트한다.
연산자 버튼 클릭 이벤트 처리:
$operationButtons에 대해 forEach 반복문을 사용하여 각 연산자 버튼에 클릭 이벤트를 추가한다. 연산자 버튼이 클릭되면 현재 입력된 숫자와 연산자를 저장하고 화면을 업데이트한다.

화면 업데이트:

updateDisplay() 함수는 현재 입력된 숫자와 연산자를 화면에 표시한다. 연산자 버튼이 있는지 확인하고, 있다면,
$previousDisplay.text에 previousNumberStr 에 연산자 버튼을 더한 값을 반환하고, 아니라면, 빈 값으로 준다.

계산 및 결과 표시:
$equalsButton에 클릭 이벤트를 추가하여 계산을 수행하고 결과를 표시한다. compute() 함수는 현재 입력된 숫자와 이전 숫자를 사용하여 연산을 수행하고 결과를 표시한다.
compute() :

prev와 curr 변수에 각각 이전 숫자(previousNumberStr)와 현재 숫자(currentNumber)를 parseFloat 함수를 사용하여 숫자로 변환하여 저장한다.
isNaN(prev) || isNaN(curr)를 사용하여 이전 숫자와 현재 숫자가 모두 유효한 숫자인지 확인합니다. 하나라도 유효하지 않은 숫자라면 함수를 종료한다.
switch 문을 사용하여 현재 선택된 연산자(operation)에 따라 다른 연산을 수행한다.

삭제 및 초기화:
$deleteButton에 클릭 이벤트를 추가하여 현재 입력된 숫자의 마지막 자릿수를 삭제하고 화면을 업데이트한다.
$allClearButton에 클릭 이벤트를 추가하여 화면을 초기화하고 모든 변수를 초기 상태로 되돌린다.

추가 사항

우리가 보통 계산을 할 때,
4000을 입력하면 4,000으로 천단위로 ,를 표시해주어서 보기 편하게 해주지 않나!

getDisplayNumber(numberStr): 이 함수는 문자열 형태의 숫자를 입력으로 받아서 부동 소수점 숫자로 변환한 후, 소수점 이하 자릿수를 최대 10자리까지로 제한하여 천 단위 구분 기호가 포함된 문자열로 변환한다.
updateDisplay(): 이 함수는 현재 숫자와 이전 숫자를 화면에 표시하는 역할을 한다.

요로코롬 코드를 추가해 보았다