웹 브라우저의 동작 원리와 JavaScript 모듈 시스템

시작
모듈1 도르
모듈1 종료
모듈들 실행 중
모듈2 로드
모듈2 종료
모듈들 모두 실행 완료
모듈1 시작
모듈2 시작

모듈1 로드
모듈1 종료
module2 로드
module2 종료
시작
Hello World
모듈1 시작
module2 시작

(function (exports, require, module, __filename, __dirname) {
  // 내부 모듈 코드는 실제로 여기에 들어갑니다.
});

// test.js
module.exports = {
  [globalThis.hello]: "world",
};

// index.js
const hello = "hello";
globalThis[hello] = hello;
const test = require("./test.js");
console.log(test[hello]);

// message.js
const greeting = "Welcome!";
module.exports = { content: greeting };

// main.js
const msg = require("./message");
console.log(msg.content); // 출력: Welcome!

// CommonJS
const fs = require("fs);

module.export = {...};

// ES Module
import fs from "fs";

export { ... };

// module1.cjs

console.log("모듈1 로드");

setTimeout(() => console.log("모듈1 시작"), 2000);

console.log("모듈1 종료");

console.log("시작");
const module1 = require("./module1.js");
console.log("모듈들 실행 중");
const module2 = require("./module2.js");
console.log("모듈들 모두 실행 완료");

// esmodule1.js

console.log("모듈1 로드");

setTimeout(() => console.log("모듈1 시작"), 2000);

console.log("모듈1 종료");

console.log("시작");
import "./esmodule.js";
console.log("Hello World");
import "./esmodule2.js";

// my-commonjs-module.cjs (CommonJS)
module.exports = {
  valueA: 10,
  valueB: "hello",
  myFunction: () => console.log("From CommonJS"),
};

// main.mjs (ES Module)
import { valueA } from "./my-commonjs-module.cjs";
console.log(valueA);

// moduleA.mjs (ESM)
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

// main.mjs (ESM)
import { PI, add } from "./moduleA.mjs";

console.log(PI);
console.log(add(5, 2));