브라우저에서 직접 시작하는 React 및 Vue 프로젝트

모던 프론트엔드 개발은 통상 Node.js 설치와 복잡한 npm 관리가 필요합니다. GB Coder의 고급 WebContainer IDE를 사용하면 브라우저 탭 내에서 순수 Node.js와 Vite 개발 서버를 즉시 구동할 수 있습니다.

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 명령을 실행하거나 빌드 스크립트를 제어할 수 있습니다.