드리프트의 뉴 코딩 이야기

TypeScript 조건부 타입 완벽 가이드: 유니온 타입과 유틸리티 타입 활용의 모든 것조건부 타입은 TypeScript에서 if-then-else 표현식과 같은 역할을 합니다.결과는 두 가지 분기 중 하나로 결정되는데요.이는 특히 제네릭 타입에서 유용하며, 유니온 타입을 다룰 때 "루프"를 돌리는 것처럼 활용할 수 있습니다.이번 글에서는 조건부 타입의 동작 원리를 자세히 알아보겠습니다.소스 코드에서 계산되거나 추론된 타입을 보여주기 위해 npm 패키지 asserttt를 사용합니다.예를 들면 다음과 같습니다: // 값의 타입 확인 assertType('abc'); assertType(123); // 타입 동등성 검사 type Pair = [T, T]; type _ = Assert, [strin..

TypeScript Mapped Types 완벽 정복: 기본부터 고급 활용까지 Mapped type은 키(key)들을 순회하며 객체(object)나 튜플(tuple) 타입을 생성하는 기능으로, 다음과 같은 형태를 가집니다.{[PropKey in PropKeyUnion]: PropValue} 이번 포스트에서는 mapped types가 어떻게 작동하는지 자세히 살펴보고 사용하는 예시를 알아보겠습니다. Mapped types의 가장 중요한 사용 사례는 객체 변환과 튜플 매핑입니다. 소스 코드에서 계산되거나 추론된 타입을 보여주기 위해 npm 패키지인 asserttt를 사용하는데요. 예를 들면 다음과 같습니다.// 값의 타입assertType('abc');assertType(123);// 타입의 동등성type ..

TypeScript의 infer 키워드로 복합 타입에서 원하는 부분만 깔끔하게 추출하기안녕하세요. 오늘은 TypeScript의 조건부 타입(Conditional types)에서 등장하는 infer라는 키워드에 대해 자세히 알아볼까 합니다. 이 infer 키워드를 활용하면 다소 복잡한 복합(Compound) 타입 안에서 원하는 부분의 타입만 쏙쏙 뽑아서 깔끔하게 사용할 수가 있는데요.이 글에서 사용하는 표기법이 글에서는 타입의 정확성이나 추론된 타입을 간편하게 확인하기 위해 asserttt라는 npm 패키지를 사용한 코드 예제를 활용할 건데요. 예를 들면 이런 식입니다.// 값의 타입 확인assertType('abc');assertType(123);// 타입의 동등성 확인type Pair = [T, T];..

TypeScript satisfies 연산자 완벽 정리: 타입 체크의 새로운 강자 안녕하세요, 여러분!오늘은 TypeScript의 satisfies 연산자가 뭔지, 어떻게 동작하는지 알아볼까요?이 연산자는 값의 타입을 체크하면서도 (대부분) 타입에 영향을 주지 않는 멋진 기능인데요.어디에 유용한지도 함께 살펴볼게요.이 글에서 사용할 표기법소스 코드에서 계산된 타입이나 추론된 타입을 보여주기 위해 asserttt라는 npm 패키지를 사용합니다.예를 들어:// 값의 타입assertType('abc');assertType(123);// 타입의 동등성type Pair = [T, T];type _ = Assert, [string,string]>>;satisfies 연산자는 뭘까요? satisfies 연산자는 컴파..

TypeScript에서 읽기 전용 속성 완벽 정리: readonly 키워드 활용법안녕하세요, 여러분!오늘은 TypeScript에서 "읽기 전용" 기능을 어떻게 활용할 수 있는지 알아볼까요?주로 readonly 키워드를 중심으로 다뤄볼 건데요.이 글에서 사용할 표기법소스 코드에서 계산된 타입이나 추론된 타입을 보여주기 위해 asserttt라는 npm 패키지를 사용합니다.예를 들어:// 값의 타입assertType('abc');assertType(123);// 타입의 동등성type Pair = [T, T];type _ = Assert, [string,string]>>;const 변수 선언: 바인딩만 불변JavaScript에서는 const로 변수를 선언하면 바인딩은 불변이지만, 바인딩된 값 자체는 변경 가능합..

