728x90 반응형 TypeScript3 [My Projects] 계산기에 onKeyDown 이벤트 적용하기! 들어가며 얼마 전에 만든 계산기에 onKeyDown 이벤트를 추가했다. 기능 구현은 생각보다 간단했는데 미처 발견하지 못했던 자잘한 버그들이 발생했고 잡는 데 꽤 애를 먹었다. 리팩토링을 거치긴 해야 할 텐데 함수마다 조건문을 무지성으로 휘갈겨놓은 탓에 어디서부터 손을 봐야 할지 감이 잡히질 않는다. 무튼 키보드로 계산기를 조작하는 데 필요한 코드들을 설명해보겠다! onKeyDown 이벤트 구현 코드 const handleKeyDown = (e: React.KeyboardEvent) => { const key = e.key; if (!isNaN(+key) && totalNumber) { handleReset(); if (inputValChecker(inputNumber, key)) { setInputNu.. 2022. 9. 7. [My Projects] 리액트로 계산기 만들기! feat. TypeScript 들어가며 개인 사이드 프로젝트로 재무관리 앱을 만들고 있는데 기능 중 하나로 계산기를 추가하고 싶었다. 언뜻 보기에는 계산기 그까이꺼 사칙연산만 대충 구현하면 되는 거 아닌가?!?! 싶어서 후딱 끝낼 줄 알았는데 주말 이틀을 꼬박 매달리고서야 완성했다. 처음부터 타입스크립트를 적용하려 하니 아직 사용법에 익숙치 않아서 이곳저곳 뻥뻥 터지는 에러들을 잡아내기 바빠 작업이 전혀 진전되지 않았다. 이대로는 답이 없을 것 같아 우선 순수 리액트로 작업을 마친 다음 복붙을 하여 오류가 뜨는 부분만을 잡아나가는 식으로 작업 방식의 가닥을 잡았다. 기본 구상 계산기의 전체적인 스타일링은 styled-components를 활용하였다. styled-components로 스타일을 적용하니 자주 쓰이는 style-set을 .. 2022. 9. 5. [TypeScript] 인터페이스(Interfaces) VS 타입(Type) 이번 글은 'Learning TypeScript'의 Chapter 7. Interfaces 내 'Type Aliases Versus Interfaces' 단락의 내용을 요약한 것입니다. 들어가며 타입스크립트에는 객체 형태를 나타내기 위한 방법인 타입 별칭(type aliases) 및 많은 개발자들이 선호하는 인터페이스(Interfaces)도 존재한다. 인터페이스 역시 객체 형태를 선언하기 위한 방법이다. 이는 타입 별칭과 매우 유사하나 에러 메시지가 비교적 정확히 출력되고, 컴파일러 성능이 뛰어나며 클래스와의 상호 운용성이 보다 뛰어나기 때문에 개발자들이 더 선호한다. 두 표현법은 거의 같아 보인다. 하지만 둘 사이에는 몇 가지 차이점이 있다. 차이점 인터페이스는 병합(merge)되어 확대될 수 있다. .. 2022. 8. 16. 이전 1 다음 728x90 반응형
