TypeScript 17 [리액트] 부드럽게 이동하는 숫자 컴포넌트를 구현하는 방법(feat.타입스크립트) 사이드 프로젝트를 진행하면서 다른 웹페이지를 많이 보고 공부하고 있습니다. 그러던 와중에 로빈후드의 주가 차트 창에서 숫자가 미끄러지며 나타나는 기능을 봤는데 매우 역동적이고 멋져 보여서 한번 구현해볼까 생각하게 되었습니다. 계속 찾아보니 JQuery로 구현하는 방법은 많이 있습니다. 그리고 간단하기도 했습니다. 하지만 저는 JQuery는 안쓰자는 주의라(실은 제대로 공부해본 적이 없어서 가져다 쓰기가..) 순수 JS나 CSS로 구현된 것이 있나 살펴보았지만 딱 로빈후드만큼 역동적으로 지원하는 코드는 없어서 한번 구현해보기로 했습니다. 단순히 숫자가 올라가는 코드의 경우 해당 숫자 영역을 잡고 JS코드로 빠르게 숫자를 올려주면 되는 것이지만 저건 스크롤하듯 올라가거나 내려가야 해서 고민했습니다. 구현 시.. 2021. 5. 13. [리액트] 특정 엘리먼트에 focus 주는 방법에 대하여(feat.타입스크립트) 들어가며 특정 버튼을 눌렀을때 입력창이 뜨고 텍스트를 입력합니다. 근데 텍스트 입력이 안됩니다. 귀찮게 마우스로 입력창을 누르고 다시 키보드로 옮기는 과정이 필요합니다. 매우 귀찮죠. 그럴때 필요한 기능이 바로 리액트 컴포턴트에 focus를 주는 것입니다. 이번 글에서는 바로 이 기능에 대한 간단한 구현과 예시를 살펴보겠습니다. 자바스크립트에서의 Focus 일단 리액트의 focus를 들어가기 전에 HTML의 focus에 대해 간단히 살펴보겠습니다. 기본 사용법 HTMLElement.focus() - Web APIs | MDN The HTMLElement.focus() method sets focus on the specified element, if it can be focused. The focused.. 2021. 5. 10. [타입스크립트] jest , import svg 할때 생기는 문제점에 대하여 이번 포스트는 정확한 지식이 아닐지도 모른다는 두려움을 가지고 글을 시작하겠습니다.(아직 공부중이라..ㅜㅜ) 타입스크립트로 마이그레이션 하는 도중에 기존에 없었던 테스트 코드를 작성해보자고 마음을 먹고 facebook에서 만든 Jest를 사용해보고자 했습니다. Jest를 선택한 이유는 Jest 홈페이지 첫 화면에 있습니다. ==> 홈페이지( jestjs.io/ ) Babel, Typescipt, Node, React를 제가 사용하고 있기 때문에 제 상황에 아주아주 적절한 테스팅 프레임워크라고 판단했습니다. 이러한 이유로 공식문서를 읽어가며 함수에 대한 테스트 코드를 만들고 이젠 class에 대해 테스트 코드를 만들고 테스트를 실행했는데!! FAIL이 떠버립니다. 안되는 이유는 다양하니 어떤 이유로 안 되.. 2021. 3. 16. [타입스크립트] 제네릭에 대하여 다음 코드를 한번 살펴보겠습니다. 들어온 number type의 arg를 그대로 돌려주는 함수가 있습니다. function identity(arg : number) : number { return arg; } 근데 number type 뿐만 아니라 string type이라면, 또는 boolean type이라면 어떻게 할까요? function identityNum(arg : number) : number { return arg; } function identityString(arg : string) : string { return arg; } function identityBoolean(arg : boolean) : boolean { return arg; } 이렇게 하나씩 구현을 하는 건 누가 봐도 멍청해.. 2021. 3. 15. 이전 1 2 3 4 5 다음
