노력하는 개발자 노력하는 개발자

전체 글

• LocalStorage 패키지별 관리

  Language/Java Script 2025. 3. 13. 09:15

  로컬스토리지 막쓰게되면 나중에 관리하기 힘들어진다. 요새 바빠서 관리 못하다가 만들어 둔거 정리해둔다. 소스Utils.tsxexport default class Utils { ... /** * LocalStorageManager 클래스 * baseKey를 기반으로 localStorage를 관리하는 클래스 */ static LocalStorageManager = class { #baseKey: string; #data: Record; /** * LocalStorageManager 생성자 * @param baseKey 기본 키 (네임스페이스) */ constructor(baseKey: string) { this.#baseKey = baseK..

  Read More
• Cursor에서 Figma to React rule 적용

  Language/React 2025. 3. 10. 18:14

  Figma 디자인을 React 컴포넌트로 수작업으로 변환하는 과정은 시간이 많이 소요되고 반복적인 작업이다.이 과정은 효율적이지 못하며, 자동화를 통해 개선할 필요가 있다고 생각되었다.초기 목표는 Figma API를 활용하여 디자인 토큰을 추출하고, 이를 바탕으로 React 코드를 자동 생성하는 것이었다. 그러나 여러 기술적 한계로 인해 완벽한 자동화에 실패하였다.특히, Figma의 디자인을 AI를 사용하지 않고 완벽하게 React 코드로 재현하는 것은 몇일간 테스트한 결과 한계가 있는듯 보인다. (더이상 시간투자 X)그래도 노가다 작업을 줄이기 위해서 작업 방향을 급선회 하여, Cursor에서 제공하는 규칙을 사용하여 Figma 디자인에서 React 컴포넌트로의 변환 시간을 단축시키는 방식으로 정리해 ..

  Read More
• TypeScript로 MCP Server 만들기

  Language/React 2025. 3. 9. 12:44

  프로젝트 설정프로젝트 생성$ mkdir mcp-typescript-250309$ cd mcp-typescript-250309$ mkdir src$ cd src 라이브러리 설지$ npm install express @modelcontextprotocol/sdk zod$ npm install -D typescript ts-node$ npm install --save-dev @types/express 소스코드server.tsimport { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";import { z } from "zod";import express from "express";import { SSEServerTran..

  Read More
• Python으로 MCP Server 만들기

  Language/Python 2025. 3. 7. 16:23

  프로젝트 생성$ mkdir mcp-python-250309 소스코드pythonserver.py대충 로그 찍어두고 서버 기동하자from mcp.server.fastmcp import FastMCPimport loggingimport sys# 로깅 설정logging.basicConfig( level=logging.DEBUG, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s', handlers=[ logging.StreamHandler(sys.stdout) ])logger = logging.getLogger("mcp-server")# Create an MCP server# mcp = FastMCP("MCP 서버")m..

  Read More
• uv/uvx란 무엇이고 설치는?

  Language/Python 2025. 3. 7. 11:54

  UVX란? (ChatGPT)UVX는 UV 도구의 별칭으로, Python 패키지에서 제공하는 명령줄 도구를 설치하지 않고 실행할 수 있게 해주는 커맨드라인 인터페이스입니다. UVX를 사용하면 도구의 종속성이 일시적인 가상 환경에 설치되어 프로젝트와 격리되어 실행됩니다. 이를 통해 필요할 때마다 도구를 쉽게 실행할 수 있으며, 실행 후에는 가상 환경이 자동으로 삭제되어 디스크 공간을 절약할 수 있습니다. 예를 들어, uvx pycowsay 'hello world!' 명령을 사용하면 pycowsay 도구를 일시적인 환경에 설치하고 실행하여, 사용자가 추가적인 설치 과정 없이 즉시 도구를 사용할 수 있게 합니다.이와 같이 UVX는 특히 개발자들이 여러 다른 도구를 자주 사용하지만, 이들을 영구적으로 설치하고 싶..

  Read More
• Cursor에서 Figma MCP 사용

  Tool/VSCode&Cursor 2025. 3. 6. 12:08

  1. Figma API key 생성하기1.1. Figma 로그인먼저, Figma 웹사이트(https://www.figma.com)에 로그인 1.2. Profile 접근페이지 오른쪽 상단에 있는 프로필 아이콘(아바타)을 클릭. 이 아이콘은 보통 사용자의 이니셜이나 설정한 프로필 사진으로 되어 있다.1.3. Settings 메뉴드롭다운 메뉴에서 'Settings' 또는 '설정'을 선택 1.4. API Key 생성'Settings' 페이지로 이동하면 탭 메뉴에서 'Security' 섹션을 찾을 수 있다.이 섹션에서 'Generate new token' 버튼을 클릭생성할 토큰의 용도를 설명하는 이름을 입력하고 'Create' 버튼을 클릭하여 API 토큰을 생성 figma-mcp-access-token을 생성한다..

  Read More
• Cursor에서 Agent와 Ask의 차이점

  Tool/VSCode&Cursor 2025. 3. 6. 11:15

  cursor에서 Agent와 Ask 모드를 필요에 맞게 사용하기 위해서 글로 정리해보자.Cursor에 물어본 결과이인 하지만 정리해보는것도 의미가 있으니깐! 기본 개념AgentAgent는 Cursor에서 제공하는 AI 기반 자동화 도구입니다.사용자의 코드베이스를 이해하고 지속적으로 작업을 수행할 수 있는 자율적인 AI 어시스턴트입니다.복잡한 작업을 여러 단계로 나누어 수행하며, 코드베이스의 컨텍스트를 유지합니다.AskAsk는 Cursor에서 제공하는 단일 질문-응답 형태의 AI 지원 기능입니다.특정 질문이나 요청에 대해 일회성 응답을 제공합니다.간단한 코드 설명, 문제 해결, 코드 생성 등에 사용됩니다. 주요 차이점작업 지속성Agent: 여러 단계의 작업을 연속적으로 수행하며 컨텍스트를 유지합니다.Ask..

  Read More
• Cursor에서 MCP 사용

  Tool/VSCode&Cursor 2025. 3. 6. 11:01

  MCP(Model Context Protocol)에 대해서 알아보자.https://www.cursor.com/changelog MCP란?ANTHROPIC에서 Open Protocal로 공개한 Model Context Protocol 이다.확장 가능한 연결시스템을 MCP를 통하여 활용가능하다.MCP는 직접 구축도 가능하고 Open되어져 있는 MCP Server도 사용 가능하다.Github MCP를 연동하게 되면 cursor Agent에게 Github의 PR을 만들거나 이슈를 생성하거나 하는 작업을 시킬수 있고Supabase작업을 시킬수도 있고, Vercel을 연동해서 Agent에게 배포를 대신 Agent에게 시킬수 있다. (https://www.youtube.com/watch?v=f2ibNsDdJ0U) O..

  Read More