블록 메이커

<style> h1 { color: red; font-size: 24px; } </style> <template> <h1>안녕 블록 메이커!</h1> <ul> <li>제목 색상: red</li> <li>제목 사이즈: 24px</li> </ul> <button>설명 보기</button> </template> <script> const container = bm.container; const context = bm.context; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { alert(`제목 색상은 red이고 사이즈는 24px 이에요!`); } } container.addEventListener('click', clicked, true); </script>

{ // 웹사이트에 삽입된 각 블록의 고유한 ID 에요. "id": "...", // 세팅 빌더를 통해 정의된 블록 설정이 property 내에 포함되어 있어요. "property": { "myHelloPhrase": "🖐🏻", "myColor": "blue", "myFontSize": 36, }, ... }

<style> h1 { color: {{property.myColor}}; font-size: {{property.myFontSize}}px; } </style> <template> <h1>{{property.myHelloPhrase}} 블록 메이커!</h1> <ul> <li>제목 색상: {{property.myColor}}</li> <li>제목 사이즈: {{property.myFontSize}}px</li> </ul> <button>설명 보기</button> </template> <script> const container = bm.container; const context = bm.context; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { const myColor = context.property.myColor; const myFontSize = context.property.myFontSize; alert(`제목 색상은 ${myColor}이고 사이즈는 ${myFontSize}px 이에요!`); } } container.addEventListener('click', clicked, true); </script>

<template> <h1>Hello Block Maker!</h1> <!-- Handlebars.js 문법으로 컨텍스트 객체 내 property 값에 접근 --> <p>{{property.myDescription}}</p> </template>

<!-- 블록 컨테이너(Block Container) 영역 --> <div> <!-- 템플릿의 HTML은 블록 컨테이너 안에 그려져요. --> <h1>Hello Block Maker!</h1> <p>블록 메이커에 대한 설명이에요.</p> </div>

<!-- Good --> <script> // bm, bm.context 와 별도로 필요한 변수를 관리하고 사용 let myCounter = 0; bm.container.addEventListener('click', e => { e.preventDefault(); myCounter = myCounter + 1; }); </script> <!-- Bad --> <script> // bm.context에 변수를 할당하고 사용 bm.context.myCounter = 0; bm.container.addEventListener('click', e => { e.preventDefault(); bm.context.myCounter = bm.context.myCounter + 1; }); </script>

<!-- Good --> <script> bm.container.innerHTML = '<h1>안녕하세요!</h1>'; // 블록 컨테이너에 DOM 이벤트를 위임하고 분기 bm.container.addEventListener('click', e => { e.preventDefault(); if (e.target.matches('h1')) { alert('<h1> 태그가 클릭되었어요.'); } }, true); // 1초 뒤 <h1> 태그를 새로 생성 setTimeout(() => { bm.container.innerHTML = '<h1>☺️클릭하면 창이 떠요!</h1>'; }, 1000); </script> <!-- Bad --> <script> bm.container.innerHTML = '<h1>안녕하세요!</h1>'; // 블록 컨테이너에 그려진 HTML 요소에 직접 DOM 이벤트를 바인딩 const h1 = bm.container.querySelector('h1'); h1.addEventListener('click', e => { e.preventDefault(); alert('<h1> 태그가 클릭되었어요.'); }); // 1초 뒤 <h1> 태그를 새로 생성 setTimeout(() => { bm.container.innerHTML = '<h1>😢클릭해도 창이 안떠요...</h1>'; }, 1000); </script>

<!-- Good --> <script> // 1초마다 메시지를 출력하는 타이머 설정 const interval = setInterval(() => { console.log('⏱️ 블록이 아직 페이지에 있어요! (1초마다 동작 중)'); }, 1000); // 블록이 제거될 때 타이머를 정리 bm.onDestroy = () => { console.log('🧹 블록이 사라져서 타이머를 멈췄어요!'); clearInterval(interval); }; </script> <!-- Bad --> <script> // 1초마다 메시지를 출력하는 타이머 설정 const interval = setInterval(() => { console.log('⏱️ 블록이 아직 페이지에 있어요! (1초마다 동작 중)'); }, 1000); // 타이머를 정리하지 않아서 블록이 사라진 후에도 계속 실행돼요... </script>

<!-- <data> 태그를 활용해서 블록 밖의 데이터를 요청 --> <data value="$cart" /> <data value="$customer"/> <style> ... </style> <template> {{#if customer}} <h1>안녕하세요 {{customer.name.full}}님!</h1> {{else}} <h1>안녕하세요!</h1> {{/if}} <p>장바구니에 {{cart.count}}개의 상품을 담으셨어요.</p> {{#if customer}} <button>로그아웃</button> {{/if}} </template> <script> const container = bm.container; const context = bm.context; bm.onContextChange = () => { // 로그인 상태나 장바구니 정보가 바뀌면 실행돼요. console.log(context.customer); console.log(context.cart); }; function clicked(e) { e.preventDefault(); if (e.target.matches('button')) { // 팁: 로그아웃 버튼을 누르면 로그아웃 처리! bm.do('logout'); } } container.addEventListener('click', clicked, true); </script>

<style> h1 { /* 사용자가 블록의 설정 값(property.myColor)을 에디터에서 변경하면 프리뷰에 자동 반영돼요. */ color: {{property.myColor}}; } </style> <template> <!-- 사용자가 블록의 설정 값(property.myHelloPhrase)을 에디터에서 변경하면 프리뷰에 자동 반영돼요. --> <h1>{{property.myHelloPhrase}} 블록 메이커!</h1> <p></p> </template> <script> const container = bm.container; const context = bm.context; const p = container.querySelector('p'); // 처음 한 번은 반영되지만, 사용자가 블록의 설정 값(property.myContents)을 에디터에서 변경해도 자동 반영되지 않아요. p.innerHTML = context.property.myContents; </script>

... <script> const container = bm.container; const context = bm.context; const p = container.querySelector('p'); // 최초 실행시 설정 값(property.myContents)을 반영 p.innerHTML = context.property.myContents; // 이후 사용자가 블록의 설정 값(property.myContents)을 변경한 경우 반영 처리 bm.onContextChange = () => { const p = container.querySelector('p'); p.innerHTML = context.property.myContents; }; </script>

{{property.mySetting}} {{property.myNested.mySetting}}

{{property.myHTMLContents}} -> &lt;h1&gt;Hello Block Maker!&lt;/h1&gt; {{{property.myHTMLContents}}} -> <h1>Hello Block Maker!</h1>

<style> {{#if property.showWelcome}} p { color: green; } {{/if}} </style> <template> {{#if property.showWelcome}} <p>만나서 반가워요!</p> {{else}} <p>인사는 생략할게요...</p> {{/if}} </template>

<template> {{#if (eq property.light 'green')}} <p>초록 불이니 건널 수 있어요.</p> {{/if}} {{#if (and (eq property.light 'green') (gte property.cars 1))}} <p>초록 불이지만 차가 1대 이상 있어요. 조심히 건너가세요.</p> {{/if}} </template>

{ "property": { "items": [ { "name": "사과" }, { "name": "바나나" }, { "name": "파인애플" } ] } }

<template> <ul> {{#each property.items}} <li> {{#if @first}} <strong>[첫 항목]</strong> {{/if}} {{#if @last}} <strong>[마지막 항목]</strong> {{/if}} {{@index}}: {{name}} </li> {{else}} <li>표시할 항목이 없어요.</li> {{/each}} </ul> </template>