시작하기
설치, 실행, 첫 컴포넌트까지.
읽고 나면 바로 쓰게 되는 UI 프레임워크
루프킷은 상태를 값처럼 다루고, 바뀐 곳만 다시 그리는 작은 런타임입니다. 빌드 설정 없이 스크립트 한 줄로 시작해 그대로 프로덕션까지 갑니다.
import { html, state, mount } from 'loopkit';
function Counter() {
const count = state(0);
return html`
<button @click=${() => count.set(count() + 1)}>
${count()}번 눌렀어요
</button>
`;
}
mount(Counter, document.querySelector('#app'));<div id="app"></div>
<script type="module" src="./Counter.js"></script>설치부터 첫 화면까지 세 단계면 충분합니다.
- 01
설치하기
npm i loopkit프로젝트에 런타임 하나만 더합니다. 번들러 설정은 건드리지 않습니다.
- 02
컴포넌트 쓰기
function Hello() { return html`<h1>안녕하세요</h1>`; }컴포넌트는 마크업을 돌려주는 평범한 함수입니다.
- 03
화면에 붙이기
mount(Hello, document.body);루트 하나만 마운트하면 나머지는 런타임이 추적합니다.
학습 경로
순서대로 읽으면 하루면 끝나고, 필요한 장만 골라 읽어도 막히지 않게 썼습니다.
UI 구성
템플릿 문법으로 화면을 조립하는 법.
상태 관리
값이 바뀌면 화면이 따라오는 원리.
심화
커지는 앱을 감당하는 도구들.