제네릭 (Generics) 제네릭은 C#, Java 등의 언어에서 재사용률이 높은 컴포넌트를 만들 때 자주 활용되는 특징. 특히 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다. 제네릭이란? 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. function getText<T>(text: T...

React 에서 텍스트의 줄바꿈은 어떻게 될까? Antd의 카드를 만들면서 태그를 작성하는데, <br/>태그 혹은 \n 을 인식하지 못하고 그대로 출력하는 상황이 있었다. jsx 형식에서는 다음과 같은 결과를 출력한다. 참고로 antd Card.Meta 의 태그는 타입이 ReactNode 이다. const Meta = Card.M...

Enums 특정 값들의 집합을 의미하는 자료형이다. 예를 들어보자. 나이키; 아디다스; 뉴발란스; 숫자형 enum enum Shoes { Nike, Adidas, } let myShoes = Shoes.Nike; // enum member > Shoes.Nike = 0 console.log(myShoes); // 0 e...

[TS] 타입스크립트 첫걸음 5편(연산자를 이용한 타입의 정의) Union Type “I” function logMessage(value: string) { console.log(value); } logMessage("hello"); logMessage(100); function logMessage(value: string | number...

[TS] 타입스크립트 첫걸음 4편(타입 별칭) 타입 별칭과 인터페이스의 차이점 interface Person { name: string; age: number; } // type Person = { // name: string; // age: number; // }; // 위 두개가 무엇이 다를까? 마우스를 갖다 대었을 때(프리뷰로 볼때...

[TS] 타입스크립트 첫걸음 3편(인덱싱, 확장,상속) 인덱싱 // 인덱싱 interface StringArray { [index: number]: string; } var arr: StringArray = ["a", "b", "c"]; arr[0] = 10; // 에러가 난다. 인터페이스 딕셔너리(Dictionary ) 패턴 inte...

Inheritance and the prototype chain class Person { // 클래스 로직 (인스턴스를 만들어줌) constructor(name, age) { // 초기화 함수 console.log("생성 되었습니다."); this.name = name; this.age = age; } } ...

useWindowDimensions 를 알아보자. react-native 에서는 윈도우크기가 매우 다양하다. 그렇기 때문에 변화하는 윈도우 크기를 감지해야하는데 , 이를 도와주는게 useWindowDimensions hook 이다. 하지만 리액트에서는 어떨까? 커스텀 훅을 만들어서 사용해야 할 것이다. current size, 즉 현재 윈도우 사...

요즘에 누가 자바스크립트만 쓸까. 이 유연한 언어를 좀더 strict 하게 만들어 줄 수 있는 Typescpript 를 더 자세하게 배워보자 이 블로그를 작성하게 되었다. 해당 내용들은 inflearn 에 있는 강의 “타입스크립트-입문” 을 참고하여 만들었다. 이제 1편을 시작해보자. 타입스크립트 첫걸음 1편(tsconfig.json 설정하기) ...

타입스크립트 첫걸음 2편 기본타입에 대해 알아보자. // JS 문자열 선언 //var str = 'hello' //TS 문자열 선언 const str: string = "hello"; //ts 숫자 let num: number = 10; //ts 배열 let arr: Array<number> = [1, 2, 3]; let hero...