draw.io 에 대한 MCP를 찾고있었는데, claude를 통한 drawio output은 있으나접근및 읽기에 대한 MCP가 없었다 왜그런고 하니 이미 mxGraphModel이 충분히 구조화가 잘 되어있는데, 이를 내보내기 하거나클립보드로 손쉽게 사용가능하기 때문이라는 답변을 받았다. 그렇기에 클립보드로 내보내기 하는 방법을 소개한다. 작성된 다이어그램에서 추가 도구 > 다이어그램 편집 출력된 팝업 하단에 > 다이어그램을 클립보드에 복사 를 선택하면 된다.
Figma를 Claude MCP로 연결하고, Claude Desktop으로 운용하는 내용이 있었는데 (내용참조 https://serpiko.tistory.com/911) Figma 무료버전으로 Claude MCP 연결 (with. PAT) - Claude DesktopFigma 무료버전으로Claude MCP 연결 (with. PAT) - Claude Desktop유료 플랜 없이 Claude Desktop에서 Figma 파일을 분석하는 가장 현실적인 방법Figma의 공식 Dev Mode MCP Server는 Professional 이상 유료 플랜 + Dev 시트가serpiko.tistory.com 이번에는 Claude CLI 에서 사용하기 위한 방법을 소개하겠다. 개발환경WSL/Linux CLI에서 사용..
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 으로 진행하였다.본 내용은 연결까지 성공한 전 과정을 단계별로 정리한 가이드이다.1🪟 개발환경 ..
grafana in react
그라파나 대시보드를 리액트에 바로 표시할 수 있도록 해보자 테스트 준비물1. 그라파나 대시보드의 Public dashboard (admin 권한 필요)2. 프록시 서버3. 리액트 CRA 1. 그라파나 대시보드의 Public dashboard (admin 권한 필요) 1-1) Public dashbaord 란- 누구나 접근할 수 있도록 설정된 대시보드- 기본적으로 Grafana 대시보드는 인증을 요구하지만, 대시보드 공개 설정하면 인증 없이 접근할 수 있다 1-2) Public Dashboard 설정 방법- 다음과 같이 대시보드를 통째로 가져올 수 있다 - 일일이 그래프 하나씩 가져오는 것 보다, 그라파나 대시보드에 필요한 모니터링 자원을 셋팅해서 그 대시보드를 전부 가져오는게 더 효율적이다..
zustand 메서드 방식과 리듀서 방식
Zustand- reduxjs/toolkit 이 많이 편해지긴 했지만, 여전히 다루기 거대하고 복잡하다 포스팅 게제 현시점 (2024.12.24) zustand의 인기와 사용량이 상당히 증가하였다 - 1위가 reduxjs/toolkit 인 것은 여전하다, 그렇지만 zustand가 거의 동일한 수준으로 인지도가 높아졌다 - jotai 는 3순위 정도 되며, 4순위 recoil 과, 5순위 valtio(어려워 보인다...) 는 상대적으로 1, 2 순위와 비교하였을 때 그 사용량이 매우 저조하다 - zutand는 Redux와 매우 닮아 있으며, 간단하게는 메서드 방식과 프로젝트 규모와 소스코드가 길어지는 경우 redux처럼 리듀서 방식으로 사용할 수 있다. zustand 의 메서드 방식장점간단함: ..
- RHF에 내장된 FormProvider, useOrderFormContext를 이용하여 ContextAPI구현 - Control을 주입받은 컴포넌트로 모든 컴포넌트는 같은 useForm 생성 시점과 일치 시킨다 - setValue, resetField, useWatch 이용하여 useState와 리렌더링 없이 양방향 값 핸들링하고 연산 - 제출(Submit)시, 컴포넌트에 정의된 name 기준으로 값들을 반환한다
- 박스 우측 하단을 드래그하여 리사이즈가 가능한데, 리사이즈가 될 때 박스 안의 내용은 계속 중앙정렬 되도록 한다- 박스 우측 하단 드래그는 최소, 최대로 높이가 제한되어있다- 기본 포지션별로 15개씩 - 리사이즈 할 때 최소 수량은 포지션별 10개씩- 리사이즈 할 때 최대 수량은 포지션별 20개씩 리액트 코드로 구현해보면 다음과 같다 원본코드import React, { useState } from "react";import { render } from "react-dom";import { Resizable } from "re-resizable";const style = { display: "flex", // flexDirection: "column", // 내부 요소들을 세로로 배치하기 위해 추가..
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\Co..