Je개발 일지

TypeScript Duck Typing (구조적 타입 시스템)Duck Typing은 "오리처럼 걷고 오리처럼 꽥꽥거리면 오리다"라는 철학에서 나온 개념입니다. TypeScript에서는 객체의 실제 타입이 아니라 구조(Shape)가 같으면 동일한 타입으로 취급하는 구조적 타입 시스템을 사용합니다.💡 Duck Typing의 핵심 철학함수가 "무엇을 할 수 있는지"에만 집중하고, "어떤 타입인지"는 신경 쓰지 않는 것입니다!🎯 핵심 개념Duck Typing의 동작 원리TypeScript는 타입의 이름이 아닌 구조를 기준으로 타입 호환성을 판단합니다.interface Person { name: string; age: number;}const user = { name: "홍길동", age: 28, hob..

문제 발생Vue.js로 관리자 대시보드를 개발하던 중, 탭 전환 기능에서 예상치 못한 에러가 발생했습니다.TypeError: parentComponent.ctx.deactivate is not a function at unmount (chunk-PIYQV7LF.js?v=6c215612:7924:27) at patch (chunk-PIYQV7LF.js?v=6c215612:6747:7) at sharedContext.activate (chunk-PIYQV7LF.js?v=6c215612:4649:7)처음에는 단순한 라이브러리 버전 호환성 문제로 생각했으나, 조사 결과 Vue의 KeepAlive 컴포넌트와 OverlayScrollbars 라이브러리 간의 라이프사이클 충돌 문제였습니다.코드 구조문..

TypeScript 타입 호환성 문제와 해결 방법실무에서 개발하다 보면 분명 논리적으로는 맞는 것 같은데 TypeScript 컴파일러가 에러를 뱉는 경우가 있습니다. 특히 부분집합 관계의 타입들 간에 할당할 때 발생하는 문제를 중심으로 살펴보겠습니다.문제 상황다음과 같은 상황에서 에러가 발생하는 경우가 있습니다.// API 응답 전체 데이터 타입type ApiUserResponse = { id: string; username: string; email: string; profile: { firstName: string; lastName: string; avatar: string; }; permissions: string[]; lastLoginAt: string; create..