From 39a7c6298fe6c48503963b63216df20d825605da Mon Sep 17 00:00:00 2001 From: ohah Date: Tue, 28 Oct 2025 15:07:36 +0900 Subject: [PATCH 1/6] =?UTF-8?q?dcos:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=84=A4=EB=AA=85=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/api/commands.mdx | 127 +------------------- docs/docs/guide/development.mdx | 76 +----------- docs/docs/guide/getting-started.mdx | 6 - docs/docs/guide/live-demo.mdx | 173 +--------------------------- 4 files changed, 9 insertions(+), 373 deletions(-) diff --git a/docs/docs/api/commands.mdx b/docs/docs/api/commands.mdx index 3cde8c1..0e694b7 100644 --- a/docs/docs/api/commands.mdx +++ b/docs/docs/api/commands.mdx @@ -4,141 +4,26 @@ ExecuteJS에서 사용할 수 있는 모든 Tauri 명령어를 확인하세요. ## 기본 명령어 -### greet - -인사말을 반환하는 기본 명령어입니다. - -```typescript -import { invoke } from '@tauri-apps/api/core'; - -const message = await invoke('greet', { name: 'World' }); -console.log(message); // "Hello World! You've been greeted from Rust!" -``` - -**매개변수:** -- `name` (string): 인사할 이름 - -**반환값:** -- `string`: 인사 메시지 - ### execute_js -JavaScript 코드를 실행합니다. +자바스크립트에 실행을 요청하는 명령어입니다. ```typescript import { invoke } from '@tauri-apps/api/core'; -const result = await invoke('execute_js', { - code: 'console.log("Hello, World!");' +const result = await invoke('execute_js', { + code: 'console.log("Hello, World!");', }); console.log(result); ``` **매개변수:** -- `code` (string): 실행할 JavaScript 코드 - -**반환값:** -- `JsExecutionResult`: 실행 결과 객체 - -## 실행 기록 관리 - -### get_js_execution_history - -JavaScript 실행 기록을 가져옵니다. - -```typescript -import { invoke } from '@tauri-apps/api/core'; - -const history = await invoke('get_js_execution_history'); -console.log(history); // JsExecutionResult[] -``` - -**반환값:** -- `JsExecutionResult[]`: 실행 기록 배열 - -### clear_js_execution_history - -JavaScript 실행 기록을 모두 삭제합니다. - -```typescript -import { invoke } from '@tauri-apps/api/core'; - -await invoke('clear_js_execution_history'); -``` - -## 코드 저장/로드 - -### save_js_code - -JavaScript 코드를 로컬에 저장합니다. - -```typescript -import { invoke } from '@tauri-apps/api/core'; - -await invoke('save_js_code', { - code: 'console.log("Saved code");' -}); -``` - -**매개변수:** -- `code` (string): 저장할 JavaScript 코드 - -### load_js_code - -저장된 JavaScript 코드를 불러옵니다. - -```typescript -import { invoke } from '@tauri-apps/api/core'; - -const code = await invoke('load_js_code'); -console.log(code); // string -``` - -**반환값:** -- `string`: 저장된 JavaScript 코드 - -## 앱 정보 - -### get_app_info -애플리케이션 정보를 가져옵니다. - -```typescript -import { invoke } from '@tauri-apps/api/core'; - -const appInfo = await invoke('get_app_info'); -console.log(appInfo); -``` +- `code` (string): 실행할 JavaScript 코드 **반환값:** -- `AppInfo`: 애플리케이션 정보 객체 - -## 타입 정의 - -### JsExecutionResult - -```typescript -interface JsExecutionResult { - id: string; - code: string; - result: string; - success: boolean; - timestamp: string; - executionTime: number; -} -``` -### AppInfo - -```typescript -interface AppInfo { - name: string; - version: string; - tauriVersion: string; - platform: string; - arch: string; -} -``` +- `JsExecutionResult`: 실행 결과 객체 ## 에러 처리 @@ -150,4 +35,4 @@ try { } catch (error) { console.error('Execution failed:', error); } -``` \ No newline at end of file +``` diff --git a/docs/docs/guide/development.mdx b/docs/docs/guide/development.mdx index 1cfe188..ba3ad03 100644 --- a/docs/docs/guide/development.mdx +++ b/docs/docs/guide/development.mdx @@ -160,7 +160,7 @@ src/ ### 프론트엔드 기술 스택 -- **상태 관리**: Legend State (반응형 상태 관리) +- **상태 관리**: Zustand (경량 상태 관리) - **UI 라이브러리**: Radix UI + Tailwind CSS - **코드 에디터**: Monaco Editor - **레이아웃**: react-resizable-panels @@ -173,7 +173,7 @@ src/ - **프레임워크**: Tauri 2.0 - **JavaScript 엔진**: Deno Core 0.323 (V8 기반) - **테스팅**: cargo test -- **린팅**: rustfmt + clippy +- **린팅**: rustfmt - **로깅**: tracing ### 모노레포 구조 @@ -181,75 +181,3 @@ src/ - **pnpm 워크스페이스**: Node.js 패키지 관리 - **Cargo 워크스페이스**: Rust 크레이트 관리 - **조건부 CI**: 폴더별 변경사항에 따른 워크플로우 실행 - -## 상태 관리 (Legend State) - -### 기본 사용법 - -```typescript -import { observable } from '@legendapp/state'; -import { useObservable } from '@legendapp/state/react'; - -// 상태 정의 -const state = observable({ - count: 0, - name: 'ExecuteJS' -}); - -// 컴포넌트에서 사용 -function Counter() { - const count = useObservable(state.count); - - return ( -
-

