유령이 나오는 젤리하우스

TIL

(21.10.27) TS] Type assertion에 관하여

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서는 시스템이 추론 및 분속한 타입 내용을 변경 할 수 있는데, 이를 Type assertion이라고 한다.쉽게 말해, 프로그래머가 내가 이 자료의 타입을 잘 알고 있으니, 토 달지 말라고 선언 해주는 것이다.🦄 **Type Casting라고도 하는데, 이보다는 Type assertion이 더 적합한 표현이다. 일반적으로 캐스팅이라는 말은 실행 시간에 어떤 동작이 일어날 것임을 내포하기 때문이다. 본문 1. 타입 어센션을 하는 방법 : 꺽쇠를 변수 앞에 작성 as foo : 변수 뒤에 붙임 * 용례 var foo:any; var bar = foo // 이제 bar의 타입은 string입니다. var bar2 = foo as Boolean..

TIL

(21.08.04) Material-ui Default theme의 type

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄import {Theme} from "@material-ui/core/styles🦄 Default Theme material-ui는 Theme Object를 통한 스타일링을 가능하게 한다. 이 Theme라는 것은 일일이 사용자가 withTheme을 이용해서 직접 만들 수 도 있지만, 기본적으로 Default 값을 제공한다. 얘는 사실 makeStyles()를 호출할 때 첫번째 parameter로 들어가고 있다. 얘를 가져다 쓰려면 params에 임시변수를 넣어주고, theme에 맞는 속성 값들을 꺼내쓰면 되는데, 이 속성 값들이라는게 무지무지 길고 복잡하고 어려운 영어로 범벅이 되어있다. 보나마나 오타로 인한 에러가 다량으로 발생하게 될 것이라는 게 예상되..

TIL

(21.08.02) Typescript에서 React Props를 받기 / React에서 배열 랜더링

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄하위 컴포넌트로 Props를 내려 줄 때, Props를 받는 곳에서 타입을 지정해줘야 한다.🦄 🦄React에서 배열을 랜더링 하려면 map 함수를 사용한다는 것, 잊지 말자.🦄 하위 컴포넌트로 Props를 줘보자. // interface.ts //프로필에 띄울 개별 Article들의 type입니다. export interface ArticleProps { title: string; description: string; imagePaths: any; ingredients: string; createDate: string; } 자주 사용될 타입을 먼저 작성하여 export 하여, 타입을 여러번 타이핑 하는 수고를 덜기 위해 작성했다. 인터페이스를 export ..

TIL

(21.07.27) material-ui 스타일 && react-router-dom with TS

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서 react-router를 사용할때, match / history / location 객체를 사용하기 위해서는 RouteComponentProps를 import 해야한다.🦄 🦄만약, match의 params에 넣어서 전달해줄 props가 있다면, 그 props의 interface도 설정해줘야한다 🦄 🦄material-ui 적용환경에서 css를 먹이는 방법은 1.inline style 적용 2. makeStyles hook 사용, 3.styled component 라이브러리 사용🦄 RouteComponentProps React를 TS로 짜면서 제일 거지 같은 점은 역시 타입 지정을 안해주면 에러를 가차없이 뱉는다는 점이다. 타입체크를 통..