m2ndy 개발 블로그

MCP와 Cursor를 활용한 Figma 컴포넌트 퍼블리싱

MCP란? MCP (Model Context Protocol)는 애플리케이션이 LLM(Large Language Model)에 컨텍스트를 제공하는 방식을 표준화한 오픈 프로토콜입니다.기존에는 각 어플리케이션마다 LLM에 정보를 전달하는 방식이 달라 어플리케이션에 맞는 방식으로 개별 작업을 해야 했는데요, MCP는 클라이언트와 서버, 그리고 LLM 간의 인터페이스를 표준화하여 한 번의 설정만으로 여러 어플리케이션에 작업을 수행할 수 있도록 합니다. 공식 문서를 통해 MCP의 동작 구조와 개념을 자세히 이해할 수 있습니다.modelcontextprotocol.io    MCP + Cursor 연동 방법 1. Figma MCP 서버 구성Cursor에서 Figma 컴포넌트를 인식하려면 MCP 서버를 설정해야 합..

본 글은 2025.1.6에 마지막으로 수정되었습니다.  기존의 Input 공통 컴포넌트에 ComboBox를 추가해야 하는 요구사항이 생겼습니다. Input ComboBox는 Input과 매우 유사하지만 에러 상태와 에러 메시지를 받지 않는데요, 따라서 Input ComboBox에서 불필요한 코드를 줄이고 유지보수성을 높이기 위해 InputComboBox라는 컴포넌트를 따로 만들기로 결정했습니다.           Input ComboBox  사용자가 "강남"을 입력하려고 할 때, 기능적인 시나리오를 정리하면 다음과 같습니다. 값을 입력하는 경우1-1. 사용자가 input에 커서를 올린다.1-2. input에 "ㄱ"를 입력한다.1-3. 입력값이 존재하면 combobox items를 보여준다.1-4. 커서를..

본 글은 2025.1.2에 마지막으로 수정되었습니다. 시작하기에 앞서, 본 글에서 ‘가리킨다’라는 의미는 ‘바인딩된다’라고 정의하겠습니다. 또한, 모든 예제는 브라우저 환경임을 가정합니다. this함수 호출 방식에 따라 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 거나, 전역 객체를 가리키는 변수.즉, this는 자기 자신을 가리키거나, 전역 객체를 가리킵니다.// 객체 리터럴 예제// this는 getName 메서드를 호출한 객체인 introduction을 가리킵니다.const introduction = { name: 'Lee', getName() { return this.name; },};console.log(introduction.getName()); // L..

본 글은 2024.12.31에 마지막으로 수정되었습니다.  Storybook 버전 : 8.4.5Typescript 버전 : 5.6.2Vite 버전 : 5.4.10   프로젝트에서 FeedItem 컴포넌트의 스토리북을 구현하던 중 이런 에러를 마주했다.createRoot(...): Target container is not a DOM element.  preview.ts와 FeedItem 스토리북의 코드는 아래와 같았다.// .storybook/preview.tsimport React from 'react';import { MemoryRouter } from 'react-router-dom';import type { Decorator, Preview } from '@storybook/react';impor..

본 글은 2024.12.23에 마지막으로 수정되었습니다.  CI를 왜 구축하는 거야?운영 브랜치, 또는 개발 브랜치로 병합하기 전 해당 브랜치가 잘 동작하는지, 병합 시 이상은 없는지 확인하는 단계가 필요합니다. 주로 테스트, lint, 빌드가 이상 없이 완료되는지 확인을 해야 하는데요. 매번 PR을 올리고 추가 커밋을 할 때마다 이 단계를 모두 수작업으로 하기에는 번거로우니, CI라는 단계로 자동화하여 시스템을 구축할 수 있습니다.  CI 구축 시작하기"메리 트리스마스" 서비스에서 프론트엔드 CI 구축을 담당하며 어떤 전략이 필요할지 검토해 보았습니다. 먼저 저희 서비스에서는 jest를 아직 도입하지 않았기에 CI 과정에 lint, 빌드 단계가 필요했고, 추가로 Storybook 자동 배포를 추가하고자..

