서녕이네 개발단지

React.FC란? Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입이다. 함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입이다. React 18버전 이전까지 FC 사용을 지양했던 이유는? 1. children React.FC를 사용하면 컴포넌트 props는 type이 ReactNode인 children을 암시적으로 가지게 된다. type TagName = { name: string; }; const Tag: React.FC = ({ name }) => ( {name} {children} ); 👉🏻 타입스크립트를 쓰는 이유중 하나가 정확한 타입을 지정 해주면서 JS코드의 안전성을 향상 시키는 부분인데, F..

Type Alias와 Interface의 차이? type alias type ButtonProps = { onClick: () => void; label: string; }; const Button = (props: ButtonProps) => { return {props.label}; }; interface interface ButtonProps { onClick: () => void; label: string; } const Button = (props: ButtonProps) => { return {props.label}; }; Type Alias와 Interface의 차이점? 1. 확장 가능성 Type Alias : type은 기존 타입을 조합하여 새로운 타입을 만드는 데 좀 더 강력한 기능을 제..

Mapped Types (맵드 타입)이란? - 타입스크립트의 고급 타입인 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미 한다. - 마치 자바스크립트 map() API 함수를 타입에 적용한 것과 같은 효과를 가진다. 맵드 타입의 기본 문법 { [ P in K ] : T } { [ P in K ]? : T } { readonly [ P in K ] : T } { readonly [ P in K ]? : T } 이처럼 맵드 타입은 객체의 속성들을 순회해서 속성의 타입을 다른 타입으로 바꿔주는 역할을 한다. 객체 타입의 속성들을 순회하기 때문에 이를 응용해서, 모든 객체의 속성들을 순회해서 optional(?)로 바꾸거나 readonly로 지정할 수도 있다. 👇🏻기존에는 아..

이번 포스팅은 타입스크립트에 대해 알아보려 한다. TypeScript는 JavaScript기반으로 추가적인 코드작성 ( 타입 지정 등)을 해준 후 다시 자바스크립트로 컴파일되어 사용되기 때문에 자바스크립트 슈퍼셋(superset) 같은 개념이다. ☝🏻위 그림과 같이 TS는 JS에서 type이 추가된 것이라고 보면 된다! 그래서! 왜 타입스크립트를 사용하는지? 왜 써야하는지에 대해 포스팅하겠다. JS의 약점, 허점 - JS는 선언할 때 타입을 지정해주지 않기 때문에 동작하면서 언제 나도 모르게 형변환이 되어 있을 수도 있고, 그런 부분으로 인해 예기치 않은 버그가 발생할 수도 있다. 심지어 인터프립터 언어 특성상 그런 버그들을 찾는 것조차 쉽지 않다. 컴파일 과정이 없기 때문에 에러를 출력하지 않고 실행되..