머리가 나뻐서 삽질 SAP(Study And Programming)

draw.io import (non MCP)

serpiko — Thu, 28 May 2026 17:33:20 +0900

draw.io 에 대한 MCP를 찾고있었는데, claude를 통한 drawio output은 있으나

접근및 읽기에 대한 MCP가 없었다

왜그런고 하니 이미 mxGraphModel이 충분히 구조화가 잘 되어있는데, 이를 내보내기 하거나

클립보드로 손쉽게 사용가능하기 때문이라는 답변을 받았다.

그렇기에 클립보드로 내보내기 하는 방법을 소개한다.

작성된 다이어그램에서

추가 도구 > 다이어그램 편집

출력된 팝업 하단에 > 다이어그램을 클립보드에 복사 를 선택하면 된다.

Figma 무료버전으로 Claude MCP 연결 - Claude Code CLI

serpiko — Wed, 27 May 2026 16:50:43 +0900

Figma를 Claude MCP로 연결하고, Claude Desktop으로 운용하는 내용이 있었는데

(내용참조 https://serpiko.tistory.com/911)

Figma 무료버전으로 Claude MCP 연결 (with. PAT) - Claude Desktop

Figma 무료버전으로Claude MCP 연결 (with. PAT) - Claude Desktop유료 플랜 없이 Claude Desktop에서 Figma 파일을 분석하는 가장 현실적인 방법Figma의 공식 Dev Mode MCP Server는 Professional 이상 유료 플랜 + Dev 시트가

serpiko.tistory.com

이번에는 Claude Code CLI 에서 사용하기 위한 방법을 소개하겠다.

개발환경

WSL/Linux

CLI에서 사용할 때 전역설정을 위해 user (권한 적용 범위는, 아래 표 참조) 범위로 설정하도록 하겠다.

값	효과	저장 위치
user	모든 프로젝트에서 사용 가능	~/.claude.json
project	이 프로젝트 + 협업자 공유	./.mcp.json (git 커밋 가능)
local (기본)	이 프로젝트, 본인만	로컬 settings

설정파일 위치 및 추가

다음의 경로에서 설정파일에 mcp를 추가하자

$ cd ~/.claude/json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "여기에_PAT_붙여넣기"
      }
    }
  }
}

의 내용을 다음의 위치에 넣으면 된다.

(Tip: vscode에서는 ctrl+shift+p를 눌러서 WLS에 연결 하면, json 파일을 바로 편하게 열 수 있다)

Claude CLI 로 연결 확인

연결 되었음을 확인하기 위해, claude mcp list 명령어로 확인해보자.

위와 같이 Connected 가 뜨면 정상 연결

Claude CLI 에서 작업 시작

연결이 잘 되었으므로, 본격적으로 피그마와 연결된 자원에 대해 접근이 가능하므로

피그마 URL을 알려주고, 컨텍스트가 가능하다!

Figma 무료버전으로 Claude MCP 연결 (with. PAT) - Claude Desktop

serpiko — Tue, 26 May 2026 17:50:24 +0900

Figma 무료버전으로
Claude MCP 연결 (with. PAT) - Claude Desktop

유료 플랜 없이 Claude Desktop에서 Figma 파일을 분석하는 가장 현실적인 방법

Figma의 공식 Dev Mode MCP Server는 Professional 이상 유료 플랜 + Dev 시트가 필요하다.

그래서 무료 계정에서는 안되지만 커뮤니티 MCP(figma-developer-mcp) + Personal Access Token(PAT) 조합으로
Claude MCP로 연결이 가능하다.

참고로 기획서를 같이 살펴보고, 논의를 진행하기 위해서 Claude CLI가 아닌 Windows Claude Desktop 으로 진행하였다.

본 내용은 연결까지 성공한 전 과정을 단계별로 정리한 가이드이다.

개발환경 — Windows

Claude Desktop은 Windows 프로세스로 실행되므로 MCP 서버 실행에 필요한 도구들도 Windows 측에 설치되어 있어야 한다. (참고로 WSL에 Node.js가 있어도 Claude Desktop은 이것을 직접 사용하지 못하므로 연관성이 없다.)

Windows 11/10 Claude Desktop

Node.js · npm 버전 확인

