typescript4 [React] 숫자 증가 애니메이션 만들기 (with. TypeScript) 여러 웹 서비스를 이용하다 보면 숫자를 강조하는 방법 중 하나로 숫자가 빠르게 올라가는 애니메이션을 확인할 수 있습니다. 리액트를 이용하여 어떻게 구현할지에 대해 작성해보도록 하겠습니다. ❗️ 조건 1. 숫자는 0부터 시작해서 증가해야 합니다. 2. 숫자들이 주어진 시간 동안 증가하는 애니메이션을 보여주어야 합니다. 3. 시간이 흐를수록 숫자 증가량이 줄어들어야 합니다. (easeOut 효과) 📖 컴포넌트 및 변수 구성 컴포넌트와 변수는 해당 포스트 작성을 위해 임의로 작성된 내용입니다. 최종적으로 보여질 숫자와 텍스트를 변수로 저장하였습니다. 부모 컴포넌트를 하나 생성하고, 그 아래에 방문수, 좋아요, 댓글수가 보여질 컴포넌트를 반복문을 이용하여 생성하였습니다. type TyContents = [str.. 2022. 7. 7. Honey Pick - 사용자 쇼핑 상품 공유 및 추천, 투표 서비스 본 포스트는 프로젝트에 관한 간략한 설명, 관련 포스트 링크 내용등이 작성되어 있습니다. 상세 설명 및 코드, 서비스 화면 등을 확인하기 위해 중간에 작성된 Github 링크를 이용부탁드립니다. 🎁 Honey Pick 💡 프로젝트 소개 코로나로 인하여 온라인 쇼핑몰 시장이 성장하고, 온라인 쇼핑몰의 종류는 기하급수적으로 증가하고 있습니다. 자주 애용하는 물건이나 구매하고 싶었던 물건들이 많아질수록 모든 사이트를 기록하는 관리는 어려워지고 있습니다. 또한, 인플루언서와 같은 본인만의 개성이 있는 사람들이 애용하고 관심을 갖는 상품 정보를 쉽게 공유 받고 싶어합니다. 저희의 서비스는 여러곳으로 흩어진 쇼핑몰들의 상품 정보들을 하나의 앱에서 확인하고 관리가 가능합니다. 그리고 본인만의 개성이 있는 사람들의 상.. 2022. 5. 1. [React with Typescript] React에 Typescript 적용시키기 (1) 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. 📝 React에 TypeScript 적용시키기 (1) 본 글은 자세한 개념 정리가 아닌, 공식문서 및 여러 강의를 듣고 개인 학습 및 복습용으로 작성하였습니다. 리액트에 타입스크립트 추가하기 CRA (create-react-app) 을 통해서 간단하게 적용시킬 수 있습니다. 초기 새로운 프로젝트를 생성할때 적용시키기 위해서는 아래의 명령어를 사용하면 됩니다. npx create-react-app my-app --template typescript 리액트 프로젝트 생성을 위해서는 --template 옵션이 들어가지 않아서 모르다가 타입스크립트를 추가하면서 처음 접.. 2022. 1. 8. [TypeScript] 기초 학습 (1) 개인 학습 과정에서 작성한 markdown 문서로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용 또는 개선 방안을 말씀해주시면 수정하겠습니다. 📝 TypeScript 기초 학습 (1) TypeScript 학습을 위해 공식문서를 참고하여 읽고 정리한 내용입니다. 1. 배경 타입스크립트(TypeScript) 는 자바스크립트(JavaScript) 를 기반으로 한 확장된 언어로 타입스크립트에서는 자바스크립트의 모든 문법을 사용할 수 있다. 자바스크립트에서는 string, number, object 등 데이터 타입이 있지만, 변수에 직접 지정해주지 않고, 값을 넣을때마다 데이터 타입을 모두 담을 수 있다. 이런 특징은 변수 타입을 지정하지 않아도 되고 모든 타입의 값을 할당할 수 있어 좋을 수 있지만, 프로그래.. 2022. 1. 1. 이전 1 다음
