TypeScript로 구현하는 최신 ESM 기반 npm 패키지 퍼블리싱 가이드

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

• format_list_bulleted Javascript
• · 2025. 3. 3.
• textsms

Node.js, 이제 TypeScript를 기본 지원한다!

Node.js, 이제 TypeScript를 기본 지원한다! Node.js가 v23.6.0부터 TypeScript를 별도의 플래그 없이 실행할 수 있도록 지원하는데요.이 글에서는 새로운 기능이 어떻게 동작하는지, 그리고 주의해야 할 점들을 살펴보겠습니다.새로운 기능, 직접 확인해볼까요?다음과 같은 TypeScript 파일이 있다고 가정해봅시다.// demo.mtsfunction main(message: string): void { console.log('Message: ' + message);}main('Hello!'); 이제 이 파일을 바로 실행할 수 있습니다.node demo.mts 하지만 현재는 다음과 같은 경고가 표시되는데요.ExperimentalWarning: Type Stripping is a..

• format_list_bulleted Javascript
• · 2025. 1. 13.
• textsms

웹 개발의 핵심 개념들 : DOM과 가상 DOM, 모듈 번들러, 트랜스파일러, 바벨, 모듈, ESM, 비동기 처리, 그리고 프로미스

DOM과 가상 DOM, 모듈 번들러, 트랜스파일러, 바벨, 모듈, ESM, 비동기 처리, 그리고 프로미스: 웹 개발의 핵심 개념들DOM(Document Object Model)이란?브라우저의 작동 원리노드란?DOM 조작이란?가상 DOM(Virtual DOM)DOM 조작과 렌더링가상 DOM의 원리모듈 번들러란?모듈 번들러의 필요성트랜스파일러컴파일러와 트랜스파일러의 차이바벨(Babel)의 정의바벨의 필요성모듈의 정의모듈 분할의 장점ESM(ECMAScript Module)의 정의ESM의 필요성ESM의 사용 방법비동기 처리비동기 처리의 필요성Promise란?Promise 사용 방법then과 catch의 사용 방법DOM(Document Object Model)이란?DOM은 문서 객체 모델(Document Obje..

• format_list_bulleted Javascript
• · 2024. 6. 18.
• textsms