var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, onMount, For } from \"solid-js\";\nimport \"./styles.css\";\n\nfunction App() {\n  const [photos, setPhotos] = createSignal([]);\n\n  return <>\n    <h1>Photo album</h1>\n\n    <div class=\"photos\">\n      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>\n        <figure>\n          <img src={photo.thumbnailUrl} alt={photo.title} />\n          <figcaption>{photo.title}</figcaption>\n        </figure>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "styles",
			type: "css",
			content: ".photos {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-gap: 8px;\n}\n\nfigure, img {\n  width: 100%;\n  margin: 0;\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, onMount, For } from \"solid-js\";\nimport \"./styles.css\";\n\nfunction App() {\n  const [photos, setPhotos] = createSignal([]);\n\n  onMount(async () => {\n    const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n    setPhotos(await res.json());\n  });\n\n  return <>\n    <h1>Photo album</h1>\n\n    <div class=\"photos\">\n      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>\n        <figure>\n          <img src={photo.thumbnailUrl} alt={photo.title} />\n          <figcaption>{photo.title}</figcaption>\n        </figure>\n      }</For>\n    </div>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "styles",
			type: "css",
			content: ".photos {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  grid-gap: 8px;\n}\n\nfigure, img {\n  width: 100%;\n  margin: 0;\n}"
		}
	]
};
var markdown = "Solid는 리액티브 시스템에 의해 생성, 소멸이 되기 때문에 라이프사이클이라고 할 만한 것이 거의 없습니다. 리액티브 시스템은 동기식으로 생성되고 업데이트되므로, 업데이트가 끝날 때까지 푸시되는 Effect만 스케줄링됩니다.\n\n우리는 간단한 작업을 하는 개발자들이 이런 식으로 생각하지 않는다는 것을 발견했습니다. 그래서 이해를 쉽게 하기 위해 트래킹하지 않는 (재실행하지 않는) `createEffect` 호출을 `onMount`라는 별칭으로 지정했습니다. 이것은 단지 Effect 호출일 뿐이지만, 모든 초기 렌더링이 완료되면 컴포넌트당 한 번만 실행된다는 확신을 가지고 사용할 수 있습니다.\n\n사진을 불러오기 위해 `onMount` 훅을 사용해 봅시다:\n```js\nonMount(async () => {\n  const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);\n  setPhotos(await res.json());\n});\n```\n\n라이프사이클은 브라우저에서만 실행되므로, `onMount`에 있는 코드는 SSR 동안 서버에서 실행되지 않는다는 장점이 있습니다. 이 예제에서는 데이터를 가져오고 있지만, 일반적으로는 서버/브라우저 코디네이션을 위해 Solid의 Resource를 사용합니다.\n";
var lifecycles_onmount = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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