먼저 Windows 에 nodejs를 설치하자, nodejs.org에서 LTS 버전을 설치한 뒤 PowerShell에서 버전을 확인하면 된다.
npx는 Node.js에 포함되어 있기 때문에 별도 설치는 필요없다.

# PowerShell
PS C:\Users\User> node -v
v24.16.0

PS C:\Users\User> npm -v
11.13.0

Node v24.16.0 npm 11.13.0

⚠️ 트러블슈팅 — PowerShell 실행 정책

npm -v 실행 시 `npm: 이 시스템에서 스크립트를 실행할 수 없으므로...` 오류가 나는 경우가 있다.
Windows의 기본 ExecutionPolicy가 Restricted여서 발생하는 보안 차단인데, 현재 사용자 범위에서만
풀어주면 안전하게 해결된다.

# 현재 사용자에 대해서만 서명된 원격 스크립트 허용
PS C:\Users\User> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned # 이후 npm 정상 동작
PS C:\Users\User> npm -v 11.13.0

PSSecurityException RemoteSigned

Figma에서 PAT 발급

Figma Settings → Security → Personal access tokens → Generate new token
무료(Starter) 계정도 PAT 발급이 가능하다.
토큰 이름은 식별하기 좋게(예: Claude-Figma-MCP), 권한은 Read 계열에 체크하면 충분하고, 생성 시
한 번만 보이는 토큰을 반드시 저장해 놓아야 한다.

⚠️ 보안: PAT는 비밀번호와 같다. 채팅·블로그·캡처에 절대 노출하지 안된다.
노출되면 즉시 Revoke 후 재발급해야 하며, 만료기간(90일 권장)을 짧게 잡으면 더 안전하다.

무료 계정 OK Read 권한 노출 금지

Claude Desktop 실행 · 설정 진입

Claude Desktop 좌측 상단 File → Settings (또는

Ctrl + ,

) → 좌측 탭 개발자(Developer) → 구성 편집(Edit Config) 버튼을 클릭하면 claude_desktop_config.json 파일 위치로 탐색기가 열린다.

파일 위치: %APPDATA%\Claude\claude_desktop_config.json
실제 경로: C:\Users\<사용자명>\AppData\Roaming\Claude\claude_desktop_config.json

Developer 탭 JSON 편집

⚙️ claude_desktop_config.json 편집

최상위에 mcpServers 키를 추가하고, 그 안에 figma 서버 항목을 정의한다.
Windows에서 npx를 안정적으로 실행하기 위해 cmd /c 래핑을 사용한 것이 포인트이다.

{ "preferences": {
// 기존 환경설정들 그대로 유지
"menuBarEnabled": false,
"sidebarMode": "task",
"bypassPermissionsGateByAccount": {
"<your-account-uuid>": false
},
"remoteToolsDeviceName": "<your-device-name>"
// ... 그 외 prefs
},
"mcpServers": {
"figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "여기에_PAT_붙여넣기"
}
}
}
}

핵심 체크포인트 — 이름은 소문자 figma로!
Claude Desktop에는 Anthropic이 기본 제공하는 Figma(대문자) Extension이 있다.
우리는 추가하는 커뮤니티 MCP는 이름 충돌을 피하려고 소문자 figma로 등록했다.
이 둘은 별개 서버로 공존한다.

mcpServers 추가 소문자 figma cmd /c 래핑

✅ MCP 서버 연결 확인

파일 저장 후 Claude Desktop을 완전 종료(트레이 아이콘까지 종료) → 재시작 Settings → Developer → 로컬 MCP 서버 화면에서 figma(소문자) 항목이 running 상태로 떠 있으면 성공.

핵심 포인트 (중요)

running 대소문자 구분

내부 동작 흐름 (자동으로 일어나는 일)

설정 저장과 재시작만 했을 뿐인데 어떻게 연결되는 걸까? 백그라운드에서 다음 흐름이 자동으로 일어나게 된다.

Claude Desktop 시작 — claude_desktop_config.json 읽음

↓

⚡ "cmd /c npx -y figma-developer-mcp --stdio" 명령 실행

↓

npx가 figma-developer-mcp 패키지 자동 다운로드 (최초 1회, 10~30초 소요)

↓

️ MCP 서버 프로세스 백그라운드 실행

↓

PAT로 Figma REST API 인증

↓

Claude Desktop ↔ MCP 서버 stdio 통신 시작

