제네릭은 C#, JAVA 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이 있다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. ✅ 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 위 함수는 text라는 파라미터에 값을 넘겨받아 text를 반환해 준다. hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환한다. function getText(text) { return text; } 이 관점에서 제네릭을 한 번 살펴보자. 아래 함수는 제네릭 기본 문법이 적용된 형태다. 이제 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다. function getText(text:..

type과 interface 키워드는 타입을 정의할 때 사용한다. 보통 React app 내에서는 component에 넘겨주는 props의 타입을 정의하기 위해 아래와 같이 사용하곤 한다. type GreetingsProps = { //type 사용해도 정상 작동 name: string; }; interface GreetingsProps { //interface 사용해도 정상 작동 name: string; }; const Greetings = ({ name }: GreetingsProps) => ( Hello, {name} ); 이 두 키워드 둘 다 타입 정의라는 비슷한 역할을 하기 때문에 차이점과 언제, 어느 상황에 어떤 키워드를 사용하는 것이 적절할지 짚고 넘어갈 필요가 있다. ❗ 뭐가 다른 걸까? ..

1. TS2322: typescript에서 useRef를 사용할 때 Type 'MutableRefObject' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject | null | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'. Type 'undefined' is not..

타입스크립트란? - 자바스크립트에 타입을 추가해서 확장시킨 것이다. - 자바스크립트를 이해함으로써 코드를 실행하기 전 에러를 잡거나 고치는 데 시간을 절약해준다. - 어떤 브라우저나 어떤 운영체제 어떤 실행환경이든 가능하며 완전히 오픈소스다. 타입스크립트는 "Compiled Language" 자바스크립트는 "Interpreted Language" 타입스크립트는 컴파일 타임에서 미리 에러를 찾아 고칠 수 있기 때문에 편리하다. 타입스크립트에서 바로 해석해서 실행시켜주는 자바스크립트로 컴파일러가 변경해준다! ✅ 자바스크립트 Type vs 타입스크립트 Type 자바스크립트는 Dynamic (Types resolved at runtime) 개발할 땐 알 수 없고 런타임에 도달해야만 잘못되었는지 알 수 있다! 타..

스켈레톤(Skeleton) 이란? 웹 페이지에서 로드 시간이 짧은 것처럼 보이게 하는 몇 가지 방법들이 있다. 스켈레톤은 그 방법 중에 하나로서 데이터가 로드되기 전에 콘텐츠의 자리비움(placholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI다. 그래서 오늘은 프로젝트를 로딩할 때 몇 초 동안 화면이 비어있는 것보단 스켈레톤을 보여주도록 설정해보려고 한다. App.tsx loading 상태를 생성하고 useEffect와 setTimeout을 이용해 loading이 2초 동안 되게 구현했다. loading 중이면 Placeholder 즉, 스켈레톤 컴포넌트를 렌더링하고 loading 끝나면 Item 컴포넌트를 렌더링한다. import React, { useEffect, ..