js 계산기 -> ts로 바꾸기

박지윤·2022년 9월 16일
0
  • 예전에 어설프게 만든 js 계산기를 발견하여 ts 공부 겸 바꿔보았다.
    물론 보완해야할 것이 많은 계산기지만 공부한다는 의미에서...
    css를 안 해놔서 간단하게 해보았다. 엉성한 디자인이지만 안 하는 것 보단 나은 거 같다.

처음으로 코드팬을 사용하여 코드를 올려봐서 그런지 어색하다.
성실히 공부한 내용을 좀 올려보도록 해야겠다. 정리를 안 하니 공부를 안 하고 있는 것 같고 머리 속에도 뒤죽박죽 들어있는 거 같다.

  • HTML
    다음에는 돔을 이용해서 HTML 태그를 다뤄보아야겠다.

  • CSS
    요즘 css 말고 다른 것만 하다보니 감을 잃어가고 있다. css도 놓치지 말고 꾸준히 연습 좀 해야겠다.

  • flex, grid, inline, block 등등

  • sass도 다시 봐야할 듯

  • TypeScript

  • result


결과물은 이렇다!

* 부족한 점!
1. 계산은 한 번만 가능하다! ex) 1+2+3(x) 1+2(o)
2. .을 이용한 소수점 계산이 안 된다. 소수점을 연산자 취급하여 만들어버렸다!
3. 지우려면 다 지워야한다. 하나씩 지우는 것 안 된다!
4. 결과 출력을 div에 innerHTML을 이용했다. 입력값에 따라서 크기를 조종할 수 없어서 input이나 textarea를 이용해서 많은 식을 만들 수 있도했으면 좋았을 거 같다.
5. 어설픈 CSS/뭔가 어색하다... 나름 효과도 구현해 놨는데 연습이 필요하다.
6. 가끔 모든 button 태그의 값이 모두 출력되는 에러가 발생한다. button 요소를 가지고 오기 위해서 상위 태그를 이용해서 가져왔는데 그래서 태그 안에 있는 모든 요소가 출력이 되버리는 거 같다. 따라서 분리가 필요할 듯 하다.
7. enter를 눌렀을 때 식이 완성되어 있지 않으면 = 0을 출력하는데 그냥 첫번째로 입력한 수를 그대로 두고 싶다.
8. 이름 작명! 어설프고 어떤 내용인지 구분이 안 가는 작명을 하는 중이다 . 좀 더 직관적이고 괜찮은 변수 이름을 생각해야겠다.

profile
화이팅~

0개의 댓글