대상 독자자바스크립트 이벤트 루프에 대한 지식이 있는 분렉시컬 스코프와 실행 컨텍스트에 대한 지식이 있는 분호이스팅에 대한 지식이 있는 분    실행 컨텍스트 (Execution Context)Lexical Environment에 대해 알아보기에 앞서, 자바스크립트의 실행은 실행 컨텍스트(Execution Context)에 의해서 일어납니다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 즉, 코드를 실행하기 위해 필요한 정보들이 들어가 있는 공간입니다. 이 공간들을 콜 스택에 쌓아 올리면서 자바스크립트를 실행합니다. 실행 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval, 함수 등이 있습니다. 우리가 흔히 실행 컨텍스트를 구성하는 방법으로 대표적으로는 함수를 실행하는..

모던 리액트 Deep Dive를 학습하고 정리한 글입니다. 5.1 상태 관리가 필요한 이유상태 : 어떠한 의미를 지닌 값. 어플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값.상태로 분류될 수 있는 것들UI : 다크/라이트 모드, 라디오, input 등URL : 브라우저에서 관리되고 있는 상태 값form : 로딩 중인지, 제출되었는지, 접근이 불가능한지, 값이 유효한지 모두 상태로 관리됨서버에서 가져온 값 : 대표적으로 API 요청상태 관리의 역사Flux 패턴의 등장MVC 패턴은 모델과 뷰가 많아지면 복잡도 증가이렇게 MVC 패턴을 적용한 어플리케이션이 비대해지고 상태도 많아짐에 따라 상태를 추적하기 어려워 짐페이스북은 이 문제를 양방향 데이터 바인딩을 원인으로 봄컨트롤러에서 모델로는 단방향이지..

본 글은 2024.11.05에 마지막으로 수정되었습니다.    CSR와 SSR CSR와 SSR은 웹 어플리케이션을 렌더링 하는 대표적인 방법들이다. 본 글에서는 CSR와 SSR의 동작 원리와 이를 비교하며 장단점을 작성하려 한다.   CSR ( Client Side Rendering) CSR은 브라우저에서 거의 모든 작업이 이루어지는 렌더링 방식이다. React의 경우 기본 HTML에 컴포넌트를 갈아 끼우는 SPA로 동작하기 때문에, 서버로부터 처음 받아오는 html 파일은 아주 간단한 HTML 상태다.             이 기본 HTML 파일에는 태그만 있을 뿐, 서버에서 받아오는 데이터는 없는 상태다.브라우저는 HTML 파싱을 통해 파일을 위에서부터 순차적으로 읽어나가다     React    ..

프론트엔드 에러 추적 프론트엔드에서 에러를 추적하는 것은 사용자 경험을 보장하고, 프로덕트의 안정성을 높일 수 있다. QA 단계에서 다양한 시나리오로 테스트를 한다고 해도, 모든 예외 상황을 100% 커버할 수 없다. 사용자가 서비스를 이용하며 에러를 겪게 되면 서비스 동작에 불편함을 느끼고 신뢰도가 떨어져 결국 사용자 이탈로 이어질 수 있다. 따라서 실시간으로 에러를 모니터링하고 빠르게 대응할 수 있는 시스템을 갖추는 것이 중요하다. 에러 추적 도구 중 하나인 Sentry는 에러가 발생한 경로와 에러 발생 시점의 디바이스, 브라우저, 유저가 사용하는 OS 등의 정보까지 함께 제공한다. 심지어 사용자의 화면까지 녹화하여 상황을 그대로 재현할 수 있도록 도와준다. 이를 통해 문제의 원인을 파악하는 데까지 ..

React 프로젝트의 번들러로 Webpack을 사용하기 위해 공부한 내용을 정리해보았다.   1. webpack 설치npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin install 하게 되면 package.json, package-lock.json, node-modules가 생성된다 - html-webpack-plugin : Webpack의 플러그인 중 하나로, Webpack으로 번들링한 자바스크립트 파일을 자동으로 HTML 파일에 삽입해주는 역할을 한다. 이를 통해 수동으로 HTML 파일을 수정할 필요 없이, 번들링된 파일이 HTML 파일에 자동으로 포함되도록 할 수 있다. 1-1. scripts 추가// package...