@dooboostore두부가게
StartComponentsSSREcosystem
GitHub
a TypeScript framework on web standards
웹 표준 위의 TypeScript 프레임워크
Return a value.
We'll put it everywhere.값을 반환하세요.
나머지는 우리가 둡니다.
Build company sites and web apps out of standard Web Components. Buttons that update the screen, data that loads itself, pages search engines can read —each in a few lines.
표준 Web Components로 회사 홈페이지와 웹앱을 만듭니다. 누르면 바뀌는 화면, 알아서 불러오는 데이터, 검색엔진이 읽는 페이지까지 —각각 몇 줄이면 돼요.
No React. No virtual DOM. No state library.React 없이. 가상 DOM 없이. 상태관리 라이브러리 없이.
For those who've been there — you won't write고생해 본 분들께 — 이제 안 써도 되는 것clearInterval(id)
Start in 5 minutes5분 만에 시작
See it run돌아가는 거 보기
Click → the screen updates클릭하면 화면이 바뀐다
Two decorators. The screen updates. That's it.데코레이터 두 줄. 화면이 바뀝니다. 끝.
Click the button.
0clicks so far.버튼을 눌러보세요.
지금까지0번.
0clicks so far.버튼을 눌러보세요.
지금까지0번.
No setState. No store. The method on the right is the whole app.setState도 스토어도 없음. 오른쪽 메서드가 앱 전부.
privateclicks =0;@eventClick('#click-btn')// when: clicked@innerHtml('.click-out')// where: output divonClick() {this.clicks++;return`${this.clicks}clicks so far.`;
}Search as you type입력하면서 검색
Debounce without writing a debounce. One option.debounce를 안 짜도 debounce. 옵션 하나.
0keys typed누른 키
0searches run실제 검색
Type fast — searches wait for a pause.빠르게 쳐보세요 — 멈출 때만 검색합니다.
Searching this library's own export names. Type a word quickly: the key count races, the search count barely moves.이 라이브러리가 실제로 내보내는 이름들에서 검색. 빠르게 쳐보면 키 수는 치솟고 검색 수는 거의 안 움직여요.
@eventInput('.q-in')// every key@innerHtml('.q-keys')countKey() {return++this.keys; }@eventInput('.q-in', {debounceTime:300,// after a pause})@innerHtml('.q-runs', {valueKey:'runs'})@innerHtml('.q-out', {valueKey:'hits'})search(@matchedElementinput:HTMLInputElement) {constq = input.value;consthits =NAMES.filter(n=>n.includes(q));return{runs: ++this.runs,hits:chips(hits) };
}Load data from a server서버에서 데이터 불러오기
Zero try/catch. Loading, cancel and errors still handled.try/catch 0줄. 그래도 로딩·취소·에러까지 처리.
Press load — a real GET goes out.불러오기를 눌러보세요 — 진짜 GET이 나갑니다.
Mash it: only the last request survives (Network tab shows the rest cancelled). You get the request as a Promise — failure goes to the second then callback, no try/catch.연타해 보세요: 마지막 요청만 살아남음 (네트워크 탭에 나머진 취소). 요청을 Promise로 받으니 실패는 then의 두 번째 콜백으로 — try/catch 없이.
@eventClick('#fetch-btn')// shown while the request is pending@innerHtml('.fetch-out', {fallback:() =>'Loading…'})// click again → the previous request is aborted@fetch({url:POST_URL,abortPrevious:true})load(@fetchPromisep:Promise<Post>) {// the request, as a Promisereturnp.then(post=>`<b>${post.title}</b>`,() =>'Failed — but no try/catch.');
}Load once, keep it한 번 불러와서 기억하기
Zero cache code. Read it ten times, the server hears once.캐시 코드 0줄. 열 번 읽어도 서버엔 한 번.
0reads읽기
0requests실제 요청
Press Read.읽기를 눌러보세요.
Press Read as often as you like — the request count stays at 1. Reload forgets it (this.post = undefined), so the next read asks the server again.읽기를 몇 번 눌러도 요청 수는 1. 다시 불러오기는 기억을 지우고(this.post = undefined), 다음 읽기에 서버에 다시 묻습니다.
@fetchGet(POST_URL)declarepost?:Promise<Post>;// read → request once → remembered@eventClick('#read-btn')@innerHtml('.mem-out')read() {returnthis.post?.then(p=>p.title);
}@eventClick('#reload-btn')reload() {this.post=undefined;// forget → the next read requests again}Smooth animation부드러운 애니메이션
An animation loop with zero loop code.애니메이션 루프, 루프 코드 0줄.
Move your pointer (or drag) here여기서 마우스를 움직이거나 드래그해 보세요
Runs every frame while the element is on the page — no requestAnimationFrame to re-schedule, no cancelAnimationFrame when it leaves.엘리먼트가 화면에 있는 동안 매 프레임 실행 — requestAnimationFrame 재예약도, 떠날 때 cancelAnimationFrame도 없음.
@eventPointermove('.chase')aim(@eventObjecte:PointerEvent) {constr = (e.currentTargetasHTMLElement).getBoundingClientRect();this.tx= e.clientX- r.left;this.ty= e.clientY- r.top;
}@requestAnimationFrame// every frame@updateStyle('.chase-dot')follow() {this.x+= (this.tx-this.x) *0.12;// ease towardthis.y+= (this.ty-this.y) *0.12;return{transform:`translate(${this.x}px,${this.y}px)`};
}Update every second매초 갱신하기
Zero clearInterval. Leave the page and it stops itself.clearInterval 0줄. 페이지를 떠나면 알아서 멈춥니다.
--:--:--
@setInterval
Ticks every second. Leave this page and it stops by itself — the timer belongs to the element.매초 똑딱. 이 페이지를 떠나면 알아서 멈춥니다 — 타이머가 엘리먼트에 묶여 있어요.
@setInterval(1000)@innerHtml('.clock-time', {valueKey:'time'})@updateStyle('.clock-ring', {valueKey:'ring'})tick() {constnow =newDate();constdeg = now.getSeconds() *6;return{time: now.toTimeString().slice(0,8),// 19:31:33ring: {background:`conic-gradient(#FF385C${deg}deg, #1E1E1E 0)`},
};
}// no clearInterval — it stops when the element leavesComponents talking to each other컴포넌트끼리 대화하기
Zero wiring. Return a value — anyone in the app receives it.연결 코드 0줄. 반환하면 앱 어디서든 받습니다.
Waiting for a message…메시지 기다리는 중…
The publisher doesn't know who listens. The subscriber could live anywhere in the app — the header uses this for the language switch.발행자는 누가 듣는지 모름. 구독자는 앱 어디에 있어도 됨 — 상단 언어 전환도 이걸로 돎.
@eventInput('.text-in')@publishSwcAppMessage('home:echo')// return = messagepublish(@matchedElementinput:HTMLInputElement) {returninput.value;
}// Behavior: late joiners get the last one@subscribeSwcAppMessageBehavior('home:echo')@innerHtml('.echo-out')show(@swcAppMessagemsg:SwcAppMessage<string>) {returnmsg.data||'Waiting for a message…';
}Scroll animations스크롤 애니메이션
Never create or tear down an IntersectionObserver again.IntersectionObserver, 만들 일도 해제할 일도 없습니다.
🍣Sushi
🍕Pizza
🍜Ramen
🌮Taco
🥐Croissant
🍩Donut
🍦Gelato
🥗Salad
0 / 8 in view
No IntersectionObserver setup, no unobserve on teardown — one decorator, and it's all cleaned up when the element leaves.IntersectionObserver 생성도, 해제도 직접 안 함 — 데코레이터 하나, 엘리먼트가 떠나면 알아서 정리.
privateseen =newSet<Element>();@intersectionObserver('.reveal-card', {threshold:0.6,
})@updateClass('.reveal-card', {root:'auto',valueKey:'cls',
})@innerHtml('.reveal-count', {valueKey:'count'})onReveal(_els:unknown,entries:IntersectionObserverEntry[]) {for(consteofentries)
e.isIntersecting?this.seen.add(e.target)
:this.seen.delete(e.target);return{cls: {on:(el:Element) =>this.seen.has(el) },count:`${this.seen.size}/ 8 in view`,
};
}Infinite scroll무한 스크롤
Infinite scroll. Zero scroll listeners.무한 스크롤. 스크롤 이벤트 0줄.
…
0 / 100
Scroll the box. When the bottom marker comes into view, the next 10 are appended — no scroll math, no throttling, no cleanup.박스를 스크롤해 보세요. 바닥 표시가 보이면 다음 10개가 붙어요 — 스크롤 계산도, 쓰로틀도, 정리도 없음.
@intersectionObserver('.feed-end')// the bottom marker@insertBeforeEnd('.feed', {valueKey:'items'})@innerHtml('.feed-count', {valueKey:'count'})more(_els:unknown,entries:IntersectionObserverEntry[]) {constseen = entries.some(e=>e.isIntersecting);if(seen &&this.loaded<100)this.loaded+=10;return{items: seen ?rows(this.loaded-10,10) :undefined,count:`${this.loaded}/ 100`,
};
}Check → prepare → run → clean up검사 → 준비 → 실행 → 정리
Check, prepare, run, clean up — all on one method.검사·준비·실행·정리, 메서드 하나에 다 붙습니다.
filterbeforehandlerfinally
Try it unchecked first.먼저 체크 없이 눌러보세요.
filter gates it, before prepares data and injects it, finally always cleans up. The same four hooks exist on every trigger.filter가 막고, before가 데이터를 준비해 꽂고, finally가 항상 정리. 모든 트리거에 같은 네 훅이 있어요.
@eventClick('#buy-btn', {filter:(_e, { currentThis: c }) =>c.agreed(),before:async() => {awaitsleep(900);// pretend workreturn'TOFU-'+randomDigits(4);// → injected},finally:(_e, { currentThis: c }) =>c.unlock(),
})@innerHtml('.buy-out')onBuy(@eventBeforeReturnorderId:string) {return`✓ Order${orderId}placed`;
}Take only what you need필요한 것만 골라 받기
Zero argument order to memorize. Ask by name, it arrives.외울 인자 순서 0개. 이름으로 달라면 옵니다.
Pick one.하나 골라보세요.
No positional arguments to memorize. Swap the parameters around — it still works.외울 인자 순서 없음. 파라미터 자리를 바꿔도 그대로 동작.
@eventClickDelegate('.pick')@innerHtml('.inject-out')onPick(@helperHostSeth:HelperHostSet,// $this, $q …@eventObjecte:MouseEvent,// DOM event@matchedElementitem:HTMLElement,// the .pick) {consthost = h.$this.localName;return`${item.dataset.name}·${e.type}·${host}`;
}Watch size and changes크기·변화 감지하기
Stack as many as you like — still one MutationObserver, one ResizeObserver.몇 개를 쌓든 MutationObserver·ResizeObserver는 딱 하나씩.
0 chips · 0px
resize me크기를 바꿔보세요
—
However many observer decorators you stack, the element shares one MutationObserver and one ResizeObserver.옵저버 데코레이터를 몇 개 쌓든, 엘리먼트당 MutationObserver 하나와 ResizeObserver 하나를 공유.
// shadow root resolved for you@query('.chips')declarechips:HTMLElement;@mutationObserver('.chips', {childList:true})@resizeObserver('.chips')// same box@innerHtml('.chip-out')onChips() {const{ children, offsetHeight } =this.chips;return`${children.length}chips ·${offsetHeight}px`;
}@eventInput('.rs-range')// slider → box width@updateStyle('.rs-box')onRange(@matchedElementr:HTMLInputElement) {return{width:`${r.value}px`};
}@resizeObserver('.rs-box')// any size change@innerHtml('.rs-out')onBoxResize([box]:HTMLElement[]) {return`${box.offsetWidth}×${box.offsetHeight}`;
}Every demo above — and this whole site — runs on it.방금 눌러 본 데모, 그리고 이 사이트 전체가 이걸로 만들어졌습니다.
- KO / EN switch한/영 전환
- SEO per page페이지별 SEO
- Pre-rendered HTML + sitemapHTML 미리 생성 + sitemap
- Auto-deploy on push푸시하면 자동 배포
- Browser-tested every deploy배포마다 브라우저 테스트
- Mobile모바일
Make one like this이 사이트처럼 만들기
Read this site's source이 사이트 소스 보기Don't take our word for it믿지 말고 눌러보세요
Mount 1,000, remove 1,000. Zero leaks. Press it and see.1,000개 붙였다 떼도 누수 0. 지금 눌러서 확인하세요.
0
mounted붙임
0
answered the ping핑에 응답
–
still listening after removal뗀 뒤에도 듣는 리스너
–
timers still ticking아직 도는 타이머
Each probe owns a timer and a window listener. Every listener, timer and observer a decorator creates is torn down when the element leaves — this button measures the listeners and timers, live.프로브마다 타이머 하나, window 리스너 하나. 데코레이터가 만든 리스너·타이머·옵저버는 엘리먼트가 떠나면 전부 정리됩니다 — 이 버튼은 그중 리스너와 타이머를 지금 직접 잽니다.
@elementDefine('leak-probe', {window: w })classLeakProbeextendsw.HTMLElement{@setInterval(100)tick() { stats.ticks++; }@eventWindow('swc-leak-ping')pong() { stats.answers++; }
}// the button: mount 1,000 → ping (all answer)// → remove all → reset → ping again → wait → count// no removeEventListener, no clearInterval anywherev1.0.55
on npm · MITnpm 배포 · MIT
170+
real-browser tests — Chromium, no jsdom실브라우저 테스트 — Chromium, jsdom 없음
11 / 14
packages with zero third-party runtime deps서드파티 런타임 의존성 0인 패키지
85k
lines of TypeScript, written from scratch줄의 TypeScript, 밑바닥부터
Early, on purpose일부러, 초기
Small community.
Short distance.작은 커뮤니티.
짧은 거리.
You won't find thousands of plugins here yet. What you will find: issues that land on the desk of the person who wrote the code, an API that is still shaped by the people using it, and a stack you can read top to bottom. Issues in Korean or English are both welcome.
아직 수천 개의 플러그인은 없습니다. 대신 이런 게 있어요: 이슈가 코드를 쓴 사람 책상에 바로 떨어지고, API가 아직 쓰는 사람들 손으로 다듬어지고, 스택을 위에서 아래까지 읽을 수 있습니다.이슈는 한국어로 남겨도 돼요.
Where we want to go가고 싶은 곳
- TC39 standard decorators — no
experimentalDecoratorsflagTC39 표준 데코레이터 —experimentalDecorators없이 - A one-command starter project명령 한 줄짜리 스타터 프로젝트
- More example apps and a component gallery예제 앱과 컴포넌트 갤러리 늘리기
- Whatever your use case needs — tell us in an issue당신의 쓰임새에 필요한 것 — 이슈로 알려주세요
Goals, not promises — tell us which one matters to you.약속이 아니라 목표예요 — 어떤 게 중요한지 알려주세요.
Components컴포넌트
Decorator-stack Web Components. Methods return values; decorators decide where they go.
데코레이터 스택 Web Components. 메서드는 값을 반환하고, 데코레이터가 둘 곳을 정합니다.
Enter들어가기
SSR
Server-side rendering that doesn't render twice, and RPC (calling server functions like local ones) by Symbol.
두 번 그리지 않는 SSR(서버 사이드 렌더링), 그리고 Symbol로 오가는 RPC(서버 함수를 내 함수처럼 부르기).
Enter들어가기
Ecosystem생태계
Fourteen packages, one philosophy. The full lineup at a glance.
열네 개 패키지, 하나의 철학. 전체 라인업을 한눈에.
Enter들어가기