본문 바로가기

소소한 코딩 이야기/My Project Story

[CashBook Project] 1. 계산기 구현하기 (수정)

현재까지 구현 된 계산기의 모습 입니다.

 

계산기의 기본적인 동작 코드는 여러 해외 유투브 영상을 참조하였으며, 디자인 및 기타 코드를 덧붙여 보는 형식으로 

진행하고 있습니다.

 

앞서 올렸던 포스트 상의 계산기는 기본기능만 갖췄었다면 현재는 위 코드와 같이 계산기에 입력한 공식을 눈으로 볼 수 있도록

input 태그를 추가하여 v-model로 바인딩 해 주었습니다.

 

숫자 버튼 및 연산과 관련한 버튼도 테이블 태그를 이용하여 구현하였으며, @click 이벤트를 통하여 methods에

선언된 메소드가 실행될 수 있도록 하였습니다.

 

지금 상태에서도 연산기능을 사용하는 것은 모두 가능하지만 한가지 아쉬운점은 아래 코드와 같이 진행을 할 경우

연산기록을 표시하는 과정에서 연산을 연달아 누르면 기존의 연산이 바뀌는 것이 아니라 그대로 ' 123++456 '

와 같이 반영된다는 것 입니다.

 

일단 기본적인 기능의 구현은 모두 끝났으니 추가기능은 차차 생각해 보기로 하고 다음 포스트에서는 JWT를 이용하여

회원가입 및 로그인 기능 구현 과정에 대해서 포스팅 해 보겠습니다.

 

==============추가 수정 사항=============

1. equal( = ) 버튼을 누를 경우, 연산식 마지막에 =result값이 더해지도록 설정

2. 연산이 모두 종료 된 이후 ('='을 누른 이후)에도 계속 equal ( = )이 눌리는 현상 해결

3. 새로운 연산이 시작 되면 result와 calculatorRec 에 담긴 값을 모두 초기화 하도록 설정