말랑말랑 개발기

요즘 MCP에 대한 주목이 높아졌다는걸 체감하고 있습니다. 개발자와 스몰토크 나누면 꼭 나오는 주제이기도 하고요.이미 현업에서 업무 생산성을 높이기 위해 적용한 사례도 들려오고 있습니다.하지만 저는 아직 MCP를 어떻게 사용할 수 있을지 감이 안잡히지 않더라고요. 따라서 공식 문서와 튜토리얼을 보면서 천천히 적용해보려 합니다.Cursor AI를 IDE로 사용중인데 Cursor에서 MCP를 지원한다고 하네요. Claude Desktop을 사용한다면 간편하게 구축할 수 있어 보이는데, 저는 Cursor에서 적용해 보고 싶습니다.일단 Cursor에서 MCP를 사용하기 위해서는 0.45.x이상의 버전이 필요하니 업데이트를 꼭 해주세요. https://www.cursor.com/changelog저는 0.47.x ..

LLM과 더불어 관심도가 높은 MCP에 대해 잘 설명한 글을 발견해서 옮겨봅니다.MCP는 AI 애플리케이션을 위한 USB-C 포트 같은 것입니다.USB-C가 다양한 주변기기에 장치를 연결하는 표준화된 방법을 제공하듯, MCP는 AI 앱이 다양한 데이터 소스와 도구에 연결하는 방법을 표준화합니다. 자세히 살펴보겠습니다! 🚀핵심 구조MCP는 호스트 애플리케이션이 여러 서버에 연결할 수 있는 클라이언트-서버 아키텍처를 따릅니다.주요 구성 요소는 다음과 같습니다:호스트클라이언트서버자세히 알아보기 전에 개요를 살펴보겠습니다 👇호스트와 클라이언트:호스트: AI 앱(Claude 데스크톱, Cursor)으로 AI 상호작용을 위한 환경을 제공하고, 도구와 데이터에 접근하며, MCP 클라이언트를 실행합니다.MCP 클라..

Environment API새로운 실험적 Environment API의 일환으로 큰 내부 리팩토링이 필요했습니다. Vite 6는 대부분의 프로젝트가 새로운 메이저 버전으로 빠르게 업그레이드할 수 있도록 호환성을 깨지 않으려 노력했습니다. 생태계의 대부분이 새 API를 안정적으로 사용하기 시작할 때까지 기다릴 예정입니다. 일부 엣지 케이스가 있을 수 있지만, 이는 주로 프레임워크와 도구의 저수준 사용에만 영향을 미칠 것입니다. 릴리스 전에 생태계의 메인테이너들과 협력하여 이러한 차이점들을 완화했습니다. 문제점을 발견하시면 이슈를 열어주세요. Vite의 구현 변경으로 인해 일부 내부 API가 제거되었습니다. 이러한 API를 사용하고 계셨다면 기능 요청을 해주시기 바랍니다.Vite Runtime API실험적인..

Google Identity Services로의 마이그레이션  2023년 3월 이후, Google Sign-in platform library는 deprecated 되었으며, Google Identity Services library로 대체되었습니다. 기존에 사용하던 react-google-login 라이브러리를 삭제하고 새로운 라이브러리로 마이그레이션을 진행하였습니다. 이 글에서는 Google Identity Services를 활용한 Google 로그인 구현 방법을 설명합니다. 1. 사전 준비GCP에서 Client ID 발급Google Cloud Platform에서 Client ID를 발급받아야 합니다. 이 과정은 생략하였으며, 관련 자료는 구글링을 통해 쉽게 찾을 수 있습니다. 2. Google Lo..

Spring Boot를 사용하면서 자연스럽게 접하게 되는 HikariCP는 커넥션 풀(Connection Pool)로, 그 원리를 깊게 이해하지 못한 채 사용하곤 했습니다. 최근 웹서핑 중 HikariCP에서 발생할 수 있는 데드락 문제에 대한 글을 읽고, 이를 정리해보았습니다.1. DB Connection Pool이란?DB Connection Pool은 WAS(Web Application Server)와 DB(Database) 사이의 연결을 미리 생성하여 Pool에 보관하고, 이를 재사용하여 데이터를 교환하는 방식입니다. 이는 연결을 매번 새로 생성하는 대신, 미리 생성된 연결을 재사용함으로써 성능을 향상시킵니다. 2. Connection Pool의 필요성WAS와 DB의 연결은 비용이 많이 드는 작업입..

리액트에서 화면 캡쳐하기제가 받은 요구 사항은 아래와 같습니다. 1. 화면에 랜더링된 부분을 캡쳐하여 이미지로 저장2. 해당 화면에 접속하지 않아도 이미지 저장하는 기능 위 개발을 진행하면서 화면 캡쳐 시 발생할 수 있는 오류 상황과 해결방안을 알아보겠습니다. 1. html2canvas랜더링 된 화면을 캡쳐하고자 할 때 가장 간단하게 사용할 수 있습니다.import { saveAs } from 'file-saver';import html2canvas from 'html2canvas';const downloadImage = async () => { const modalElement = document.getElementById('your-element-id'); if (modalElement) ..

작업을 열심히 하고 merge했는데 ci 에서 아래와 같은 오류가 발생했다.npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR! npm ERR! While resolving: @tanstack/react-query@5.8.7npm ERR! Found: react@17.0.2npm ERR! node_modules/reactnpm ERR! react@"^17.0.2" from the root projectnpm ERR! peer react@"^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" from @react-aria/ssr@3.9.0npm ERR! node_modules/@react-aria/ssrnpm ERR! ..

1. vite-plugin-svgr 다운pnpm add -D vite-plugin-svgr 2. 설정 추가vite.config.tsplugins에 svgr() 추가import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import svgr from 'vite-plugin-svgr' // https://vitejs.dev/config/export default defineConfig({ plugins: [ react(), svgr({ svgrOptions: { // svgr options }, }), ], })  2-1. vite-plugin-svgr ^4.0.0vite-en..

이번에는 React로 개발한 프론트 페이지를 AWS S3, CloudFront, Route53를 이용하여 정적 호스팅해보겠습니다! 가장 먼저 해야할 일은 S3를 통하여 홈페이지를 배포하는 것입니다.AWS console에 접속하여 S3를 찾은 후 Create bucket을 합니다.bucket list에서 생성한 bucket을 찾아 클릭. 그러면 아래와 같은 페이지를 볼 수 있습니다.Object 탭에 빌드한 파일을 업로드합니다. (예시: pnpm build한 결과인 dist 폴더 내 파일 전부)이 페이지에서 바로 업로드 할 수도 있고 aws cli를 이용할 수도 있습니다! 이렇게 index.html이 포함된 빌드 파일을 올려주세요!   1. S3 에서 static hosting2. CloudFront (선택..

React 에서 쿠키를 사용할때 react-cookie 라이브러리를 사용합니다. 물론 필요한 곳에서 라이브러리를 불러다 사용할 수도 있지만, 유지보수를 쉽게 하기 위해서 하나의 파일에서 관리하는 편이 좋습니다. 이렇게 하나의 파일에서 관리하면, 쿠키 키를 한눈에 볼 수 있고 관련 코드를 찾기도 쉬워 응집도를 높힐 수 있습니다. import { Cookies } from 'react-cookie';const cookies = new Cookies();export const COOKIE_KEY = 'customKey';export const setCookie = (name: string, value: string, options?: any) => { return cookies.set(name, value,..