[TIL : 4] JavaScript 계산기 만들기

👩‍💻 Nightmare

• . 버튼을 활용하여, 소수를 입력받으세요.
• . 버튼을 연속적으로 눌러도 .은 처음 단 한 번만 입력되어야 합니다.
• 정수부분없이 . 버튼과 숫자를 눌러서 작동시키는 경우 소수가 나타나야 합니다. (.5 === 0.5 )

  demicalFlag라는 변수를 만들어 주어서

  1. 숫자의 처음 . 버튼이 입력이 된다면 숫자 변수의 앞에 0.을 저장해 주고,
  2. 아니라면 .만 저장 해 준 뒤 demicalFlag = 1을 할당한다.
  3. 이후에 demicalFlag = 1임에도 .버튼이 눌리는 것은 숫자 변수에 영향이 가지 않도록 따로 처리해준다.

• Enter 버튼을 여러 번 클릭했을 때, 변수 previousNum 를 활용하여 이전 숫자를 계속 더할 수 있어야 합니다.
• 연산자 버튼을 누르기 전 숫자 버튼을 누른 후에, 실수로 Enter를 여러 번 눌러도 정상 작동해야 합니다.

  Enter 버튼을 누를 경우의 수를 세 가지로 나눈다.

  1. 정상작동하여 <이전 숫자> 연산자 <현재 숫자>를 계산한다.
  2. 연산자가 안 눌린 경우 <현재 숫자>만 저장해 준다.
  3. 나머지는 <이전 숫자>와 연산자를 계산하고, <이전 숫자>에 <현재 숫자>를 할당, <현재 숫자>는 undefined 해 주어 이후 계속되는 연산을 대비해 준다.

• 연산자 버튼을 연속적으로 눌러도 계산 값에 영향이 없어야 합니다.
• 숫자, 연산자, Enter의 순서로 눌렀을 때에도 작동해야 합니다.

  연산자 버튼이 가장 중요하고 까다롭다! Enter 대신 연산자가 눌리면 앞서 숫자들을 계산해주어야 하기 때문이다!

  1. <이전 숫자> 연산자 <현재 숫자>가 모두 있는 경우, Enter 대신 연산자가 눌리면 앞서 숫자들을 계산해주어야 한다! 그리고 <이전 숫자>에는 계산 결과를, <현재 숫자>는 undefined으로 초기화해준다.
  2. <이전 숫자>가 할당되어 있지 않은 경우, 정상 작동되는 것이므로 <이전 숫자>에 <현재 숫자>를 저장해 주고, 눌려진 연산자를 저장한다. 그리고 <현재 숫자>는 undefined으로 초기화해 주어 다음 눌려질 숫자를 대비해 준다.
  3. 이외에는 연산자 버튼이 여러번 눌려진 것이므로 연산자 버튼을 할당해 주고, <현재 숫자>는 undefined으로 초기화해 준다.

📚 그 외

• 이틀 전 하루종일 붙잡고 있다가 안 되던 걸 어제 아침 10분만에 풀었다. 사람은 리프레시가 정말정말 필요한 것인가 보다. 가끔씩 이해가 안 되던 알고리즘이 터덜터덜 집 가는 길에 나무를 보면서 터득되는 걸 보면... 정말 신기하다. 🤩
• 꾸역꾸역 계산기를 만들기는 했지만 정돈이 필요할 것 같다. 분명 더 아름답고 깔끔하게 다듬을 수 있을거야...!
• 무언가를 만들 때 수도코드는 정말 필수인 것 같다. 이것저것 덕지덕지 붙이면서 만들기보다 수도코드로 전체적인 알고리즘을 짜고 들어가니까 이해도 쉽고 구현도 나쁘지 않았던 것 같다. (그렇다고 덕지덕지가 안 되는 건 아니지만 🤣)
• Javascript, CSS, HTML이 조금씩 이해되기 시작했다. 그렇지만 이 세 개를 연결하고 익숙하게 다루기는 쉽지 않다. 아직 뭐 3일차이려나 짧은 시간이지만... 점점 욕심이 난다!