TypeScript로 구현하는 최신 ESM 기반 npm 패키지 퍼블리싱 가이드 안녕하십니까?오늘은 TypeScript와 함께 ESM 기반의 npm 패키지를 퍼블리싱하는 최신 방법에 대해 알아볼까 합니다.지난 2년 동안 TypeScript, Node.js, 그리고 브라우저에서 ESM 지원이 크게 발전하였는데, 과거에 우리가 사용하던 번거로운 설정과 비교하면 상당히 간단한 구성이 가능해졌습니다.이제부터 그 설정 방법을 차근차근 소개하겠습니다.개요이 튜토리얼은 하위 버전과의 호환성을 무시할 수 있는 패키지를 대상으로 합니다.이 설정은 TypeScript 4.7(2022-05-24) 이후로 저에게 꾸준히 잘 작동하고 있습니다.Node.js가 이제 CommonJS 모듈에서 ESM 라이브러리를 require(esm..

JavaScript Temporal, 날짜와 시간을 다루는 새로운 방법JavaScript의 새로운 Temporal 객체가 브라우저 실험 버전에 드디어 등장하기 시작했는데요. 이 소식은 웹 개발자들에게 무척 반가운 소식입니다. 왜냐하면 JavaScript에서 날짜와 시간을 다루는 일이 앞으로 획기적으로 간편해지고 현대적으로 바뀔 예정이기 때문인데요. 스케줄링, 국제화, 시간에 민감한 데이터를 다루는 애플리케이션은 이제 내장 기능으로 효율적이고 정확하며 일관된 날짜, 시간, 기간(duration), 달력(calendar)을 사용할 수 있습니다. 물론 안정적이고 모든 브라우저에서 지원되기까지는 다소 시간이 걸릴 것이고, 구현 중에 바뀔 수 있지만, 지금 바로 Temporal이 왜 매력적인지, 어떤 문제를 해결..

Astro 완벽 가이드: 초보자부터 고급 사용자까지Astro는 개발자들에게 사랑받는 프레임워크로, 단순하면서도 강력한 기능을 제공합니다. 이 글에서는 Astro의 기본 개념부터 고급 기능까지, 초보자도 쉽게 따라할 수 있도록 자세히 설명합니다.Astro, 왜 인기일까요?Astro는 매우 간단하게 시작할 수 있습니다. HTML에 몇 가지 변수를 추가해 템플릿을 만들고 싶다면, Astro가 딱 맞습니다. 하지만 더 복잡한 기능이 필요할 때도 유연하게 대응할 수 있죠. 예를 들어, 리액트(React)와 같은 프론트엔드 UI 프레임워크를 Astro 사이트에 통합할 수 있습니다. Astro 프로젝트 시작하기Astro 프로젝트를 시작하려면 먼저 노드(Node)가 필요합니다. 노드 버전은 18.17.1 이상 또는 2..

PM2, 정말 괜찮은 걸까요? 2025년 Node.js 앱 관리, 메모리 누수 이슈와 대안 솔루션 총정리 (Kubernetes, Systemd)Node.js 애플리케이션을 운영하면서 프로세스 관리는 떼려야 뗄 수 없는 숙제와 같습니다. 앱이 예기치 않게 종료되는 것을 막고, 자동으로 재시작하게 만들고, 서버 자원을 효율적으로 사용하는 것은 프로덕션 환경에서 무엇보다 중요합니다. 많은 개발자가 선택하는 PM2 (Process Manager 2), 과연 2025년에도 최고의 선택일까요? PM2의 명암과 함께 Kubernetes (K8S), Systemd 등 대안 솔루션을 꼼꼼하게 비교 분석하여, 여러분의 환경에 최적화된 프로세스 관리 전략을 제시해 볼까 합니다. 시작하기 전에: 이 글은 다양한 커뮤니티의 의..

TypeScript 튜플의 모든 것: 실전 예제로 풀어보는 타입 활용법JavaScript의 배열은 매우 유연해서 TypeScript는 이를 처리하기 위해 두 가지 다른 타입을 제공합니다:모든 값이 동일한 타입을 가지는 임의 길이 시퀀스를 위한 배열 타입 – 예: Array각 요소가 다른 타입을 가질 수 있는 고정 길이 시퀀스를 위한 튜플 타입 – 예: [number, string, boolean]이번 블로그 포스트에서는 후자에 대해 살펴보겠습니다. 특히 타입 레벨에서 튜플을 활용하는 방법에 대해 알아보겠습니다.이 블로그 포스트에서 사용하는 표기법소스 코드에서 계산되거나 유추된 타입을 보여주기 위해 npm 패키지 asserttt를 사용합니다. 예를 들면 다음과 같습니다:// 값의 타입assertType('..