현재까지 구현 된 계산기의 모습 입니다.
계산기의 기본적인 동작 코드는 여러 해외 유투브 영상을 참조하였으며, 디자인 및 기타 코드를 덧붙여 보는 형식으로
진행하고 있습니다.
앞서 올렸던 포스트 상의 계산기는 기본기능만 갖췄었다면 현재는 위 코드와 같이 계산기에 입력한 공식을 눈으로 볼 수 있도록
input 태그를 추가하여 v-model로 바인딩 해 주었습니다.
숫자 버튼 및 연산과 관련한 버튼도 테이블 태그를 이용하여 구현하였으며, @click 이벤트를 통하여 methods에
선언된 메소드가 실행될 수 있도록 하였습니다.
지금 상태에서도 연산기능을 사용하는 것은 모두 가능하지만 한가지 아쉬운점은 아래 코드와 같이 진행을 할 경우
연산기록을 표시하는 과정에서 연산을 연달아 누르면 기존의 연산이 바뀌는 것이 아니라 그대로 ' 123++456 '
와 같이 반영된다는 것 입니다.
일단 기본적인 기능의 구현은 모두 끝났으니 추가기능은 차차 생각해 보기로 하고 다음 포스트에서는 JWT를 이용하여
회원가입 및 로그인 기능 구현 과정에 대해서 포스팅 해 보겠습니다.
==============추가 수정 사항=============
1. equal( = ) 버튼을 누를 경우, 연산식 마지막에 =result값이 더해지도록 설정
2. 연산이 모두 종료 된 이후 ('='을 누른 이후)에도 계속 equal ( = )이 눌리는 현상 해결
3. 새로운 연산이 시작 되면 result와 calculatorRec 에 담긴 값을 모두 초기화 하도록 설정
'소소한 코딩 이야기 > My Project Story' 카테고리의 다른 글
Spring Boot properties 우선순위 주기 (0) | 2020.07.07 |
---|---|
vue/cli axios를 이용하여 백엔드 통신하기(회원가입) (0) | 2020.07.03 |
계산기 기능 추가 진행중..! (0) | 2020.06.18 |
[Web Cashbook Project] 화면 구성잡기 30%완료. 드디어 첫 발을 내딛다. (0) | 2020.06.16 |
도무지 풀리지 않는 app.vue에서 레이아웃 잡기(해결!) (0) | 2020.06.16 |