프론트엔드 공부 블로그 프론트엔드 공부 블로그

TypeScript로 프로젝트를 하다 보면 global.d.ts라는 파일을 마주치게 된다.처음에는 단순히 “글로벌 타입 정의 넣는 곳” 정도로만 이해하고 사용하게 되는데... 실제로 사용하다보면 빌드 과정과 npm 배포 시 주의해야 할 점이 있다. 이번 글에서는 global.d.ts를 사용하면서 마주치는 이슈들에 대해서 정리해보기로 했다.global.d.ts는 어떤 역할을 하는가빌드시 어떻게 처리되는가npm publish 시 포함 전략1. global.d.ts란 무엇인가TypeScript에서 *.d.ts 파일은 타입 선언 파일(Declaration File)이다.그 중 global.d.ts는 이름처럼 전역 타입을 선언하는 곳으로 쓰이는 파일이다. 예를 들어, window 객체에 커스텀 프로퍼티를 추가한다..

TypeScript는 정적 타입 언어로서 컴파일 시점에 타입 검사를 수행한다.그러나 런타임에는 타입이 존재하지 않기 때문에, 외부 입력(JSON 등)으로부터 들어오는 데이터에 대해서는 안전성을 보장하지 않는다이때 유용하게 활용할 수 있는 기능이 바로 Assertion Functions이다타입 시스템의 한계아래 예제를 보자function greet(user: { name: string }) { console.log(`Hello, ${user.name}`);}greet(JSON.parse('{"name": "Irene"}')); // 정상 작동greet(JSON.parse('{}')); // 런타임 에러 발생위 예제는 JSON 파싱 결과를 그대로 넘기기 때문에 컴파일 타임에서는 타입 오류가 발생하지 않지만..

라이브러리를 만드는 과정에서 타입스크립트 빌드를 하게 되었는데, 이상한 상황을 겪었다.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..

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 & {}) | ..

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

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

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..

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