728x90 반응형 Frontend/TypeScript9 [ERROR] React Hook names must start with the word 'use' react-hooks/rules-of-hooks 개요ESLint 규칙에서 "plugin:react-hooks/recommended" 을 연결하고 "react-hooks/rules-of-hooks": "error"로 설정시 발생하는 react-hook 오류 메시지을 해결하는 방법react-hooks/rules-of-hooks : 훅을 사용할 때 제약사항을 준수할 것react-hooks/exhaustive-deps : useEffect를 통해 부수 효과를 처리할 때 사용하는 훅경고 메시지1) React Hook 'useDispatch' is called in function 'dispatcher' that is neither a React function component nor a custom React Hook function. React compon.. 2024. 5. 7. [TypeScript] TypeScript 유틸리티 타입 - 6 유틸리티 타입? - 지금까지의 타입 조작기능 (제너릭, 맵드, 조건부 타입 등)을 이용해 실무에서 자주 사용되는 유용한 타입을 모아놓은 기능 - https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 맵드 타입 기반 Partial - 특정 객체 타입의 모든 프로터티를 선택적 프로퍼티로 바꿔주는 타입 // Partial interface Post { title: string; tags: string[]; content: string; thumbnailURL?: strin.. 2024. 4. 19. [TypeScript] TypeScript 타입 조작 기능 - 5 타입 조작이란? - 이미 할당 된 기본 타입, 별칭, 인터페이스 타입들을 새로운 타입으로 변환할 수 있는 타입스크립트 문법 타입 조작 기능 - 제너릭 - 인덱스드 엑세스 타입 - keyof 연산자 - Mapped(맵드) 타입 - 템플릿 리터럴 타입 - 조건부 타입 제너릭 - https://sillimmouse.tistory.com/75 인덱스드 엑세스 타입 - 객체, 배열, 튜플에서 특정 프로퍼티 혹은 요소의 타입을 추출하는 타입 - 대괄호 속에 들어가는 String Literal 타입인 “author” 를 인덱스라고 하며 인덱스를 이용해 특정 타입에 접근하다고 하여 인덱스드 엑세스 타입라고 한다. - 인덱스에는 값이 아니라 타입(기본타입, 리터럴 타입 등)만 가능하다. // 인덱스드 엑세스 타입 // .. 2024. 4. 17. [TypeScript] TypeScript 인터페이스/클래스/제너릭 타입 이해 - 4 인터페이스란? - 자바스크립트에서는 사용하지 않는 타입스크립트 문법 - 변수 나 함수 , 그리고 클래스 가 만족해야하는 최소 규격을 지정할 수 있게 해주는 도구 인터페이스 기본 문법 - 타입 별칭과 동일한 타입을 지정하는 방법 중 하나로 c, java 의 인터페이스 처럼 작성하는 방법 - 선택적 프로퍼티, 읽기전용 프로퍼티가 가능하다. - 매개변수, 반환값을 포함한 메서드 오버로딩 타입 지정도 가능하다. - 대신, 별칭 처럼 | 연산자를 사용하여 인터페이스를 여러개 지정할 수는 없다. // 인터페이스 interface Person { readonly name: string; age?: number; sayHi(): void; sayHi(a: number): void; sayHi(a: number, b: .. 2024. 4. 14. [TypeScript] TypeScript 함수 타입 이해 - 3 함수 타입 - 매개변수, 반환값 타입 지정이 필요하다. - 매개변수 필수 값이 아닌 경우 ? 를 사용하여 체크 할 수 있지만, 필수값 매게변수랑 값이 사용 시 필수값 뒤에 위치해야 한다. // 함수 타입 기본 정의 function func(a: number, b: number): number { return a + b; } const add = (a: number, b: number): number => a + b; // 함수의 매개변수 function introduce(name: string, age: number, tall?: number) { console.log(name); if (typeof tall === "number") { console.log(tall + 10); } } introduce.. 2024. 4. 14. [TypeScript] TypeScript 타입 시스템 이해 - 2 타입 스크립트 원리 이해 타입 정의 기준 타입 관계 정의 기준 오류 검사 기준 타입 호환성 - 동일한 속성을 갖는 집합을 타입이라고 한다. - 어떤 타입을 다른 타른으로 변경해도 집합 안의 값인지 판단하는것을 타입 호환성이라고 한다. - 타입 호환성은 교집합 내에 판단한다. 예) 2, 0, -10, 0.123, Infenitiy 슈퍼 타입, 서브 타입 - 슈퍼 타입 : Down Cast(다운 캐스트)으로 변경될수 있는 타입 - 서브 타입 : Down Cast(다운 캐스트)으로 변경될수 없는 타입 *Down Cast(다운 캐스트) : 슈퍼 타입의 값을 서브타입으로 변경하는것, 변경여부가 상황따라 다르다. *Up Cast(업 캐스트): 서브타입의 값을 슈퍼타입으로 변경하는 것, 무조건 변경이 가능하다. //.. 2024. 4. 14. [TypeScript] TypeScript 기본 문법 - 1 원시타입, 리터럴타입 원시 타입 - 하나의 값만 저장하는 타입 - 예) number, string, boolean, null, undefined // number let num1: number = 123; let num2: number = -123; let num3: number = 0.123; let num4: number = -0.123; let num5: number = Infinity; let num6: number = -Infinity; let num7: number = NaN; // string let str1: string = "hello"; let str2: string = "hello"; let str3: string = `hello`; let str4: string = `hello ${.. 2024. 4. 14. TypeScript 동작 원리와 생태계 이해하기 ECMA에서 이미 표준화한 JavaScript가 있는데 TypeScript가 필요한 이유는 무엇입니까?=> JavaScript는 동적으로 유형이 지정되는 언어 특성 런타임에 오류가 발생할 때까지 이를 허용하지 않고, 개발 중에 유형 불일치 오류가 발견하여 버그를 해결하기 위해 브라우저에서 TypeScript 실행 방법ECMAScript는 JavaScript 사양입니다. TypeScript도 ECMAScript를 준수한다.ECMAScript는 브라우저에서 호환하여 실행할 수 있게 만든 JavaScript 사양일뿐, 브라우저에서 실행하는 언어나 프로그램이 아니다.브라우저 는 렌더링 엔진과 javaScript엔진만 가지고 있어서 HTML, CSS, JavaScript만 해석이 가능하기 때문에 TypeScri.. 2024. 4. 12. TypeScript의 등장 | tsconfig.json TypeScript2012년 마이크로소프트가 발표한 JavaScript를 기반으로 타입 관련 기능을 추가한 프로그래밍 언어JavaScript언어 + 타입 시스템, 컴파일러 등 기능 제공목표 : 자바스크립트 언어를 그대로 사용하되, 더 안전하게 사용할 수 있게 안정성을 높히다. // javascriptlet a = 1;let b = 2;console.log(a+b);// typescriptlet a:number = 1;let b:number = 2;console.log(a+b);TypeScript 배경1. 자바스크립트 한계점동적 타입 시스템은 유연하고, 빠르고, 간결하게 코드를 작성한다는 장점이 있지만, 런타임 시에 예상치 못한 문제를 발생하게 될 수 있다.타입 시스템정적 타입 시스템 : 코드 실행 이전에.. 2024. 4. 12. 이전 1 다음 728x90 반응형