↓

연결 완료 — 채팅에서 Figma 도구 사용 가능

stdio 통신 REST API 인증

실제 호출 테스트 — Figma URL 분석

Figma 파일 URL을 복사해 Claude에게 "이 파일의 메타데이터 간단히 요약해줘" 라고 요청하면, MCP가 자동으로 호출되어 페이지·프레임·컴포넌트 구조를 분석해준다. 테스트용으로 Figma 공식 튜토리얼 Figma basics 파일을 사용했다.

토큰 절약 팁: 큰 파일은 전체 호출 시 응답이 매우 커집니다. 특정 페이지/프레임의 node-id를 지정해 부분만 호출하거나, "메타데이터만" 같은 가벼운 요청으로 시작하세요.

실전 테스트 분석 성공

연결 완료 — 이제 무료로 Figma × Claude

유료 시트 없이도 PAT 한 줄로 Figma 파일을 Claude와 함께 분석할 수 있게 됐다.
대규모 파일은 부분 호출, PAT는 정기 교체 — 두 가지만 기억하면 안전하고 효율적으로 쓸 수 있게되었다!

grafana in react

serpiko — Thu, 2 Jan 2025 14:49:43 +0900

그라파나 대시보드를 리액트에 바로 표시할 수 있도록 해보자

테스트 준비물

1. 그라파나 대시보드의 Public dashboard (admin 권한 필요)

2. 프록시 서버

3. 리액트 CRA

1. 그라파나 대시보드의 Public dashboard (admin 권한 필요)

1-1) Public dashbaord 란

- 누구나 접근할 수 있도록 설정된 대시보드

- 기본적으로 Grafana 대시보드는 인증을 요구하지만, 대시보드 공개 설정하면 인증 없이 접근할 수 있다

1-2) Public Dashboard 설정 방법

- 다음과 같이 대시보드를 통째로 가져올 수 있다

- 일일이 그래프 하나씩 가져오는 것 보다, 그라파나 대시보드에 필요한 모니터링 자원을 셋팅해서
그 대시보드를 전부 가져오는게 더 효율적이다

- 대시보드 그래프 하나를 선택해서 오른쪽 상단의 Share 버튼을 클릭한다.

- 중간 부분에 노출과 관련된 옵션이 있는데 (참고를 위한 아래의 이미지는, 관리자 권한에서 이미 대시보드로의 노출이 되었기 때문에, 별다른 옵션이 보이지 않고 공개 해제 토글버튼으로 존재하고 있는 모습이다)

이 옵션을 모두 활성화 한 뒤, 확인을 누른다

- 참고로 옵션은 모두 공개할 지, 특정 역할에 대해 공개할 지 등의 권한이 있다.

- 대시보드 url을 복사하거나, 확인한다

2. 프록시 서버

2-1) CORS의 처리가 필요하다

2-2) 호출 서버에서 X-Frame-Optiopns 헤더가 DENY로 설정되어있으면 안된다.

DENY로 설정되어 있으면, iframe으로 불러오는 것을 차단하기 때문이다.

프록시 서버는 아주 간략한 스크립트로 nodejs 의 express를 이용하여 구축하였다, git 레포지토리의 도움을 받는 경우 여기를 참조하되

실제 내용물은 아래에 있는 proxy.js 를 사용해야 한다

package.json

{
  "name": "proxy",
  "version": "0.1.0",
  "description": "Sample implementation of proxy",
  "type": "module",
  "main": "index.js",
  "dependencies": {
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "express-http-proxy": "^1.2.0",
    "morgan": "^1.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "proxy": "node proxy.js",
    "proxy:ts": "ts-node proxy.ts",
    "serve": "http-server ./index.html -p 8080 -c-1"
  },
  "author": "serpiko",
  "license": "MIT"
}

proxy.js

import cors from "cors";
import express from "express";
import proxy from "express-http-proxy";
import morgan from "morgan";

const app = express();
app.use(cors());

app.use(morgan("tiny"));

app.use(
  "/",
  proxy("http://my-grafana-domain:3006", {
    userResHeaderDecorator(headers) {
      delete headers["x-frame-options"]; // X-Frame-Options 헤더 제거
      return headers;
    },
  })
);

app.listen(20090, () => {
  console.log("  Listening on 20090,   Proxy [ http://my-grafana-domain:3006 ]");
});

