에디터 내 프리뷰(Preview) 지원

• 사용자가 설정할 수 있는 블록은 사용자가 에디터에서 블록을 삽입한 뒤, 블록이 정의한 설정 값들을 패널을 통해서 설정하는 과정을 거치게 돼요.
• 사용자가 에디터에서 블록을 설정하게 되면, 사용자는 설정한 값들이 블록에 바로 반영되어 프리뷰에 나오기를 기대해요.

에디터 프리뷰 내 태그별 특징

<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>

• <template> 태그와 <style> 태그에서 사용 중인 컨텍스트(Context) 객체의 property 값들은 에디터에서 자동으로 변경을 감지하고 반영하여 에디터 프리뷰에서 바로 확인할 수 있어요.
• <script> 태그도 <template> , <style> 태그와 동일하게 제일 처음에는 <script> 태그가 동작하면서 프리뷰에 반영돼요.
• <script> 태그는 <template> , <style> 태그와는 다르게, 별도의 문법 처리를 해주지 않으면 사용자가 블록의 설정값을 변경하였을 때 자동으로 프리뷰에 반영하지 않아요.

<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>

• 사용자가 블록이 정의한 설정 값(컨텍스트(Context) 객체의 property)들을 설정하여 property 값에 변화가 생기면, 블록 메이커는 컨텍스트(Context) 객체에 변화가 생겼다고 판단하고 bm.onContextChange에 정의한 함수를 실행해요.
• bm.onContextChange에 콜백(Callback) 함수를 정의하고, property 값의 변화가 발생한 경우 블록의 UI와 동작에 반영하는 코드를 작성하면 프리뷰에서도 잘 반영되는 블록을 제작할 수 있어요.