{"componentChunkName":"component---node-modules-stvad-gatsby-theme-garden-src-templates-roam-page-js","path":"/ES-Modules","result":{"data":{"roamPage":{"title":"ES Modules","childMdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"es-modules\"\n  }, \"ES Modules\"), mdx(Block, {\n    id: \"wX8yaUgQV\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/a6f84\",\n      \"title\": \"추가 바람\",\n      \"className\": \" internal-link\"\n    }, \"\\uCD94\\uAC00 \\uBC14\\uB78C\"), \"\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","outboundReferences":[{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", {\n    \"id\": \"추가-바람\"\n  }, \"\\uCD94\\uAC00 \\uBC14\\uB78C\"), mdx(Block, {\n    id: \"ZxkIoAt-4\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uBBF8\\uB798\\uC758 \\uB0B4\\uAC00 \\uC368 \\uC918\\uC57C \\uD560 \\uB0B4\\uC6A9\\uB4E4\\uC744 \\uB9C1\\uD06C\\uD574\\uB450\\uB294 \\uACF3\")),\n    mdxType: \"Block\"\n  }), mdx(Block, {\n    id: \"5tzg0kntF\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"{{query: {and: \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/a6f84\",\n      \"title\": \"추가 바람\",\n      \"className\": \" internal-link\"\n    }, \"\\uCD94\\uAC00 \\uBC14\\uB78C\"), \"}}}\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamPage","id":"bcdb0705-aec2-57bc-8208-d5066be4eff2","title":"추가 바람","fields":{"slug":"/a6f84"}}}],"inboundReferences":[{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"KaSy4N_2O\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uD06C\\uAC8C \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/CommonJS\",\n      \"title\": \"CommonJS\",\n      \"className\": \" internal-link\"\n    }, \"CommonJS\"), \", \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/ES-Modules\",\n      \"title\": \"ES Modules\",\n      \"className\": \" internal-link\"\n    }, \"ES Modules\"), \", AMD \\uB4F1\\uC774 \\uC874\\uC7AC\\uD55C\\uB2E4.\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"f71cac9d-fe26-526b-b509-28b08599c1a1","string":"크게 [[CommonJS]], [[ES Modules]], AMD 등이 존재한다.","fields":{"parentPage":{"title":"자바스크립트","fields":{"slug":"/6e12b"}},"slug":"/KaSy4N_2O"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"uj_oPziDO\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uBE0C\\uB77C\\uC6B0\\uC800\\uC5D0\\uB294 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/ES-Modules\",\n      \"title\": \"ES Modules\",\n      \"className\": \" internal-link\"\n    }, \"ES Modules\"), \"\\uC758 \\uB3C4\\uC785 \\uC804\\uAE4C\\uC9C0 \\uBCC4\\uB3C4\\uC758 \\uBAA8\\uB4C8 \\uC2DC\\uC2A4\\uD15C\\uC774 \\uC5C6\\uC5C8\\uAE30 \\uB54C\\uBB38\\uC5D0 \\uC790\\uBC14\\uC2A4\\uD06C\\uB9BD\\uD2B8 \\uC5EC\\uB7EC \\uAC1C \\uD30C\\uC77C\\uC774 \\uC804\\uC5ED \\uC0C1\\uD0DC\\uB97C \\uACF5\\uC720\\uD588\\uB294\\uB370, \\uC774\\uB85C \\uC778\\uD574 \\uD30C\\uC77C \\uAC04 \\uC758\\uC874 \\uAD00\\uACC4\\uAC00 \\uC788\\uC744 \\uB54C \\uC21C\\uC11C\\uB97C \\uC9C1\\uC811 \\uC870\\uC815\\uD574\\uC57C \\uD558\\uAC70\\uB098 \\uD45C\\uD604\\uC774 \\uBD88\\uAC00\\uB2A5\\uD55C \\uACBD\\uC6B0\\uAC00 \\uC788\\uC5C8\\uC74C.\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"57d5051e-9747-5cda-8d16-e583f019fa37","string":"브라우저에는 [[ES Modules]]의 도입 전까지 별도의 모듈 시스템이 없었기 때문에 자바스크립트 여러 개 파일이 전역 상태를 공유했는데, 이로 인해 파일 간 의존 관계가 있을 때 순서를 직접 조정해야 하거나 표현이 불가능한 경우가 있었음.","fields":{"parentPage":{"title":"Webpack","fields":{"slug":"/Webpack"}},"slug":"/uj_oPziDO"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"Q_D3x2XvP\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/ES-Modules\",\n      \"title\": \"ES Modules\",\n      \"className\": \" internal-link\"\n    }, \"ES Modules\"), \"\\uC744 \\uC801\\uADF9 \\uCC28\\uC6A9\\uD558\\uC5EC \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/e243d\",\n      \"title\": \"패키지 매니저\",\n      \"className\": \" internal-link\"\n    }, \"\\uD328\\uD0A4\\uC9C0 \\uB9E4\\uB2C8\\uC800\"), \" \\uB300\\uC2E0 URL\\uC744 \\uBC14\\uD0D5\\uC73C\\uB85C \\uC6F9 \\uC790\\uCCB4\\uB97C \\uD328\\uD0A4\\uC9C0 \\uB9E4\\uB2C8\\uC9D5\\uC73C\\uB85C \\uC0AC\\uC6A9\\uD568\")),\n    mdxType: \"Block\"\n  }, mdx(Block, {\n    id: \"SDU-a4K7J\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uADFC\\uB370 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/npm\",\n      \"title\": \"npm\",\n      \"className\": \" internal-link\"\n    }, \"npm\"), \" \\uC0DD\\uD0DC\\uACC4\\uAC00 \\uC6CC\\uB099 \\uD06C\\uAE34 \\uD574\\uC11C \\uC694\\uC998 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"https://deno.com/blog/v1.15#improving-node-compatibility\"\n    }, \"\\uD638\\uD658 \\uBAA8\\uB4DC\"), \" \\uB9CC\\uB4EC\")),\n    mdxType: \"Block\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"b73edef5-a127-5e5a-b378-c00918c0c491","string":"[[ES Modules]]을 적극 차용하여 [[패키지 매니저]] 대신 URL을 바탕으로 웹 자체를 패키지 매니징으로 사용함","fields":{"parentPage":{"title":"Deno","fields":{"slug":"/Deno"}},"slug":"/Q_D3x2XvP"}}},{"__typename":"Mdx","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Block = makeShortcode(\"Block\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Block, {\n    id: \"EQqEAXqwv\",\n    content: mdx(React.Fragment, null, mdx(\"p\", null, \"\\uBC88\\uB4E4\\uB9C1 \\uACFC\\uC815\\uC744 \\uC0DD\\uB7B5\\uD558\\uACE0 \", mdx(\"a\", {\n      parentName: \"p\",\n      \"href\": \"/ES-Modules\",\n      \"title\": \"ES Modules\",\n      \"className\": \" internal-link\"\n    }, \"ES Modules\"), \"\\uB97C \\uD65C\\uC6A9\\uD558\\uBA74 \\uBAA8\\uB4E0 \\uD30C\\uC77C\\uC744 \\uB2E4\\uC2DC \\uC77D\\uC744 \\uD544\\uC694\\uAC00 \\uC5C6\\uC5B4\\uC9D0\")),\n    mdxType: \"Block\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","parent":{"__typename":"RoamBlock","id":"f0738221-531f-5c9b-b9a1-290ff6a07639","string":"번들링 과정을 생략하고 [[ES Modules]]를 활용하면 모든 파일을 다시 읽을 필요가 없어짐","fields":{"parentPage":{"title":"June 12th, 2022","fields":{"slug":"/June-12th-2022"}},"slug":"/EQqEAXqwv"}}}]},"fields":{"slug":"/ES-Modules"}}},"pageContext":{"id":"bffc4dca-05b4-5df8-b55a-e623cbf1e157"}},"staticQueryHashes":["2131059104","2221750479","2468095761"]}