프록시 서버 구동은 다음과 같이

$ npm run proxy

프록시 실행결과

3. 리액트 CRA

- 가장 빠르게 확인하기 위해서 리액트 타입스크립트 없이, CRA를 이용하였다.

$ npx create-react-app grafana-in-cra

- 이후 그라파나 컴포넌트를 한 개 만들어서, 아까 1번 에서 설정한 URL을 사용하자

Grafana.js

- URL은 우리가 프록시로 띄운 서버 호스트 (http://localhost:20090) 에 나머지 기존 URL을 연결하도록 한다

- 예를 들면 origin URL을 => Proxy URL로 사용해야 하므로, 다음과 같다

// origin URL
http://my-grafana-domain/public-dashboards/ef18a1c1b4e74dd8ae09387b86fe16b6?orgId=1&refresh=5s

// Proxy URL
http://localhost:20090/public-dashboards/ef18a1c1b4e74dd8ae09387b86fe16b6?orgId=1&refresh=5s

export default function Grafana() {
  return (
    <div className="container">
      <div>
        <iframe
          src="http://localhost:20090/public-dashboards/abcdefgakjdhfkajh?orgId=1&refresh=5s"
          width="100%"
          height="1024"
          frameborder="0"
          title="grafana"
        ></iframe>
      </div>
    </div>
  );
}

App.js

import Grafana from "./Grafana";

function App() {
  return (
    <div className="App">
      <Grafana />
    </div>
  );
}

export default App;

리액트 실행 결과

그라파나의 대시보드가 통째로 화면에 잘 표시되었음을 확인할 수 있었다.

zustand 메서드 방식과 리듀서 방식

serpiko — Tue, 24 Dec 2024 11:07:58 +0900

Zustand

- reduxjs/toolkit 이 많이 편해지긴 했지만, 여전히 다루기 거대하고 복잡하다
포스팅 게제 현시점 (2024.12.24) zustand의 인기와 사용량이 상당히 증가하였다

- 1위가 reduxjs/toolkit 인 것은 여전하다, 그렇지만 zustand가 거의 동일한 수준으로 인지도가 높아졌다

- jotai 는 3순위 정도 되며, 4순위 recoil 과, 5순위 valtio(어려워 보인다...) 는 상대적으로 1, 2 순위와 비교하였을 때

그 사용량이 매우 저조하다

- zutand는 Redux와 매우 닮아 있으며, 간단하게는 메서드 방식과 프로젝트 규모와 소스코드가 길어지는 경우

redux처럼 리듀서 방식으로 사용할 수 있다.

zustand 의 메서드 방식

장점

간단함: 불필요한 액션 타입이나 리듀서를 정의하지 않아도 되므로 코드가 간결하고 직관적임.
빠른 구현: 단순한 상태 관리에서는 빠르게 구현 가능.
가독성: 함수 이름(increment, decrement)이 명확하여 상태를 변경하는 로직이 직관적임.

단점

확장성 부족: 상태와 액션이 많아질 경우, 모든 로직을 한 파일에 유지해야 하므로 관리가 어려워질 수 있음.
테스트 어려움: 각 함수의 로직을 독립적으로 테스트하기 힘듦(리듀서 방식보다 상대적으로).

사용 사례

상태가 단순하고 액션이 많지 않은 소규모 프로젝트에서 적합.
간단한 상태 업데이트가 주된 요구사항일 때 선호.

src/stores/methodCountStore.ts

import { create } from "zustand";

type State = {
  count: number;
};

type Actions = {
  increment: (qty: number) => void;
  decrement: (qty: number) => void;
};

export const useMethodCountStore = create<State & Actions>((set) => ({
  count: 0,
  increment: (qty: number) => set((state) => ({ count: state.count + qty })),
  decrement: (qty: number) => set((state) => ({ count: state.count - qty })),
}));

src/components/MethodCounter.tsx

import React from "react";
import { useMethodCountStore } from "../stores/methodCountStore";

const MethodCounter = () => {
  const { count, increment, decrement } = useMethodCountStore();

  return (
    <div>
      <h1>Method Count: {count}</h1>
      <button onClick={() => increment(1)}>+1</button>
      <button onClick={() => decrement(1)}>-1</button>
    </div>
  );
};

export default MethodCounter;

src/App.tsx

import "./styles.css";
import MethodCounter from "./components/MethodCounter";

export default function App() {
  return (
    <div className="App">
      <MethodCounter />
    </div>
  );
}

zustand 의 리듀서 방식

장점

유사성: Redux와 같은 리듀서 기반 상태 관리 방식과 유사하므로 Redux 경험이 있는 개발자들이 쉽게 이해하고 적응할 수 있음.
확장성: 액션이 많아질 경우, 리듀서를 별도 파일로 분리하여 상태 관리와 비즈니스 로직을 모듈화할 수 있음.
테스트 용이성: 리듀서 로직을 독립적으로 테스트하기 쉬움.

단점

간단한 상태 관리에 불필요한 복잡성: 리듀서 함수와 액션 타입을 정의해야 하므로 초기 설정이 비교적 번거로움.
가독성 저하: 코드의 길이가 길어지고, 디스패치를 사용하는 방식이 직관적이지 않을 수 있음.

사용 사례

상태가 복잡하고 액션이 많은 대규모 프로젝트에서 적합.
상태 관리 로직이 단순하지 않은 경우(다양한 액션 타입과 비즈니스 로직이 필요한 경우) 선호.

src/stores/countStore.ts

import { create } from "zustand";

type State = {
  count: number;
};

type Actions = {
  increment: (qty: number) => void;
  decrement: (qty: number) => void;
};

type Action = {
  type: keyof Actions;
  qty: number;
};

type Dispatch = {
  dispatch: (action: Action) => void;
};

const countReducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.qty };
    case "decrement":
      return { count: state.count - action.qty };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
};

