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 Code 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..
yarn berry node 20.10.0 적용 후 error 처리 기록에러 원인- 이전 구성 버전: node 16.15.0 / packageManager yarn@3.2.3 - node 20.10.0 으로 node 버전 변경 시 에러 현재 package.json{ "name": "my-project", "version": "0.1.0", "private": true, "packageManager": "yarn@3.2.3", ...} node 20.10.0 설치 후 20.10.0으로 변경하여 프로젝트를 구동# 현재 버전$ node -v$ v16.15.0# node 20.10.0 으로 변경$ nvm install 20.10.0$ nvm use 20.10.0# 프로젝트 실행$ yarn run sta..
FLUX pattern (작성중)
FLUX patternFlux 패턴자바스크립트에서 데이터 레이어를 생성하기위한 아키텍쳐로 Flux라는 이름으로 패턴이 구현되었다.프로그램의 데이터에 대한 명확하고 이해하기 쉬운 업데이트 경로를 만드는데 중점을 둔다.개발과정에서는 변경사항을 추적하는 것이 간단하고, 버그를 찾고 수정하는것이 용이해진다.개요플럭스를 가장 잘 설명하기 위해 MVC와 같은 주요 클라이언트 측 아키텍처 중 하나와 비교해 보면 알 수 있는데, 클라이언트 측 MVC 애플리케이션에서 사용자의 상호 작용은 컨트롤러의 코드를 트리거한다. 컨트롤러는 모델의 메소드를 호출하여 하나 이상의 모델에 대한 변경 사항을 조정하는 역할을 한다. 이는 모델이 변경되면 하나 이상의 뷰에 통보하고 모델에서 새 데이터를 읽고 사용자가 새 데이터를 볼 수 있도..
fla to mp4
방명록에 지난 10년도 넘게 사용했던 플래시 질문이 올라와서 반가운 마음에 무시하지 못하고 몇가지 방법에 대해 작성해보았다 https://serpiko.tistory.com/guestbook fla를 mp4로 일괄 변환하는 방법 방법1. 이 스크립트는 폴더 내의 모든 FLA를 열고 기본 타임라인 프레임을 기준으로 압축되지 않은 .mov로 내보낸 다음 생성된 비디오 파일을 .mp4로 변환할 수 있도록 Adobe Media Encoder를 열어 변환하는 방식이다. - 특정 `.fla` 파일이 모여있는 경로를 선택한다 - 일괄로 압축되지 않은 `.mov` 로 먼저 변환한다 - 변환된 `.mov`를 다시 `.mp4`로 변환할 Adobe Media Encoder 를 실행시킨다 - 이렇게 mov 를 거치는 이유는 ..
WebSocket에서 클라이언트 버퍼사용하기(작성중)
작성중 웹브라우저 클라이언트에서 연결하는 WebSocket 프로토콜은 실시간으로 이루어지는 온라인 게임, 트레이딩 시스템과 같이 데이터 교환이 지속적으로 이루어지는 서비스에 적합하다 만약 트레이딩 시스템에서 연결된 WebSocket에서 100ms 미만의 응답속도를 가진 데이터가 끊임없이 내려오고, 그 데이터를 클라이언트 화면에 표현해야 한다면 임의의 시간과 개수로 묶어서 표현한다면 더 효율적이지 않을까? 실무에서 클라이언트에서 사용했던 버퍼처리를 소개한다 DataBuffer.ts 객체로 데이터를 처리할 버퍼를 만든다 index.ts 에서 버퍼객체 생성하여 사용한다