자바스크립트 모듈 내보내기/불러오기 완전 정복! (CJS vs. ESM)

자바스크립트 개발을 하다보면 `require`나 `import` 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. `require`는 Node.js에서 예전부터 사용되고 있는 CommonJS의 키워드이고, `import`는 ES6(ES2015)에서 새롭게 도입되어 현재 자바스크립트 생태계에서 표준이 되어가고 있는 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일이나 npm 패키지의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 개발자들을 혼란스럽게 하기도 하죠. ```js const express = require("express"); const app = express(); ``` ```js import express from "express"; const app = express(); ``` 예를 들어, 위 두 코드는 ExpressJS 라이브러리를 불러와서 서버 객체를 생성하는 동일한 작업을 수행하고 있습니다. CommonJS 방식을 따른 첫 번째 코드는 Ruby 언어처럼 `require` 키워드를 사용하여 여타 다른 변수를 할당하듯이 모듈을 불러오는 반면에, ES Module 방식을 따른 두 번째 코드는 Java나 Python 언어처럼 `import` 키워드를 사용하여 좀 더 명시적으로 모듈을 불러오고 있습니다. 이번 시간에는 아래 두 개의 포스팅을 통해서 자바스크립트에서 모듈을 내보내고 불러오는 방법을 예제를 통해서 상세하게 설명드리겠습니다. 이번 기회에 CJS과 ESM로 양분되어 햇갈리는 자바스크립트의 모듈 시스템을 완벽하게 정리하실 수 있으셨으면 좋겠습니다. 📕 자바스크립트 ES 모듈 내보내기/불러오기 (import): https://www.daleseo.com/js-module-import/ 📗 자바스크립트 CommonJS 모듈 내보내기/불러오기 (require): https://www.daleseo.com/js-module-require/ 참고로 최근에는 이 두 가지 모듈 시스템을 자유롭게 혼용해서 쓰실 수도 있는 자바스크립트 런타임도 등장했는데요. 이 부분에 관심이 있으신 분들께는 아래 게시물을 추천드리겠습니다. Bun: 귀엽지만 강력한 새로운 자바스크립트 런타임 🥟: https://careerly.co.kr/comments/92202