Typescript (6) 썸네일형 리스트형 Exclude 활용법 최근 프로젝트에서 드래그 앤 드롭 기능을 구현하면서 Exclude를 활용해볼 수 있었다. 당시의 exclude 로직은 아래와 같다.export type LogicDragPayload = | { type: Exclude } | { type: typeof BoardNodeType.TABLE.type; tableId: string; name: string }; 이 코드가 등장한 이유부터 이야기해보려 한다. 하나만 다르게 처리해야 한다 내가 진행하고 있는 프로젝트에서는 여러 종류의 컴포넌트를 드래그해 캔버스에 노드를 생성할 수 있다. 각 컴포넌트는 드래그 시 특정 데이터(Node type)를 동반하며, 대부분의 컴포넌트는 동일한 구조를 가지고 있다.하지만 TABLE 타입은 예외였다. 이 노드는 일반적인 데이.. const assertions 이해하기 https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions TypeScript를 쓰다 보면 객체나 배열 뒤에 붙은 as const를 종종 보게 된다. 처음 봤을 때는 “그냥 const로 선언했는데 또 as const는 뭐지?” 하는 의문이 들었다. 나 역시 이 키워드가 정확히 어떤 역할을 하는지 몰랐고, 그냥 붙이는 습관처럼 사용하곤 했다. 하지만 알고 나면, as const는 타입 안정성을 높이는 데 매우 강력한 도구다. 문제 상황 다음 코드를 보자.const NodeType = { GROUP: "Groups", TABLE: "Table",}; 겉보기엔 단순한 상수 객체처럼 보이지만, TypeScript는 내부.. React Flow에서 제네릭(Generic) 이해하기 Generic을 실제 프로젝트에 적용해보았다. 진행 중인 프로젝트에서는 React Flow(현재는 @xyflow/react)를 사용하고 있고, 아래와 같은 방법으로 generic을 사용할 수 있었다. 특히, 노드 데이터 구조가 복잡해질수록 제네릭을 쓰는 게 훨씬 안전하다는 것을 체감했다. React Flow의 구조먼저, 프로젝트 구조 예시인데, React Flow에서는 노드 타입별로 렌더링할 컴포넌트를 지정할 수 있다.const nodeTypes = { group: LogicGroupNode, table: LogicTableNode,};return ( ); React Flow에서는 노드 타입별로 렌더링할 컴포넌트를 지정할 수 있다.내 프로젝트에서는 이런 식으로 구현했다.ex.. Union vs Enum vs Const enum 타입 중 어떤 걸 사용해야 할까? 피벗 테이블을 개발 중 연산과 관련된 타입들의 선언이 필요했다. 아래와 같이 요청 body에 대한 유니온 타입을 선언했다.// pivotRequest.tsexport type FiltersOperators = 'eq' | 'ne' | 'le' | 'gte' | 'lte' | 'between' | 'like' | 'isnull';export type AggregationTypes = 'sum' | 'count' | 'avg' | 'max' | 'min' | 'stddev' | 'stddev_samp' | 'stddev_pop' | 'variance' | 'var_samp' | 'var_pop'; 그런데 이 연산자들을 순회하여 select box 옵션 값들로도 넣어 주어야 했다. 따라서, 아래와 같이 opt.. unknown 타입과 any의 차이 unknown 타입이란 무엇일까?unknown 타입이란 ‘알 수 없는 타입’을 의미한다. 그래서 아직 타입을 모를 때 사용한다.let value: unknown;value = "Hello";value = 42;value = true;if (typeof value === "string") { console.log(value.toUpperCase()); // 정상 동작} any와도 많이 비교가 되는데, 차이점은 아래처럼 요약해볼 수 있다. 모든 타입 할당 가능타입 검사 필요any가능필요 없음unknown가능필요 unknown 타입을 왜 사용할까? 타입 안정성 보장하기 때문이다. any를 사용하면 어떤 타입이든 허용되기 때문에 런타임 오류가 발생할 수 있다. unknown을 사용하면 타입 검사를 강제하기 때.. 왜 타입스크립트를 쓰나요? 실무를 경험하면서, 타입스크립트를 사용했지만 정확히 사용해야 하는 이유를 논리적으로 잘 설명하지 못했다. 이참에 확실하게 정리를 해야겠다. 타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어이다. 타입스크립트 코드는 자바스크립트로 변환(컴파일)되기 전에 타입스크립트 컴파일러가 모든 타입을 검사한다. 타입스크립트를 사용하면 크게 2가지 관점에서 코드의 품질과 개발 생산성을 높일 수 있다. 1. 타입스크립트는 에러를 사전에 방지할 수 있다. 아래의 sum() 함수에 숫자가 아닌 문자가 잘못 전달되었다면 자바스크립트는 문자열 덧셈 처리를 하고 의도하지 않았던 결과를 반환하게 된다. 자바스크립트는 변수의 데이터 타입이 런타임에 결정되고, 변수에 할당된 값에 따라 자동으로 타입이 변할 .. 이전 1 다음