JavaScript/TypeScript 썸네일형 리스트형 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] tsconfig.json 설정 옵션 알아보기 1. tsconfig.jsontsconfig.json에서는 이렇게 컴파일러 옵션을 설정할 수 있는데, 컴파일 시 얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 버전을 어떻게 할지 프로젝트에 따라, 개발자의 입맛에 맞춰 설정할 수 있다. tsc --init으로 초기화 하면 tsconfig.json 파일이 기본옵션으로 생성된다.(직접 생성해도 된다)1) "include" : 컴파일할 파일이 많을 경우, 일일히 컴파일 하지 않고 특정 위치 기준으로 아래의 모든 파일을 컴파일하도록 설정할 수 있다.{ "include": ["src"]}2) "compilerOptions" : "target", "module", "outDir", "strict", "mpduleDetection" 등 { "compile.. 더보기 [TypeScript] 타입 스크립트의 필요성과 동작 원리 1. 타입 스크립트가 등장하게 된 계기자바스크립트는 본래 간단한 프로그래밍을 위해 만들어졌기 때문에 웹 브라우저에서만 작동하고, 유연하게 설계되었다는 장점이 있었다. 하지만 자바스크립트의 인기가 더욱 커지고 Node.js가 등장하게 되면서 웹 브라우저 외의 환경에서도 사용이 가능해졌고 활용도가 높아지면서 더 복잡한 프로그래밍에도 널리 사용이 가능해졌다.이렇게 되면서 자바스크립트의 장점인 '유연함'과 자유로움은 곧 버그 발생 가능성이 높다는 문제점을 야기하게 되었고 더욱 안정적인 프로그래밍을 위해서 타입 스크립트가 등장하게 되었다. 이로써 타입 스크립트는 자바스크립트의 문법은 유지한 채, 타입과 같은 안정적인 문법이 추가된 자바스크립트의 확장된 언어라고 할 수 있다. 2. 자바스크립트의 한계점1) 자바스크.. 더보기 [TypeScript] 타입스크립트란 무엇인가? 타입스크립트 동작 원리에 대하여 TypeScript 란 무엇인가? 1. Javascript의 한계 모든 언어에는 타입 시스템이 존재하며, 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉘어 진다. 각각의 특징은 다음과 같다. 1) 동적 타입 시스템 = JavaScript, Python - 타입을 미리 검사하지 않는다. - 개발자의 의도치 않은 타입 실수로 인해 치명적인 오류가 발생할 가능성이 높다. -> 타입을 미리 검사하지 않기 때문에 타입 오류 시에도 실행이 바로 중단되지 않는다. 때문에 개발자의 타입 실수 시 런타임 중 하루뒤, 한달 뒤 등 예기치 못할 때 갑작스럽게 에러가 발생하는 등 잘 돌아가던 프로그래밍이 갑자기 실행이 안된다던지 치명적인 오류가 발생할 수 있고 디버깅이 힘들다. 2) 정적 타입 시스템 = C, Java -.. 더보기 [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 다음
