import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "시작하기",
  "children": [{
    "depth": 2,
    "value": "Solid 살펴보기",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid 사용하기",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid 배우기",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid의 철학",
    "children": [{
      "depth": 3,
      "value": "1. 선언적 데이터",
      "children": []
    }, {
      "depth": 3,
      "value": "2. 사라지는 컴포넌트",
      "children": []
    }, {
      "depth": 3,
      "value": "3. 읽기/쓰기 분리",
      "children": []
    }, {
      "depth": 3,
      "value": "4. 쉬운것보다 단순한 것이 낫다.",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "웹 컴포넌트",
    "children": []
  }, {
    "depth": 2,
    "value": "서버 렌더링",
    "children": []
  }, {
    "depth": 2,
    "value": "빌드리스 옵션",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    strong: "strong",
    h2: "h2",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "시작하기",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#시작하기",
        children: "#"
      }), "시작하기"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "새 문서를 작성 중입니다."
      }), " 새로운 초보자용 튜토리얼은 ", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "여기"
      }), "에서 확인할 수 있으며, ", jsx(_components.a, {
        href: "http://discord.com/invite/solidjs",
        children: "Discord"
      }), "에서 참여할 수 있습니다!"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-살펴보기",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-살펴보기",
        children: "#"
      }), "Solid 살펴보기"]
    }), "\n", jsx(_components.p, {
      children: "Solid 핵심 개념에 대한 간략한 동영상을 확인해 보세요:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/hw3Bx5vxKl0",
          children: "Solid 소개 (100초)"
        })
      }), "\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/J70HXl1KhWE",
          children: "Solid의 반응성 (10분)"
        })
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-사용하기",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-사용하기",
        children: "#"
      }), "Solid 사용하기"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid를 사용하기 위한 가장 쉬운 방법은 온라인으로 시도해 보는 것입니다. ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " 의 REPL은 이를 위한 완벽한 방법을 제공합니다. 또한 ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "예제"
      }), "를 편집해 볼 수 있는 ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " 도 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["또한, 터미널에서 다음 명령을 실행해서 간단한 ", jsx(_components.a, {
        href: "https://github.com/solidjs/templates",
        children: "Vite 템플릿"
      }), "을 사용할 수 있습니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "타입스크립트를 사용하려면 다음과 같이 실행합니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid-ts\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["또는 프로젝트에 디펜던시를 설치할 수 있습니다.\n(권장하는 방법인) Solid를 JSX와 함께 사용하려면, ", jsx(_components.code, {
        children: "solid-js"
      }), " NPM 라이브러리와 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",
        children: "Solid JSX compiler"
      }), " babel 플러그인을 설치해야 합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsx(_components.code, {
        className: "hljs language-sh",
        children: "> npm install solid-js babel-preset-solid\n"
      })
    }), "\n", jsxs(_components.p, {
      children: ["그리고 나서, ", jsx(_components.code, {
        children: ".babelrc"
      }), " 파일 혹은 webpack, rollup 에 있는 Babel 설정에 ", jsx(_components.code, {
        children: "babel-preset-solid"
      }), "을 추가합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"presets\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "["
        }), jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: "]"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["타입스크립트 사용시, Solid의 JSX를 핸들링하기 위해 ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " 파일을 다음과 같이 설정합니다 (자세한 사항은 ", jsx(_components.a, {
        href: "https://www.solidjs.com/guides/typescript",
        children: "타입스크립트 가이드"
      }), "를 참고하세요):"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"compilerOptions\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsx\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"preserve\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsxImportSource\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "solid-배우기",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-배우기",
        children: "#"
      }), "Solid 배우기"]
    }), "\n", jsx(_components.p, {
      children: "Solid는 애플리케이션 빌딩 블록 역할을 하는 조합 가능한 작은 조각들입니다. 이 조각들은 대부분 얕은 최상위 API를 구성하는 함수들입니다. 다행히도 이들 대부분에 대해서 몰라도 시작할 수 있습니다."
    }), "\n", jsx(_components.p, {
      children: "자유롭게 사용할 수 있는 두가지 주요 빌딩 블록은 컴포넌트와 리액티브 프리미티브가 있습니다."
    }), "\n", jsx(_components.p, {
      children: "컴포넌트는 props 객체를 입력으로 받으며, 네이티브 DOM 엘리먼트와 다른 컴포넌트를 포함하는 JSX 엘리먼트를 반환하는 함수입니다. 이는 파스칼 케이스의 JSX 엘리먼트로 표현할 수 있습니다:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Hello {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "컴포넌트는 자체적으로 상태를 저장하지 않고 인스턴스가 없다는 점에서 가볍습니다. 대신, DOM 엘리먼트와 리액티브 프리미티브를 위한 팩토리 함수 역할을 합니다."
    }), "\n", jsxs(_components.p, {
      children: ["Solid의 세밀한 반응성", "Reactivity", "은 시그널, 메모, 이펙트의 3개의 핵심 프리미티브들을 기반으로 합니다. 이들은 뷰를 최신 상태로 유지하는 자동 추적 동기화 엔진을 형성합니다. 리액티브 계산은 동기식으로 실행되는, 함수로 래핑된 표현식의 형태를 취합니다."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Solid의 반응성"
      }), "과 ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Solid의 렌더링"
      }), "에 대해서 자세히 알아보세요."]
    }), "\n", jsxs(_components.h2, {
      id: "solid의-철학",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid의-철학",
        children: "#"
      }), "Solid의 철학"]
    }), "\n", jsx(_components.p, {
      children: "Solid의 디자인에는 최고의 웹사이트와 애플리케이션을 구축하는데 필요한 원칙과 가치관에 대한 몇가지 의견이 담겨 있습니다. Solid에 대한 철학을 알고 있다면 Solid를 배우고 사용하는것이 더 쉬워집니다."
    }), "\n", jsxs(_components.h3, {
      id: "1-선언적-데이터",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-선언적-데이터",
        children: "#"
      }), "1. 선언적 데이터"]
    }), "\n", jsx(_components.p, {
      children: "선언적 데이터는 데이터의 동작에 대한 설명을 선언에 묶는 방식입니다. 이를 통해 데이터 동작의 모든 측면을 한 곳에서 패키징하여 쉽게 조합할 수 있습니다."
    }), "\n", jsxs(_components.h3, {
      id: "2-사라지는-컴포넌트",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-사라지는-컴포넌트",
        children: "#"
      }), "2. 사라지는 컴포넌트"]
    }), "\n", jsx(_components.p, {
      children: "업데이트를 고려하지 않고 컴포넌트를 구조화하는 것은 어렵습니다. Solid 업데이트는 컴포넌트와 완전히 독립되어 있습니다. 컴포넌트 함수는 한 번 호출된 후 사라집니다. 컴포넌트는 코드를 구성하기 위해 존재하며 다른 용도는 별로 없습니다."
    }), "\n", jsxs(_components.h3, {
      id: "3-읽기쓰기-분리",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-읽기쓰기-분리",
        children: "#"
      }), "3. 읽기/쓰기 분리"]
    }), "\n", jsx(_components.p, {
      children: "정확한 제어와 예측 가능성은 더 나은 시스템을 만듭니다. 단방향 플로우를 강제하기 위한 불변성은 필요하지 않으며, 소비자가 변경할 수 있는 것과 아닌 것을 의식적으로 결정하는 능력만 필요합니다."
    }), "\n", jsxs(_components.h3, {
      id: "4-쉬운것보다-단순한-것이-낫다",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-쉬운것보다-단순한-것이-낫다",
        children: "#"
      }), "4. 쉬운것보다 단순한 것이 낫다."]
    }), "\n", jsx(_components.p, {
      children: "세밀한 반응성을 위해서 고생하며 얻은 교훈입니다. 더 많은 노력이 필요하더라도, 명시적이고 일관된 규칙은 그만한 가치가 있습니다. 목표는 기본이 되는 최소한의 도구를 제공하는 것입니다."
    }), "\n", jsxs(_components.h2, {
      id: "웹-컴포넌트",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#웹-컴포넌트",
        children: "#"
      }), "웹 컴포넌트"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 웹 컴포넌트를 1급 시민으로 만들고자 하는 바램으로 탄생했습니다. 시간이 흐르면서 디자인이 발전하고 목표가 변경되었지만, Solid는 여전히 웹 컴포넌트를 작성하는 좋은 방법입니다. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid 엘리먼트"
      }), "를 사용하면 Solid의 함수형 컴포넌트를 작성하고 래핑해서 작고 성능 좋은 웹 컴포넌트를 만들 수 있습니다. Solid 앱 내에서 Solid 엘리먼트는 Solid의 컨텍스트 API를 활용할 수 있으며, Solid Portal은 Shadow DOM의 격리된 스타일을 지원합니다."]
    }), "\n", jsxs(_components.h2, {
      id: "서버-렌더링",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#서버-렌더링",
        children: "#"
      }), "서버 렌더링"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 진정한 동형", "Isomorphic", " 개발 경험을 가능하게 하는 동적 서버 사이드 렌더링 솔루션을 제공합니다. Resource 프리미티브를 사용하면 비동기 데이터 요청을 쉽게 생성할 수 있으며, 클라이언트와 브라우저 간에 자동으로 직렬화 및 동기화됩니다."]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 서버에서 비동기 렌더링과 스트림 렌더링을 지원하기 때문에, 한쪽 방향으로 코드를 작성해서 서버에서 실행할 수 있습니다. 즉, ", jsx(_components.a, {
        href: "https://ko.reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " 및 코드 분할과 같은 기능이 Solid에서도 작동합니다."]
    }), "\n", jsxs(_components.p, {
      children: ["자세한 내용은 ", jsx(_components.a, {
        href: "/guides/server#server-side-rendering",
        children: "서버 가이드"
      }), "를 읽어보시기 바랍니다."]
    }), "\n", jsxs(_components.h2, {
      id: "빌드리스-옵션",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#빌드리스-옵션",
        children: "#"
      }), "빌드리스 옵션"]
    }), "\n", jsxs(_components.p, {
      children: ["일반 HTML 파일, ", jsx(_components.a, {
        href: "https://codepen.io",
        children: "https://codepen.io"
      }), " 등과 같이 컴파일을 사용하지 않는 환경에서 Solid를 사용하고 싶은 경우, Solid의 컴파일 타임 최적화된 JSX 문법 대신 평범한 자바스크립트에서 ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/html",
        children: [jsx(_components.code, {
          children: "html``"
        }), " 태그드 템플릿 리터럴"]
      }), " 이나 ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/h",
        children: ["HyperScript ", jsx(_components.code, {
          children: "h()"
        }), " 함수"]
      }), "를 사용할 수 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), "을 사용해 브라우저에서 직접 실행 가능합니다. 예를 들면:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [count, setCount] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), "),\n          timer = ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "setInterval"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "count"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n        ", jsx(_components.span, {
            className: "hljs-comment",
            children: "// 혹은"
          }), "\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "h"
          }), "(", jsx(_components.span, {
            className: "hljs-string",
            children: "\"div\""
          }), ", {}, count);\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "빌드리스의 장점에는 트레이드 오프가 있습니다:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["표현식은 항상 getter 함수로 래핑되어야 하며, 그렇지 않으면 리액티브하지 않게 됩니다.\n다음 코드는 템플릿이 내부적으로 생성하는 이펙트 안에서 값을 액세스하지 않았기 때문에, ", jsx(_components.code, {
            children: "first"
          }), "나 ", jsx(_components.code, {
            children: "last"
          }), "가 변경되더라도 업데이트되지 않으며, 디펜던시가 추적되지 않습니다:"]
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hello "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// 혹은"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello \""
            }), ", ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n", jsxs(_components.p, {
          children: ["다음 코드는 템플릿이 이펙트 안에서 getter를 읽기 때문에 ", jsx(_components.code, {
            children: "first"
          }), "나 ", jsx(_components.code, {
            children: "last"
          }), "가 변경되면 예상대로 업데이트되며, 디펜던시도 추적됩니다:"]
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hello "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${() => first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// 혹은"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello \""
            }), ", ", jsx(_components.span, {
              className: "hljs-function",
              children: "() =>"
            }), " ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n", jsxs(_components.p, {
          children: ["Solid의 JSX는 컴파일을 하기 때문에 이 문제가 없으며, ", jsx(_components.code, {
            children: "<h1>Hello {first() + ' ' + last()}</h1>"
          }), " 같은 표현식은 리액티브하게 됩니다."]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["빌드 시간 최적화는 Solid JSX 에서 처럼 동작하지 않습니다. 각 템플릿이 런타임 중에 처음 실행될 때 컴파일되기 때문에 앱 시작 속도가 약간 느려지기는 하지만, 대부분의 경우 이를 알아채지 못합니다. 시작 후 실행 속도는 JSX에서의 ", jsx(_components.code, {
            children: "html``"
          }), " 템플릿 태그와 동일하게 유지됩니다. ", jsx(_components.code, {
            children: "h()"
          }), " 호출은 실행되기 전에 전체 템플릿을 정적으로 분석할 수 없기 때문에 항상 느린 실행 속도를 갖습니다."]
        }), "\n"]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["타입스크립트와 함께 작동하려면, 여전히 관련 DOM Expression 라이브러리가 필요하다는 것을 기억해야 합니다. 태그드 템플릿 리터럴을 사용하려면 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), "가 필요하며, 하이퍼스크립트는 ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), "가 필요합니다."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=getting-started-2a7ddf43.js.map
