설치와 첫 실행

설치하기

루프킷은 런타임 하나로 끝납니다. 별도 CLI도, 프로젝트 생성기도 없습니다. 이미 번들러를 쓰고 있다면 패키지만 추가하세요.

npm i loopkit

빌드 도구가 없는 정적 페이지라면 모듈 스크립트로 바로 불러올 수도 있습니다. 이 방식은 문서를 따라가며 실험하기에 특히 편합니다.

<script type="module">
  import { html, mount } from 'https://esm.sh/loopkit';
</script>

첫 화면 띄우기

루프킷 앱은 마크업을 돌려주는 함수 하나에서 시작합니다. 그 함수를 mount에 넘기면 런타임이 실제 DOM을 만들고, 이후의 갱신을 추적합니다.

import { html, mount } from 'loopkit';

function App() {
  return html`<h1>첫 화면입니다</h1>`;
}

mount(App, document.querySelector('#app'));

#app은 여러분이 직접 만든 빈 요소입니다. 루프킷은 이 요소의 자식만 관리하고, 바깥은 건드리지 않습니다. 그래서 기존 페이지 일부만 루프킷으로 바꾸는 점진적 도입이 가능합니다.

개발 중 자주 만나는 오류

첫날 가장 많이 보는 오류는 두 가지입니다. 하나는 마운트 대상이 아직 문서에 없을 때 나는 mount target is null 입니다. 스크립트를 </body> 직전에 두거나 type="module"을 쓰면 해결됩니다. 다른 하나는 템플릿 안에서 백틱을 닫지 않아 생기는 구문 오류인데, 편집기의 html 태그 하이라이트 확장을 켜 두면 거의 사라집니다.