export const useCountStore = create<State & Dispatch>((set) => ({
  count: 0,
  dispatch: (action: Action) => set((state) => countReducer(state, action)),
}));

src/components/Counter.tsx

import React from "react";
import { useCountStore } from "../stores/countStore";

const Counter = () => {
  const { count, dispatch } = useCountStore();

  const handleIncrement = () => {
    dispatch({ type: "increment", qty: 1 });
  };

  const handleDecrement = () => {
    dispatch({ type: "decrement", qty: 1 });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>+1</button>
      <button onClick={handleDecrement}>-1</button>
    </div>
  );
};

export default Counter;

src/App.tsx

import "./styles.css";
import Counter from "./components/Counter";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

결론

초기 상태가 단순하고 액션이 몇 개 없다면, 메서드 방식을 사용
복잡한 상태 관리나 상태 변경 로직이 많아질 경우, 리듀서 방식으로 전환하는 것이 좋을듯
프로젝트 초기에는 간단한 방식으로 시작하고, 복잡성이 증가하면 리듀서 방식으로 리팩터링하는 것도 좋은 접근일 듯 하다

위의 예제 실제 코드 보기

react using state when you don't need it

serpiko — Fri, 29 Mar 2024 10:05:49 +0900

리액트의 useState가 필요없을 때, 혹은 form 에서 useState를 언제쓰는가에 대한 설명

input 값을 입력받고 보여줄 때, useState를 사용하지 않아도 된다

useState를 배제하므로써, 리렌더링 없앨 수 있다

React Hook Form: FormProvider-useFormContext

serpiko — Fri, 29 Mar 2024 09:59:48 +0900

- ContextAPI를 이용하여 Sub.js에서 사용한 값을 App.js 에서도 감지가 가능하다

React Hook Form (useState-less 패턴)

serpiko — Fri, 29 Mar 2024 09:50:03 +0900

- RHF에 내장된 FormProvider, useOrderFormContext를 이용하여 ContextAPI구현

- Control을 주입받은 컴포넌트로 모든 컴포넌트는 같은 useForm 생성 시점과 일치 시킨다

- setValue, resetField, useWatch 이용하여 useState와 리렌더링 없이 양방향 값 핸들링하고 연산

- 제출(Submit)시, 컴포넌트에 정의된 name 기준으로 값들을 반환한다

re-resizeable 을 이용한 오더북 개수조정 컴포넌트

serpiko — Fri, 9 Feb 2024 00:50:01 +0900

- 박스 우측 하단을 드래그하여 리사이즈가 가능한데, 리사이즈가 될 때 박스 안의 내용은 계속 중앙정렬 되도록 한다

