타입스크립트

타입스크립트 angle brackets, 꺾쇠 괄호 <>

타입스크립트의 angle brackets, 꺾쇠 괄호 노마드코더 타입스크립트 10일차 과제는 abstract classes, generics 그리고 overloading 을 이용해 fake API를 만드는 과제다. 과제를 진행하는도중 타입스크립트의 다양한 타입 형태가 나를 헷갈리게 한다. abstract class AbLocationStroage { [key: string]: T } /// LocalStorage를 흉내낸 class class LocalStorageAPI { private stroage: AbLocationStroage = {} } setItem(key: string, value: T) { if (this.stroage[key]) { console.log(`${key} already ex..

Framer-motion 리액트 애니메이션 라이브러리

Framer-motjon 리액트를 위한 오픈소스 프로덕션레디 모션 라이브러리 프로덕션 레디란? 사용자의 요구-사용성, 의존성, 가용성-을 충족 시키는 소프트웨어. 실제 운영 환경에서 구동이 가능한 코드. 설치 npm install framer-motion import { motion } from "framer-motion" export const MyComponent = ({ isVisible }) => ( ) Animations Motion 컴포넌트를 animate 속성을 통해 제어하며, 간단한 애니메이션은 animate props에서 직접 값을 설정할 수 있습니다. Gestures 제스쳐는 리액트 이벤트 시스템을 확장하여 사용하며 호버, 탭, 드래그를 지원합니다. Variants Variants를 통..

[타입스크립트] CRA를 활용하지 않은 TS프로젝트 생성

CRA를 사용하지 않고 타입스크립트 프로젝트를 생성하기 콘솔창에 npm init -y 를 입력, package.json 파일 생성 npm i -D typescript 입력, devDependency에 타입스크립트 추가 타입스크립트 설정 파일 tsconfig.json 생성 이 파일을 통해 vscode는 TS로 작업하는 것을 감지하고 자동완성을 제공한다. { /* Directories for compiled JS */ "include":[ "src" ], "compilerOptions":{ "outDir" : "build", /* Product will be located at */ "target":"ES6", /* Product will be compiled in ES6 */ "lib": ["ES6", "..

[타입스크립트] Call Signatures

TS의 다양한 함수 표현 중 Call signiture에 대해 찾아보던 중, TS핸드북의 예제 코드가 이해되지 않았다. 스택오버플로우의 친절한 설명덕에 이해할 수 있어 정리해본다. Call Signitures 타입스크립트에서, interface로 function을 정의하는 것은 콜 시그니쳐를 추가해주면 가능해진다. type Add = (a:number, b:number) => number; const add:Add = (a,b) => a+b 프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있습니다. Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정합니다. // JS에서는 fucntion도 object이기 때문에 ..