1. React 18 스타터 아키텍처
템플릿 갤러리에서 React 18을 선택하면 TSX 지원과 Monaco 지능형 자동완성이 포함된 표준 프로젝트가 즉시 준비됩니다.
// src/App.tsx
import React, { useState } from 'react';
export function App() {
const [clicks, setClicks] = useState(0);
return <button onClick={() => setClicks(clicks + 1)}>클릭 수: {clicks}</button>;
} 2. Vue 3 Single-File Components (.vue) 컴파일
Vue 3 스타터는 브라우저 메모리에서 @vue/compiler-sfc를 통해 .vue 파일을 즉각 컴파일하여 반응형 상태를 지원합니다.
<!-- src/App.vue -->
<template>
<div>
<h2>GB Coder 속 Vue 3</h2>
<button @click="n++">숫자: {{ n }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const n = ref(0);
</script> 3. xterm.js 터미널 쉘 활용
Ctrl+` 단축키로 터미널을 열고 npm install 명령을 실행하거나 빌드 스크립트를 제어할 수 있습니다.