Count: {count}

- -
- ); -} -``` - -### 액션 패턴 - -```typescript -// features/counter/model.ts -export const counterState = observable({ - count: 0, -}); - -export const counterActions = { - increment: () => counterState.count++, - decrement: () => counterState.count--, - reset: () => (counterState.count = 0), -}; -``` - -## UI 컴포넌트 (Radix UI + Tailwind) - -### Radix UI 사용법 - -```typescript -import { Button, Box, Text } from '@radix-ui/themes'; - -function MyComponent() { - return ( - - - Hello World - - - - ); -} -``` - -### Tailwind CSS 클래스 - -- **색상**: `bg-gray-2`, `text-gray-12`, `border-gray-6` -- **간격**: `p-4`, `m-2`, `gap-2` -- **레이아웃**: `flex`, `grid`, `h-full`, `w-full` -- **상태**: `hover:bg-gray-4`, `focus:ring-2` diff --git a/docs/docs/guide/getting-started.mdx b/docs/docs/guide/getting-started.mdx index 9f41b2d..2d2f843 100644 --- a/docs/docs/guide/getting-started.mdx +++ b/docs/docs/guide/getting-started.mdx @@ -44,12 +44,6 @@ ExecuteJS를 사용하여 JavaScript 코드를 안전하게 실행하는 방법 - **저장**: 현재 작성한 코드를 로컬에 저장할 수 있습니다. - **로드**: 이전에 저장한 코드를 불러올 수 있습니다. -### 실행 기록 관리 - -- 모든 실행 결과는 자동으로 기록됩니다. -- 기록을 확인하고 이전 결과를 다시 볼 수 있습니다. -- 필요에 따라 기록을 삭제할 수 있습니다. - ## 프로젝트 구조 ``` diff --git a/docs/docs/guide/live-demo.mdx b/docs/docs/guide/live-demo.mdx index 0a90f97..a0ec104 100644 --- a/docs/docs/guide/live-demo.mdx +++ b/docs/docs/guide/live-demo.mdx @@ -2,175 +2,4 @@ ExecuteJS의 라이브 데모를 통해 JavaScript 실행 기능을 직접 체험해보세요. -## 기본 사용법 - -다음은 ExecuteJS의 기본 기능을 시뮬레이션하는 예제입니다: - -```tsx live -export default function BasicExample() { - const greeting = 'Hello, ExecuteJS!'; - const sum = 10 + 20; - const jsResult = 'JavaScript 실행 시뮬레이션: console.log("Hello from ExecuteJS!");'; - - return ( -
-

ExecuteJS 기본 데모

-

인사: {greeting}

-

덧셈: 10 + 20 = {sum}

-

JavaScript 실행: {jsResult}

-
- ); -} -``` - -## JavaScript 실행 시뮬레이션 - -실제 JavaScript 코드 실행을 시뮬레이션하는 예제입니다: - -```tsx live -import { useState } from 'react'; - -export default function JsExecutionDemo() { - const [code, setCode] = useState('console.log("Hello, ExecuteJS!");'); - const [result, setResult] = useState(''); - - const handleExecute = () => { - // JavaScript 실행 시뮬레이션 - const mockResult = `실행 결과: ${code.length}자 코드가 실행되었습니다.\n실제 실행: ${code}`; - setResult(mockResult); - }; - - return ( -
-

JavaScript 실행 데모

-
-