ESM

지난 Typescript 모듈 해석 방식 - tsconfig 설정과 실행 환경에 따른 차이 포스팅 다음 글로, Typescript의 중요한 옵션 중 하나인 Moduel Resolution에 대해서 알아보려고한다. 먼저 Module Resolution이 무엇인지, 이를 해석하는 방식이 어떻게 되고, 다양한 모듈에 대한 대응 방식 등에 대해 정리해보았다. Module Resolution이란 무엇일까?Typescript는 import한 파일을 실제로 어디서 찾는지 결정하는 과정이 어떻게 될까?import sayHello from "greetings";sayHello("world"); greetings는 어디에 있을까?node_modules/greetings/index.js일까?./greetings.ts일까?...

이번 글에선 타입 스크립트에서 modules의 기초가 되는 Module Resolution이 어떠한 배경으로 나오게 되는지 알기 위해 CommonJS(CJS)와 ECMAScript 모듈(ESM)의 차이, 그리고 타입스크립트가 모듈을 어떻게 해석하고 변환하는지 상세 다룰 예정이다. 자바스크립트에서의 모듈 개념의 발전을 시작으로, 타입스크립트가 모듈을 해석하는 과정과 트랜스파일링(컴파일 시점 변환) 시 고려해야 할 사항을 설명한다. 또한 Node.js와 번들러(Webpack 등)에서의 모듈 실행 환경의 차이점, 그리고 타입스크립트에서 사용할 수 있는 다양한 모듈 설정 값들(module 옵션) 에 대해서도 분석해보자. 배경자바스크립트는 브라우저에서만 실행되던 초기에는 모듈이 없었지만 HTML에서 스크립트 태..

참고) 본 글은 feconf2022의 박서진 님의 발표 영상을 참고하여 정리한 글입니다. import? require? 개발하다보면 많이 보이는 에러 메시지들… 우리가 사용하는 import문은 왜 이상할까? 어떻게 하면 올바른 import문을 사용할 수 있을까? CJS(CommonJS) 옛날방식…Embed… CommonJS의 문제점과 가능해진 점 전역변수를 무조건 참조로 인한 네이밍 중복 파일을 하나하나 가져오기 때문에 수천 개의 모듈/파일을 관리하기에 용이하지 않음 이를 해결하고자 CommonJS에서 require(CommonJS를 규정할 수 있는 가장 큰 특징의 함수) 함수 제공. 앞서 복잡한 라이브러리 함수들을 가져오는 방식에서 require 호출 한 번으로 처리가 가능해졌다. CommonJS를 사..