TypeScript에서 __brand 패턴 알아보기 ✈️ (타입 안정성 높이기)

보통 객체 데이터는 Id 값을 가진다.그리고 때때로 각 데이터는 특정 Id값이나 카테고리에서 좀 다른 데이터 패턴을 보일 때가 있다.또는, 하나의 객체에서 여러 Id값을 지닐때 같은 number 타입의 Id긴 하지만 굳이 따지면 다른 데이터값이기는 하는... 이런 경우도 종종 있다. 이런 경우 타입을 짜는게 참으로 곤란한데, 이때 __brand 라는 걸 사용해서 더 구체적으로 타입을 구별하는 기법을 사용한다고 한다 👻+ 객체가 아닌 타입에도 intersection을 통해서 객체로 __brand 타입을 집어넣어 같은 number지만 같지 않은 그런 타이핑이 가능하다 ! 요약하자면, 좀 더 엄격하게 객체들의 타입을 구분할때 고려할 수 있는 방법이다.(+ 런타임에서는 영향이 없고, 컴파일 타임에서만 타입을 ..

• format_list_bulleted TypeScript
• · 2025. 3. 30.
• textsms

TypeScript에서 객체 타입 비교 및 extends 활용하기 🏘️

TypeScript는 구조적 타이핑(structural typing) 을 기반으로 동작한다. 즉, 객체의 타입을 비교할 때 객체가 가진 속성들을 기준으로 판단하게 된다 🫰이를 활용하면 extends 키워드를 통해 타입 간의 관계(할당 가능 여부)를 쉽게 판별할 수 있다. 이번에는 타입스크립트에서 객체를 비교하는 다양한 예제를 테스트해보는 글을 남겨보기로 했다.(extends와 함께하는... ⭐)구조적 타이핑과 객체 타입 비교 먼저, 간단한 두 객체 타입을 예제로 들어보자. 아래와 같은 예제, 기본 데이터 구조를 나타내는 BasicRecord와 추가 정보를 담은 DetailedRecord로 구조적 타이핑에 대해서 살펴보자.type BasicRecord = { values: string[] };type D..

• format_list_bulleted TypeScript
• · 2025. 3. 21.
• textsms

JavaScript로 shell 스크립트 작성하기 😎 Google’s zx 라이브러리

JavaScript는 브라우저뿐만 아니라 Node.js 덕분에 서버에서도 자주 사용된다.그런데 이 언어를 활용해 터미널 명령어를 실행하는 shell 스크립트를 작성할 수 있다면 얼마나 좋을까? 이런 요구사항을 Google의 zx 라이브러리가 만족한다 👍이번엔 zx 라이브러리를 실제로 사용해본 경험을 공유하기로 했다. zx란 ❓zx는 Google이 개발한 Node.js 기반의 라이브러리로, JavaScript나 TypeScript를 사용하여 터미널 명령어를 실행하는 스크립트를 간단하고 직관적으로 작성할 수 있게 해준다.✨ 따라서, shell 스크립트가 생소한 JS 개발자가 손쉽게 스크립트를 작성할 수 있게 해준다기존의 스크립트와 비교했을 때 더 강력한 기능과 유연성을 제공한다.zx의 장점 😎간결한 문법..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms

FE 검색 구현에서 검색어와 타겟의 유사성 체크하기 - 레벤슈타인 거리 (Levenshtein Distance) ♥️ With 타입스크립트

프론트엔드 개발자로서, 우리는 사용자의 오타를 교정하거나 비슷한 단어를 찾는 기능을 종종 구현한다.  예를 들어, 검색 창에서 "javascipt"라고 입력하면 "javascript"를 추천해주는 기능은 흔하게 찾을 수 있다 👍(r이 빠졌는데도 찾아준다)이처럼 두 문자열의 차이를 계산하는 알고리즘 중 하나가 바로 레벤슈타인 거리(Levenshtein Distance)입니다. 이번 글에서는 레벤슈타인 거리란 무엇인지, 그리고 이를 타입스크립트로 구현하는 방법을 단계별로 알아보았다.리벤슈타인 거리란?리벤슈타인 거리는 두 문자열 사이의 최소 편집 거리를 계산하는 알고리즘이다. 여기서 [편집]은 다음 세 가지 작업을 의미한다.삽입 (Insertion): 문자 하나를 추가삭제 (Deletion): 문자 하나를 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 28.
• textsms

[typescript] Record를 사용하여 객체 Key 타입 설정하기 🍎

객체의 타입을 설정할 때 있었던 일이다. const winner = { "One": false, "Two": false, "Three": true,}; 이런 객체가 있다고 가정해보자. 객체의 Key값은 One, Two, Three만 될 수 있기에, 타입으로 제한해보자 👻 가장 처음 떠올릴 수 있는 방법은 다음과 같다! type KeyExample = "One" | "Two" | "Three";const winnerFail: { [key: KeyExample]: boolean } = { "One": false, "Two": false, "Three": true,} 이렇게 하면 될 것 같지만! 에러가 발생한다. 타입 에러에 따르면, 인덱스 시그니쳐 파라미터 타입은 liter..

• format_list_bulleted TypeScript
• · 2024. 11. 1.
• textsms

commonJS, ESM 둘 다 지원하는 package.json 설정법 (feat. rollup)

알다시피, JS 런타임은 크게 브라우저와 Node.js가 있다.그리고 각각 ESM, CJS의 모듈 방식이 있다. 요즘 개발 환경은 웹 개발을 할 때에도 node가 필요한 경우가 많기에, 라이브러리를 구성한다면 두 환경 모두에서 작동할 수 있도록 작성하는 것이 좋다. 이번에 개인적으로 라이브러리를 만져보면서 rollup을 사용하여 mjs, cjs를 생성하고 어떻게 설정했는지, 기록을 남기고자 했다. ✨ rollup.config.js 설정하기import { defineConfig } from 'rollup';import typescript from '@rollup/plugin-typescript';export default defineConfig({ input: { index: 'index.ts', ..

• format_list_bulleted 웹 개발
• · 2024. 8. 18.
• textsms