- 박스 우측 하단 드래그는 최소, 최대로 높이가 제한되어있다

- 기본 포지션별로 15개씩

- 리사이즈 할 때 최소 수량은 포지션별 10개씩

- 리사이즈 할 때 최대 수량은 포지션별 20개씩

리액트 코드로 구현해보면 다음과 같다

원본코드

import React, { useState } from "react";
import { render } from "react-dom";
import { Resizable } from "re-resizable";

const style = {
  display: "flex",
  // flexDirection: "column", // 내부 요소들을 세로로 배치하기 위해 추가
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0",
  overflow: "hidden",
};

const tickSize = {
  height: "22px",
  //border: "solid 1px #FF0000",
};

const buttonStyle = {
  padding: "10px 20px",
  fontSize: "16px",
};

const orderStateStyle = {
  fontSize: "22px",
  width: "100%",
  height: "70px",
  marginTop: "10px",
  backgroundColor: "skyblue",
};
const resizeHandleStyle = {
  position: "absolute",
  bottom: -2,
  right: -5,
  width: "20px",
  height: "20px",
  background:
    "url('https://upload.wikimedia.org/wikipedia/commons/1/16/MRO_LETTER_NGI.svg')", // 아이콘 이미지 경로로 대체
  backgroundSize: "contain",
  backgroundRepeat: "no-repeat",
};

const App = () => {
  const [size, setSize] = useState({ width: 300, height: 682 });
  const handleSize = (w, h) => {
    setSize({ width: w, height: h });
  };
  let buyOrders = Array.from({ length: 20 }, (_, i) => ({
    price: i + 1,
  })).reverse();
  let sellOrders = Array.from({ length: 20 }, (_, i) => ({
    price: i + 11,
  })).reverse();

  const incrementSequence = (start, end, increment) => {
    return Array.from(
      { length: Math.floor((end - start) / increment) + 1 },
      (_, index) => start + index * increment
    );
  };
  return (
    <div>
      <div style={{ display: "flex" }}>
        <Resizable
          as="div"
          style={style}
          defaultSize={size}
          enable={{
            right: true,
            bottom: true,
            bottomRight: true,
          }}
          minWidth={100}
          maxWidth={300}
          minHeight={462}
          maxHeight={902}
          grid={[1, 1]}
          snap={{
            x: incrementSequence(100, 300, 20),
            y: incrementSequence(462, 902, 44),
          }}
          snapGap={0}
          size={size}
          onResizeStop={(e, direction, ref, d) => {
            setSize({
              width: size.width + d.width,
              height: size.height + d.height,
            });
          }}
        >
          <div
            style={{ overflow: "hidden", width: "100%", textAlign: "center" }}
          >
            {sellOrders.map((order, i) => (
              <div style={{ ...tickSize }}>매도 {order.price}</div>
            ))}
            <div style={{ ...tickSize, border: "1px solid red" }}>
              현재값 표시
            </div>
            {buyOrders.map((order) => (
              <div style={{ ...tickSize }}>매수 {order.price}</div>
            ))}
          </div>
          <div className="resize-handle" style={resizeHandleStyle}></div>
        </Resizable>
        <div style={{ width: "100%", paddingLeft: "20px" }}>
          <button style={buttonStyle} onClick={() => handleSize(300, 462)}>
            최소 (10개씩 x 2)
          </button>
          <button style={buttonStyle} onClick={() => handleSize(300, 682)}>
            기본값 (15개씩 x 2)
          </button>
          <button style={buttonStyle} onClick={() => handleSize(300, 902)}>
            최대 (20개씩 x 2)
          </button>
        </div>
      </div>
      <div style={orderStateStyle}>주문현황...</div>
    </div>
  );
};

render(<App />, document.getElementById("root"));

FLfile.remove로 파일 혹은 폴더 삭제하기

serpiko — Tue, 23 Jan 2024 00:30:47 +0900

https://serpiko.tistory.com/guestbook#comment8893801 질문에 대한 답글

FLfile 객체

목적

- FLfile API를 사용하여 파일 시스템에 접근하는 Flash 확장 기능 작성

설명

- FLfile 객체는 Flash MX 2004 7.2(..무려 20년;;) 에서부터 사용할 수 있으며

로컬 파일 시스템의 파일과 폴더에 접근, 수정, 삭제할 수 있는 Flash 확장 기능을 작성할 수 있게한다

