이번 글에서는 Typescript의 타입 확장과 타입 좁히기에 대해 정리해보았습니다.  1. 타입 확장하기타입 확장은 기존 타입을 사용해 새로운 타입을 정의하는 것을 의미합니다. 타입 확장의 가장 큰 장점은 기존 타입을 바탕으로 타입을 확장함으로서 불필요한 코드 중복을 줄일 수 있다는 점입니다.   interface와 type 키워드로 정의된 타입은 extends, 교차 타입, 유니온 타입을 사용해 타입을 확장합니다. extends, 교차 타입, 유니온 타입 간의 차이를 파악하고 언제 사용하면 좋은지 정리해보았습니다.  1) extends extends를 활용하면 기존 타입을 확장해 새로운 타입을 정의할 수 있습니다. 아래 예시 코드를 살펴보겠습니다. 예시 코드// 기본 장바구니 아이템 타입interfa..

React useRef 훅와 필요에 따라 설정해 사용하는 custom Hook에 대해 정리해보았습니다.  1️⃣ useRef리액트 어플리케이션에서 요소에 포커스를 설정하거나 특정 컴포넌트의 위치로 스크롤 하는 등 DOM을 직접 선택해야하는 경우 사용합니다. ● useRef의 타입 정의타입 정의를 보면 useRef는 MutableRefObejct 또는 RefObejct를 반환합니다.// useRef의 타입 정의 3가지function useRef(initialValue: T): MutableRefObject; // 👈 일반적인 값을 저장할 때function useRef(initialValue: T|null): RefObject; // 👈 DOM 요소를 참조할 때function useRef(): ..

TypeScript의 개념과 접목해 React Hook에 대해 정리해보겠습니다. 먼저, React Hook은 왜 생겨나게 된 것일까요? 결론부터 말씀드리면, 리액트 16.8부터는 기존 클래스 컴포넌트의 단점을 해결하기 위해 탄생했습니다. 기존 클래스 컴포넌트는 아래와 같은 단점을 가집니다. 1) 컴포넌트 간 상태 로직 재사용이 어렵다2) 생명주기 메서드에 서로 관련없는 로직들이 얽혀 코드의 복잡성이 증가된다. 아래 예시 코드를 보며 클래스 컴포넌트의 단점을 좀 더 자세히 살펴보겠습니다. // 기존 클래스 컴포넌트의 예시class UserDashboard extends React.Component { constructor(props) { super(props); this.state = { ..

비동기 호출을 하다보면 다양한 상태코드에 따라 401(인증되지 않은 사용자), 404(존재하지 않는 리소스), 500(서버 내부 에러) 혹은 CORS 에러와 같은 다양한 에러가 발생합니다.타입 스크립트에선 이러한 비동기 API 에러를 어떻게 처리 및 명시할 수 있는지 6가지 정리해보았습니다.  1. 타입 가드 활용하기타입 가드를 활용하면 서버 에러를 명시적으로 확인할 수 있습니다.1) 명시적으로 표시하기아래와 같이 서버에서 전달하는 공통 에러 객체에 대해 타입을 정의할 수 있습니다.// 서버에서 전달하는 공통 에러 객체 타입 정의interface ErrorResponse { status: string; errorCode: string; errorMessage: string;}2) Axios 라이브러리의 ..