타입스크립트의 핵심 원칙 중 하나는 타입의 이름이 아닌 구조를 기반으로 타입 호환성을 결정한다는 것입니다. 이걸 "덕 타이핑" 또는 "구조적 타이핑"이라고 부르기도 하죠.그런데, 타입스크립트를 사용하다가 이 원칙이 작동하지 않는 경우가 있다는 걸 최근에 알았습니다.타입스크립트를 사용하면서 꼭 알아야 하는 값의 집합과 구조적 타이핑의 개념부터 가볍게 설명하면서 시작해 볼게요. 값의 집합과 구조적 타이핑TypeScript에서 값의 집합은 특정 타입이 가질 수 있는 모든 값들의 모임을 의미해요. 예를 들어, 아래와 같은 인터페이스 Person이 있다고 해볼게요.interface Person { name: string;}Person 타입은 name이라는 string 속성을 가진 모든 객체들의 집합이에요. 따라..

❗️ 문제 로그인과 회원가입 페이지의 뷰 컴포넌트를 하나로 사용하고 있었기 때문에 폼이 submit 됐을 때 어떤 페이지에서 렌더링 된 건지에 따라서 서로 다른 API 전송 함수를 서로 다른 props로 보내서 트리거했었다. // submit 되면 실행되는 함수. const onValid = (data) => { if (signUp) { handleSignUp(data); } else { handleLogIn(data); } }; 하지만 하나의 props로 통일해도 된다고 판단했다. // submit 되면 실행되는 함수. const onValid = (data: AuthFormValues) => { handleSubmitForm(data); }; 인자에 대한 타입은 다음과 같다. export interf..

❗️ 문제 로그인, 회원가입 폼에 애니메이션을 트리거하기 위해서 만든 useRef에 타입을 줘야 했다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같다. 처음엔 이런 형태로 타입을 부여했었다. const inputRef = useRef(null); 그런데 인풋의 ref 속성으로 부여된 useRef 값의 current에 접근할 수 없는 문제가 생겨서 그 이유를 살펴보았다. 🔎 원인 useRef 훅은 3개의 정의가 오버로딩되어 있다. 1. useRef(initialValue: T): MutableRefObject; 인자의 타입과 제네릭의 타입이 T로 일치하는 경우, MutableRefObject를 반환한다. MutableRefObject의 경우, 이름에서도 볼..