var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { onMount, onCleanup } from \"solid-js\";\n\nimport Canvas from \"./canvas\";\n\nfunction App() {\n  let canvas;\n  onMount(() => {\n    const ctx = canvas.getContext(\"2d\");\n    let frame = requestAnimationFrame(loop);\n\n    function loop(t) {\n      frame = requestAnimationFrame(loop);\n\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n      for (let p = 0; p < imageData.data.length; p += 4) {\n        const i = p / 4;\n        const x = i % canvas.width;\n        const y = (i / canvas.height) >>> 0;\n\n        const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);\n        const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);\n        const b = 128;\n\n        imageData.data[p + 0] = r;\n        imageData.data[p + 1] = g;\n        imageData.data[p + 2] = b;\n        imageData.data[p + 3] = 255;\n      }\n\n      ctx.putImageData(imageData, 0, 0);\n    }\n\n    onCleanup(() => cancelAnimationFrame(frame));\n  });\n\n  return <Canvas ref={canvas} />;\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "canvas",
			content: "import \"./style.css\";\n\nexport default function Canvas(props) {\n  return <canvas width=\"256\" height=\"256\" />;\n}\n"
		},
		{
			name: "style",
			type: "css",
			content: "canvas {\n  background-color: #666;\n  -webkit-mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n  mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { onMount, onCleanup } from \"solid-js\";\n\nimport Canvas from \"./canvas\";\n\nfunction App() {\n  let canvas;\n  onMount(() => {\n    const ctx = canvas.getContext(\"2d\");\n    let frame = requestAnimationFrame(loop);\n\n    function loop(t) {\n      frame = requestAnimationFrame(loop);\n\n      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);\n\n      for (let p = 0; p < imageData.data.length; p += 4) {\n        const i = p / 4;\n        const x = i % canvas.width;\n        const y = (i / canvas.height) >>> 0;\n\n        const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);\n        const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);\n        const b = 128;\n\n        imageData.data[p + 0] = r;\n        imageData.data[p + 1] = g;\n        imageData.data[p + 2] = b;\n        imageData.data[p + 3] = 255;\n      }\n\n      ctx.putImageData(imageData, 0, 0);\n    }\n\n    onCleanup(() => cancelAnimationFrame(frame));\n  });\n\n  return <Canvas ref={canvas} />;\n}\n\nrender(() => <App />, document.getElementById(\"app\"));\n"
		},
		{
			name: "canvas",
			content: "import \"./style.css\";\n\nexport default function Canvas(props) {\n  return <canvas ref={props.ref} width=\"256\" height=\"256\" />;\n}\n"
		},
		{
			name: "style",
			type: "css",
			content: "canvas {\n  background-color: #666;\n  -webkit-mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n  mask: url(https://dev.solidjs.com/img/logo/dark-without-wordmark/logo.svg) 50% 50% no-repeat;\n}"
		}
	]
};
var markdown = "컴포넌트 내부의 ref를 부모에게 노출하고 싶은 경우가 많이 있는데, Solid에서는 `ref` 속성을 사용합니다.\n외부에서 컴포넌트에 `ref`를 사용하는 것은 네이티브 엘리먼트에서 `ref`를 사용하는 것과 매우 유사하게 작동하는데, 할당할 변수나 콜백 함수를 전달할 수 있습니다.\n\n하지만, 컴포넌트 작성자는 해당 `ref`를 내부 엘리먼트에 연결하여 다시 전달해야 하며, ref 전달을 위해 `props.ref`를 활용할 수 있습니다. \n`ref`의 타입이 제공되는 경우 콜백 형식이지만, 대부분의 경우 해당 컴포넌트의 JSX에 있는 엘리먼트나 컴포넌트의 `ref` 속성에 직접 할당할 가능성이 높기 떄문에, 이러한 세부 정보는 대부분 숨겨져 있습니다.\n\n로고에 애니메이션을 다시 적용하려면, ref를 `canvas.tsx`에 전달해야 합니다:\n\n```jsx\n<canvas ref={props.ref} width=\"256\" height=\"256\" />\n```\n";
var bindings_forward_refs = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { bindings_forward_refs as default, lesson, markdown, solved };
