prefer2 Log

최근 BFF코드를 작성하며 익숙하지 않은 문법을 접했다. 자바의 annotaion을 떠오르게 하는 문법이었는데 알고보니 Typescript의 decorator라는 문법이었다. 아직Typescript에서 실험적인 기능이기는 하나, 의존성 주입이 필요한 경우에 꽤나 꽨찮은 구성 방법인 것 같아 내용을 정리해보고자 한다. 현재(23년 10월) 기준 5.2 버전에서 정식으로 제공하고 있다 https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-2.html#decorator-metadata 이전 버전에서는 실험적인 기능이기 때문에 tsconfig.json에서 experimentDecorators 컴파일러 옵션을 활성화해줘야 한다. { "co..

Template Literal Type? Template literal types build on string literal types, and have the ability to expand into many strings via unions. 기존 TypeScript의 String Literal Type을 기반으로 새로운 타입만들기. 타입스크립트 4.1에 들어서 새롭게 도입되었다고 한다. 간단한 예시로 알아보자. type World = "world"; type Greeting = `hello ${World}`; 기존의 World라는 타입을 기반으로 새로운 타입 Greeting을 쉽게 만들 수 있다. Union Type type Citrus = "lemon" | "orange"; type Berry =..

기존에 프로젝트를 세팅할 때 loader에 관해서는 크게 고민하지 않고 여러 블로그를 보며 셋팅을 했다. 이유를 크게 생각하지 않고 babel-loader와 ts-loader를 모두 넣어두었다. 좋은 계기로 엄청난 에러를 발견했고, 두 로더의 차이와 프로젝트에 어떤 적용을 했는지 자세히 적어보려고 한다. 에러 발견 children으로 배열을 스프레드 해놓은 엄청난 문법에러를 저질러놓았다. 하지만 기존의 설정으로는 빌드시에 이를 발견하지 못하고, 동작시에도 문제를 발견하지 못했다. 로더에 변화를 주기 전까지는 놀랍게도 이 에러를 발견하지 못했다. babel-loader와 ts-loader의 차이를 알아보기 위해 하나씩만 적용해 보았을 때야 이러한 문제를 찾을 수 있었다. babel-loader에서는 이러한..

interface Person { name: string; } interface Lifespan { birth: Date; death?: Date; } type PersonSpan = Person & Lifespan; // PersonSpan = { // name: string; //birth: Date; //death?: Date; // } 타입스크립트를 처음 접했을 때 가장 이해가 가지 않았던 부분은 교집합이었다. 일반적인 관점으로 바라보면 Person과 Lifespan 집합에는 교집합이 없어보인다. 그래서 결론으로 never(공집합)이 나오지 않을까라고 예측하기 쉽다. 하지만 결과는 두 집합의 모든 속성들을 가지는 집합이 나오게 된다. 이를 이해하기 위해서는 구조적 타이핑을 먼저 이해해야 한다. 구..