TypeScript 빌드 후 .d.ts 파일이 생성되지 않는 문제 ⁉️

라이브러리를 만드는 과정에서 타입스크립트 빌드를 하게 되었는데, 이상한 상황을 겪었다.src 폴더 안에 .d.ts 타입 선언 파일을 직접 만들어뒀는데, 빌드 후 dist 폴더에는 이 파일이 나타나지 않았다.분명히 타입 선언 파일인데, 왜 결과물에 안 들어가는 걸까? 해당 문제가 발생하니, 빌드 결과물의 d.ts에서 import한 타입이 없어 깨지는 문제가 발생하여 곤란했다 💧 문제 상황 재현 예제 ⁉️폴더 구조my-lib/├── src/│ ├── index.ts ← .d.ts의 type을 import 하여 사용함│ └── index.d.ts ← 여기에 타입 선언이 있다├── package.json└── tsconfig.jsonsrc/index.d.tsexport type GreetingPro..

• format_list_bulleted TypeScript
• · 2025. 6. 10.
• textsms

TypeScript에서 (string & {}) 을 제외한 리터럴 유니언 타입만 남기기 🫥

TypeScript를 쓰다 보면 아래처럼 리터럴 유니언 타입을 정의하는 경우가 많다.type MyType = 'a' | 'b' | (string & {}); 그런데, 여기서 진짜 원하는 건 'a' | 'b' 만 남기고 string & {}은 제거하는 것일 수 있다. (더 엄격하게 타입을 체크하기 위해서) 더 구체적으로는 다음과 같은 예제를 들 수 있다.type MyType = 'a' | 'b' | (string & {});type NoStringMyTime = 'a' | 'b';const data: MyType = 'a'function dataParse(value: NoStringMyTime) { console.log(value);}// Argument of type '(string & {}) | ..

• format_list_bulleted TypeScript
• · 2025. 5. 31.
• textsms

Next.js 15 App Router에서 PWA 설정하기 🍍

PWA는 프로그레시브 웹 앱의 줄임말로, 요즘 브라우저 기반으로 서비스를 제공하는 경우 많이 적용되어있는 기술이다.(스타벅스, notion, AliExpress, 스포티파이 등등) 단순하게 생각하면, 웹 사이트인데 윈도우 App이나 맥 App처럼 바로가기를 만들 수 있는 등 어플리케이션 같은 기능을 제공해주는 웹 사이트다.(즉, 네이티브 앱처럼 동작하도록 만들어진 웹 앱 & 설치 가능한 웹사이트) 💘 PWA의 주요 특징은 다음과 같다.📱 설치 가능크롬이나 사파리에서 "홈 화면에 추가"로 앱처럼 설치 가능🔌 오프라인 지원네트워크가 끊겨도 일부 기능 사용 가능 (서비스 워커 덕분)🚀 빠른 로딩캐싱 덕분에 다음 방문 시 로딩 속도 빠름💬 푸시 알림백그라운드에서도 사용자에게 알림 전송 가능 (조건 있음..

• format_list_bulleted 웹 개발
• · 2025. 4. 11.
• textsms

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

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

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

React에서 XState 간단 사용 후기 😊

XState는 점점 더 단순화되어가는 상태관리 라이브러리들 중에서 좀 더 명확하게 역할을 나누고 책임을 부여한 컨셉의 상태관리 라이브러리이다. ❗ 이런 특징이 redux의 구조와 비슷하게 느껴지기도 한데, 이에 관해서는 직접 제작자가 밝힌 차이점이 있다.https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate What is an actual difference between redux and a state machine (e.g. xstate)?I am working on investigation of one front-end application o..

• format_list_bulleted React
• · 2025. 2. 13.
• textsms

[Javascript] 이벤트의 실행순서 파악하기 (onMouseDown은 onClick보다 먼저 실행된다 👻)

프론트엔드 개발을 할 때 많이 사용되는 이벤트들이 있다. 그중에 onClick 이벤트가 있는데, onClick은 사용자가 마우스로 무언가를 클릭했을 때 이벤트가 발생하도록 하는 것이다. 다만, onClick 이외에도 또 다른 마우스 클릭 관련 이벤트들이 있고, 때로는 더 섬세한 동작을 위해서 onMouseDown, onMouseUp과 같은 이벤트들을 사용할 수 있다. 여기서, 더 생각해볼만한 점은 이 셋이 모두 한번에 사용되었을 때이다. 세 개의 이벤트는 어떤 순서로 동작할까?  사용자가 UI 요소와 상호작용할 때 마우스 이벤트가 실행되는 일반적인 순서는 다음과 같다.onMouseDown사용자가 마우스 버튼을 누를 때 발생한다.onMouseUp사용자가 마우스 버튼을 놓을 때 발생한다.onClick마우스 ..

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