타입스크립트 썸네일형 리스트형 Typescript 앱 생성하기(초기 셋팅 방법) JS 프로젝트를 TS 프로젝트로 마이그레이션 하기 or TS 템플릿으로 생성하기-> 마이그레이션 시 보통 파일을 하나씩 변경한다. 1. 직접 react-create-app 마이그레이션 하기1) 리액트 앱 생성 및 타입 선언 패키지 install npx create-react-app . npm i @types/node @types/react @types/react-dom @types/jest` 2) tsconfig.json 설정하기{ "compilerOptions": { "target": "ES5", "module": "CommonJS", "strict": true, "allowJs": true, "esModuleInterop": true, // 외부 패키지 등에서나 e.. 더보기 [TypeScript] 타입 스크립트의 필요성과 동작 원리 1. 타입 스크립트가 등장하게 된 계기자바스크립트는 본래 간단한 프로그래밍을 위해 만들어졌기 때문에 웹 브라우저에서만 작동하고, 유연하게 설계되었다는 장점이 있었다. 하지만 자바스크립트의 인기가 더욱 커지고 Node.js가 등장하게 되면서 웹 브라우저 외의 환경에서도 사용이 가능해졌고 활용도가 높아지면서 더 복잡한 프로그래밍에도 널리 사용이 가능해졌다.이렇게 되면서 자바스크립트의 장점인 '유연함'과 자유로움은 곧 버그 발생 가능성이 높다는 문제점을 야기하게 되었고 더욱 안정적인 프로그래밍을 위해서 타입 스크립트가 등장하게 되었다. 이로써 타입 스크립트는 자바스크립트의 문법은 유지한 채, 타입과 같은 안정적인 문법이 추가된 자바스크립트의 확장된 언어라고 할 수 있다. 2. 자바스크립트의 한계점1) 자바스크.. 더보기 [TypeScript] props으로 받은 함수의 타입 지정하기 ✨props으로 받은 함수의 타입 지정하기 타입스크립트를 아무것도 모른 상태로 처음 사용하면서, 타입을 지정하는데에 어려움이 있었다. 예를들어 다음과 같이 일반적으로 타입을 명확하게 지정하기 쉬운 string, number, boolean 등은 타입을 지정할 때 크게 고민이 필요하지 않았지만, interface ICheckBoxProps { label?: string; placeholder: string; type?: 'email' | 'password' | 'text' | 'number'; autoComplete?: string; setValue: React.Dispatch; required?: boolean; maxLength?: number; inputRegexCheck?: ? } props으로 함.. 더보기 [TypeScript] React.KeyboardEventHandler<HTMLInputElement> 에서 event.target.value 에러 ❗타입스크립트 React.KeyboardEventHandler 에서 event.target.vale 사용시 에러 이슈 1. 타입스크립트를 처음 사용하면서, onKeyup 이벤트를 전달 시 발생한 에러 이슈이다. 이렇게 Input에서 onKeyUp 이벤트를 발생시켜 이벤트를 전달하면 2. 타입스크립트에서 타입을 명시해 주어야 한다. 마우스 hover 시 참고되어있는 이벤트 타입인 React.KeyboardEventHandler으로 지정해 주었더니 event.target.value에서 에러가 발생했다. 이유는 타입스크립트에서 KeyboardEvent에 target 속성은 정의 되어있지 않기 때문인 것 같다. index.d.ts에서 확인해 보면 target속성이 정의되어있지 않다. interface Keybo.. 더보기 이전 1 다음
