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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "소개",
  "children": []
}, {
  "depth": 1,
  "value": "Solid 란?",
  "children": []
}, {
  "depth": 1,
  "value": "Solid 앱 구조",
  "children": []
}, {
  "depth": 1,
  "value": "이 튜토리얼 활용하기",
  "children": []
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "소개",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#소개",
        children: "#"
      }), "소개"]
    }), "\n", jsx(_components.p, {
      children: "Solid 튜토리얼에 오신 것을 환영합니다! 이 튜토리얼은 Solid의 주요 기능들에 대해서 안내합니다. Solid의 작동 방식에 대해서 자세히 알고 싶다면 API와 가이드 문서를 참고하세요."
    }), "\n", jsx(_components.p, {
      children: "이 대화형 가이드를 통해 Solid의 주요 기능들을 소개합니다. Solid의 작동 방식을 좀 더 자세히 알아보려면 API와 가이드를 참조하세요."
    }), "\n", jsxs(_components.p, {
      children: ["새로운 초보자용 튜토리얼은 ", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "여기"
      }), "에서 확인할 수 있습니다(현재 작업중입니다!)."]
    }), "\n", jsxs(_components.h1, {
      id: "solid-란",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-란",
        children: "#"
      }), "Solid 란?"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid는 인터랙티브 웹 애플리케이션을 만들기 위한 자바스크립트 프레임워크입니다.\nSolid를 사용하면 기존 HTML 및 자바스크립트 지식을 사용해 앱 전체에서 재사용 가능한 컴포넌트를 빌드할 수 있습니다.\nSolid는 ", jsx(_components.em, {
        children: "반응성"
      }), "(사용자 인터페이스와 데이터를 연결하는 선언적 자바스크립트 코드)을 사용해 컴포넌트를 향상시킬 수 있는 도구를 제공합니다."]
    }), "\n", jsxs(_components.h1, {
      id: "solid-앱-구조",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-앱-구조",
        children: "#"
      }), "Solid 앱 구조"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid 앱은 컴포넌트라 부르는 함수로 구성됩니다. 오른쪽 ", jsx(_components.code, {
        children: "HelloWorld"
      }), " 함수를 살펴보세요: 바로 ", jsx(_components.code, {
        children: "div"
      }), "를 반환합니다! 이런 HTML과 자바스크립트를 섞은 문법을 JSX라고 합니다. Solid는 나중에 이러한 태그들을 DOM 노드로 변환하는 컴파일러와 함께 제공됩니다."]
    }), "\n", jsxs(_components.p, {
      children: ["JSX를 사용하면 앱에서 대부분의 HTML 엘리먼트를 사용할 수 있지만, 새 엘리먼트를 만들 수도 있습니다. ", jsx(_components.code, {
        children: "HelloWorld"
      }), " 함수를 선언하면, 앱 전체에서 ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), " 태그로 사용할 수 있습니다."]
    }), "\n", jsxs(_components.p, {
      children: ["모든 Solid 앱의 진입점은 ", jsx(_components.code, {
        children: "render"
      }), " 함수입니다. 애플리케이션 코드를 래핑하는 함수와 마운트할 대상 HTML 엘리먼트, 이렇게 2개의 인자를 필요로 합니다:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "HelloWorld"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"app\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h1, {
      id: "이-튜토리얼-활용하기",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#이-튜토리얼-활용하기",
        children: "#"
      }), "이 튜토리얼 활용하기"]
    }), "\n", jsx(_components.p, {
      children: "튜토리얼의 각 레슨에서는 Solid 기능과 이를 사용해 볼 수 있는 시나리오를 제공합니다. 언제든지 \"해답\" 버튼을 클릭하여 솔루션을 확인하거나 \"초기화\"를 클릭하여 다시 시작할 수 있습니다. 코드 에디터 자체에는 콘솔과 컴파일된 코드를 확인할 수 있는 \"Output\" 탭이 있습니다. Solid가 어떻게 코드를 생성하는지 궁금하다면 이 곳을 확인하세요."
    }), "\n", jsx(_components.p, {
      children: "즐거운 시간 보내세요!"
    })]
  });
}
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=lesson-e091935d.js.map