- FLfile 객체는 JavaScript API를 확장한 형태로 제공된다

- 이 확장은 공유 라이브러리이며 다음 폴더에 위치한다

- Windows 7, 8

boot drive\Users\username\AppData\Local\Adobe\Flash CC\language\Configuration\External Libraries\FLfile.dll

- Max OS X

Macintosh HD/Users/username/Library/Application Support/Adobe/Flash CC/language/Configuration/External Libraries/FLfile.dll

- FLfile 메서드는 파일 또는 폴더(디렉토리)를 다루며, 파일이나 폴더의 위치를 지정하는 하나 이사으이 매개변수를 취한다

- 위치는 웹 사이트 URL과 매우 유사한 형식의 문자열로 표현되며, 파일 URL(Uniform Resource Identifier)이라 한다

- 다음과 같은 형식으로 지정된다 (따옴표 포함)

"file:///drive|/folder 1/folder 2/.../filename"

예시

- C드라이브에 "config" 라는 폴더를 만들고 "Program Files/MyApp" 폴더에 저장하려면 다음 명령을 사용한다.

FLfile.createFolder("file:///C|/Program Files/MyApp/config");

- 그 폴더에 "config.ini" 파일을 만드려면 아래와 같이

FLfile.write("file:///C|/Program Files/MyApp/config/config.ini", "");

- Mac에서 폴더를 만드려면 다음 명령어를 사용할 수 있다

FLfile.createFolder("file:///Macintosh/MyApp/config");

FLfile.remove()

사용

FLfile.remove(fileOrFolderURI)

매개변수

fileOrFolderURI: 삭제하려는 파일 또는 폴더를 지정하는 문자열(`file:///URI`로 표시해야 함)

반환값

Boolean: 성공시 true, 실패하면 false

설명

지정된 파일이나 폴더를 삭제합니다. 폴더에 파일이 포함된 경우 해당 파일도 삭제됩니다.

R(읽기 전용) 권한이 부여된 경우, 제거할 수 없습니다.

예시

다음의 예는 `file:///c|/temp/mydata.txt` 파일을 삭제하기위한 예제이다

- 삭제할 프롬프트를 입력받고 해당 파일이 존재하면 사용자에게 경고한뒤 `y 혹은 Y'를 선택하면

- 파일을 삭제하고 그 결과를 사용자에게 알럿창으로 알린다

var fileURI = prompt ("삭제할 파일 혹은 폴더를 입력하세요: ", "file:///c|/temp/delete.txt");
if (FLfile.exists(fileURI)) {
	var confirm = prompt("파일이 존재합니다 삭제할까요?? (y/n)", "y");
	if (confirm == "y" || confirm == "Y") {
		if(FLfile.remove(fileURI)) {
			alert(fileURI + " 파일이 삭제되었습니다.");
		} else {
			alert("다음 경로의 파일을 삭제에 실패하였습니다 " + fileURI);
		}
	}
} else {
  alert(fileURI + " 해당 경로는 파일이 존재하지 않습니다.");
}

다음의 예는 `file:///c|/Users/myname/Downloads/test` 폴더를 바로 삭제하는 예이다

- 스크립트가 구동되면 해당 경로의 폴더를 바로 삭제하고 그 결과를 output panel에 알린다

var fileURI = "file:///c|/Users/myname/Downloads/test";
if(FLfile.exists(fileURI)){
  if(FLfile.remove(fileURI)){
    fl.trace(fileURI + " 가 삭제되었습니다");
  } else {
  	fl.trace("삭제에 실패했습니다 " + fileURI)
  }
} else {
  fl.trace(fileURI + " 해당 경로는 파일이 존재하지 않습니다.");
}

응용의 예) 주의!!. 프로그램을 실행해 볼 수 없어서 가능한지에 대한 여부를 테스트해봐야 함

- 특정 폴더의 모든 파일은 => var fileURI = "file:///c|/Users/myname/Downloads/test/*";

- 특정 폴더의 모든 `.mov` 파일은 => var fileURI = "file:///c|/Users/myname/Downloads/test/*.mov";

- 특정 폴더 안에 폴더가 여러있어도 그 안의 모든 .mov 파일`은

var fileURI = "file:///c|/Users/myname/Downloads/**/*.mov";