# CDN으로 Web SDK 가져오기

- Human documentation: [https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation/cdn](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation/cdn)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation/cdn.md](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation/cdn.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [sheets/getting-started/installation/cdn.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/getting-started/installation/cdn.ko-KR.mdx)

---

패키지 관리자를 사용하지 않는다면 `<script>` 태그로 Univer를 가져올 수도 있습니다.

#### 네임스페이스 규칙

Univer의 전역 빌드(UMD)는 다음 명명 규칙에 따라 전역 객체에 네임스페이스를 노출합니다.

```plain
@univerjs/core -> UniverCore
@univerjs/docs-ui -> UniverDocsUi
@univerjs-pro/docs-print -> UniverProDocsPrint
@univerjs/docs-ui/locale/en-US -> UniverDocsUiEnUS
@univerjs/core/facade -> UniverCoreFacade
```

## 플러그인 모드

### 전역 빌드 사용

Univer는 플러그인용 UMD 빌드를 제공합니다. CDN 스크립트 태그를 사용할 때는 각 플러그인과 그 종속성의 UMD 빌드를 직접 포함해야 합니다. 이 과정은 번거로우므로 플러그인 종속성과 스타일 파일 순서를 비롯한 플러그인 메커니즘을 충분히 이해한 뒤 사용하는 것을 권장합니다.

#### 예제

```html
<head>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script>
    /**
     * Starting from Univer 0.6.0, with the support for React 19[^1], UMD users may need additional adaptation.
     * It is recommended to migrate to module script[^2] and a more modern build system.
     *
     * [^1]: [support for React 19] https://github.com/dream-num/univer/pull/4247
     * [^2]: [Module Script] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html
     */

    /**
     * Fix `Uncaught TypeError: client.createRoot is not a function`
     * If using UMD React < 18, you might need the following code.
     */
    ;(function (global) {
      'use strict'
      if (!global.ReactDOM) {
        throw new Error('ReactDOM must be loaded before ReactCreateRoot.')
      }
      const ReactDOM = global.ReactDOM
      if (!ReactDOM.createRoot) {
        ReactDOM.createRoot = function (container) {
          return {
            render: (element) => {
              ReactDOM.render(element, container)
            },
          }
        }
      }
    })(this)

    /**
     * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`
     * If using UMD React, you might need the following code.
     * Reference: https://unpkg.com/react@18.3.1/cjs/react-jsx-runtime.production.min.js
     */
    ;(function (global) {
      'use strict'
      if (!global.React) {
        throw new Error('React must be loaded before ReactJSXRuntime.')
      }
      const React = global.React
      if (!React.jsx || !React.jsxs) {
        const REACT_ELEMENT_TYPE = Symbol.for('react.element')
        const hasOwnProperty = Object.prototype.hasOwnProperty
        const RESERVED_PROPS = {
          key: true,
          ref: true,
          __self: true,
          __source: true,
        }
        const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner
        function createReactElement(type, config, maybeKey) {
          const props = {}
          let key = null
          let ref = null
          if (maybeKey !== undefined) {
            key = `${maybeKey}`
          }
          if (config.key !== undefined) {
            key = `${config.key}`
          }
          if (config.ref !== undefined) {
            ref = config.ref
          }
          for (var propName in config) {
            if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
              props[propName] = config[propName]
            }
          }
          if (type && type.defaultProps) {
            const defaultProps = type.defaultProps
            for (var propName in defaultProps) {
              if (props[propName] === undefined) {
                props[propName] = defaultProps[propName]
              }
            }
          }
          return {
            $$typeof: REACT_ELEMENT_TYPE,
            type,
            key,
            ref,
            props,
            _owner: ReactCurrentOwner.current,
          }
        }
        React.jsx = createReactElement
        React.jsxs = createReactElement
      }
    })(this)
  </script>
  <script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.min.js"></script>
  <script src="https://unpkg.com/echarts@5.6.0/dist/echarts.min.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/index.js"></script>
  <script src="https://unpkg.com/@wendellhu/redi@1.1.2/dist/umd/react-bindings/index.js"></script>

  <script src="https://unpkg.com/@univerjs/themes/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/protocol/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/core/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/network/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/rpc/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/design/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/engine-render/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/drawing/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/index.js"></script>

  <script src="https://unpkg.com/@univerjs/core/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/facade.js"></script>

  <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/en-US.js"></script>
  <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/locale/en-US.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" />
  <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/index.css" />

  <style>
    html,
    body,
    #root,
    #app {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    const { Univer, LocaleType, mergeLocales, UniverInstanceType } = UniverCore
    const { FUniver } = UniverCoreFacade
    const { UniverRenderEnginePlugin } = UniverEngineRender
    const { UniverFormulaEnginePlugin } = UniverEngineFormula
    const { UniverUIPlugin } = UniverUi
    const { UniverSheetsPlugin } = UniverSheets
    const { UniverSheetsUIPlugin } = UniverSheetsUi
    const { UniverDocsPlugin } = UniverDocs
    const { UniverDocsUIPlugin } = UniverDocsUi
    const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
    const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
    const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
    const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

    const univer = new Univer({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: mergeLocales(
          UniverDesignEnUS,
          UniverUiEnUS,
          UniverSheetsEnUS,
          UniverSheetsUiEnUS,
          UniverDocsUiEnUS,
          UniverSheetsFormulaUiEnUS,
          UniverSheetsNumfmtUiEnUS,
        ),
      },
    })

    univer.registerPlugin(UniverRenderEnginePlugin)
    univer.registerPlugin(UniverFormulaEnginePlugin)

    univer.registerPlugin(UniverUIPlugin, {
      container: 'app',
    })

    univer.registerPlugin(UniverDocsPlugin)
    univer.registerPlugin(UniverDocsUIPlugin)

    univer.registerPlugin(UniverSheetsPlugin)
    univer.registerPlugin(UniverSheetsUIPlugin)
    univer.registerPlugin(UniverSheetsFormulaPlugin)
    univer.registerPlugin(UniverSheetsFormulaUIPlugin)
    univer.registerPlugin(UniverSheetsNumfmtPlugin)
    univer.registerPlugin(UniverSheetsNumfmtUIPlugin)

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {})

    const univerAPI = FUniver.newAPI(univer)
  </script>
</body>
```

## 버전 지정

unpkg와 jsDeliver 모두 리소스의 특정 버전을 지정할 수 있습니다. 예를 들어 Univer의 `x.y.z` 버전을 사용하려면 URL에 `@<version>`을 추가하면 됩니다.

```diff
- https://unpkg.com/@univerjs/core/lib/umd/index.js
+ https://unpkg.com/@univerjs/core@x.y.z/lib/umd/index.js
```
