티스토리

말랑말랑 개발기

검색하기

블로그 홈

말랑말랑 개발기

blog.gyulrangdev.org/m

Github: https://github.com/gyulrangdev

구독자: 1

방명록 방문하기

주요 글 목록

Cursor MCP 공식문서 읽어보기 요즘 MCP에 대한 주목이 높아졌다는걸 체감하고 있습니다. 개발자와 스몰토크 나누면 꼭 나오는 주제이기도 하고요.이미 현업에서 업무 생산성을 높이기 위해 적용한 사례도 들려오고 있습니다.하지만 저는 아직 MCP를 어떻게 사용할 수 있을지 감이 안잡히지 않더라고요. 따라서 공식 문서와 튜토리얼을 보면서 천천히 적용해보려 합니다.Cursor AI를 IDE로 사용중인데 Cursor에서 MCP를 지원한다고 하네요. Claude Desktop을 사용한다면 간편하게 구축할 수 있어 보이는데, 저는 Cursor에서 적용해 보고 싶습니다.일단 Cursor에서 MCP를 사용하기 위해서는 0.45.x이상의 버전이 필요하니 업데이트를 꼭 해주세요. https://www.cursor.com/changelog저는 0.47.x .. 공감수 1 댓글수 0 2025. 3. 23.
[번역] Model Context Protocol (MCP) LLM과 더불어 관심도가 높은 MCP에 대해 잘 설명한 글을 발견해서 옮겨봅니다.MCP는 AI 애플리케이션을 위한 USB-C 포트 같은 것입니다.USB-C가 다양한 주변기기에 장치를 연결하는 표준화된 방법을 제공하듯, MCP는 AI 앱이 다양한 데이터 소스와 도구에 연결하는 방법을 표준화합니다. 자세히 살펴보겠습니다! 🚀핵심 구조MCP는 호스트 애플리케이션이 여러 서버에 연결할 수 있는 클라이언트-서버 아키텍처를 따릅니다.주요 구성 요소는 다음과 같습니다:호스트클라이언트서버자세히 알아보기 전에 개요를 살펴보겠습니다 👇호스트와 클라이언트:호스트: AI 앱(Claude 데스크톱, Cursor)으로 AI 상호작용을 위한 환경을 제공하고, 도구와 데이터에 접근하며, MCP 클라이언트를 실행합니다.MCP 클라.. 공감수 3 댓글수 0 2025. 3. 16.
[번역+추가내용] Vite v5에서 v6로 마이그레이션 하기 Environment API새로운 실험적 Environment API의 일환으로 큰 내부 리팩토링이 필요했습니다. Vite 6는 대부분의 프로젝트가 새로운 메이저 버전으로 빠르게 업그레이드할 수 있도록 호환성을 깨지 않으려 노력했습니다. 생태계의 대부분이 새 API를 안정적으로 사용하기 시작할 때까지 기다릴 예정입니다. 일부 엣지 케이스가 있을 수 있지만, 이는 주로 프레임워크와 도구의 저수준 사용에만 영향을 미칠 것입니다. 릴리스 전에 생태계의 메인테이너들과 협력하여 이러한 차이점들을 완화했습니다. 문제점을 발견하시면 이슈를 열어주세요. Vite의 구현 변경으로 인해 일부 내부 API가 제거되었습니다. 이러한 API를 사용하고 계셨다면 기능 요청을 해주시기 바랍니다.Vite Runtime API실험적인.. 공감수 0 댓글수 0 2025. 3. 4.
[React, Typescript] 구글 로그인 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.. 공감수 6 댓글수 0 2024. 10. 6.
HikariCP와 DB Connection Pool의 이해 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의 연결은 비용이 많이 드는 작업입.. 공감수 0 댓글수 0 2024. 10. 4.
[React] 인프라 설정으로 CORS 이슈 피하고 화면 캡쳐하기 (html2canvas, puppeteer, AWS S3) 리액트에서 화면 캡쳐하기제가 받은 요구 사항은 아래와 같습니다. 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) .. 공감수 0 댓글수 0 2024. 5. 26.
[NPM] 협업에 꼭 필요한 Conflicting peer dependency 해결하기 (--legacy-peer-deps, --force, node 버전 맞추기) 작업을 열심히 하고 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! .. 공감수 0 댓글수 0 2023. 12. 5.
[React, vite] Vite에서 svg파일 초기 설정하기 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.. 공감수 0 댓글수 0 2023. 11. 9.
[AWS] 간단한 사이트라면 S3로 정적 배포하기 (static web hosting, S3+CloudFront+Route53) 이번에는 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 (선택.. 공감수 0 댓글수 0 2023. 10. 31.
[React] 브라우저 쿠키를 하나의 파일에서 관리하기 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,.. 공감수 0 댓글수 0 2023. 9. 25.
[VsCode] 원격으로 페어 프로그래밍을 해보자 (Live share) 재택 중에 동료와 페어 프로그래밍을 해보기로 했습니다.동료분께서 진행 중인 웹 프로젝트에 참여하게 되어 간단한 버그 수정과 기능 추가를 하기로 했고 태스크 볼륨은 크지 않았지만 일단 제가 전체적인 코드를 잘 모르기 때문에 그때그때 옆에서 물어보면서 빠르게 적응할 수 있었습니다. 프로젝트 구조를 설명하자 다음과 같습니다. Project(root)⌞ server⌞ client 최상위 폴더 밑에 서버(Node)와 클라이언트(React)가 있었고 각각을 로컬에서 실행하여, 페어 프로그래밍으로 수정한 코드의 실행 화면을 서로의 컴퓨터에서 볼 수 있게 하고 싶었습니다.VsCode의 Live Share라는 익스텐션을 사용했고 여러 가지 세팅 과정에서 시행착오가 있었기에 팁을 작성해 봅니다. 제 생각엔 메인으로 진행하.. 공감수 0 댓글수 0 2023. 9. 10.
[React] 스크롤 높이에 반응하는 이벤트 붙이기 홈페이지 우측 하단에 고정되어 따라다니는 플로팅 버튼을 만들었습니다. 그런데 이 플로팅 버튼으로인해 홈페이지 최하단 푸터의 일부 정보가 보이지 않는 현상이 있었습니다. 이를 방지하고자 스크롤을 일정 이상 내렸을 경우 플로팅 버튼이 사라지는 효과를 넣었습니다. 부드럽게 보이기 위해 페이드인, 페이드아웃 애니메이션도 추가해주었습니다. body의 전체 스크롤 높이를 이용하여 EventListener를 붙이는 간단한 방법입니다. export const FloatingButton = () => { const [isVisible, setVisible] = useState(true); useEffect(() => { const handleScroll = (e: Event) => { if (window.scrollY .. 공감수 0 댓글수 0 2023. 8. 24.
[Vite+Typescript+Eslint] 절대경로 설정 vite에서 절대경로를 설정해 주기 위해서는 vite.config.ts와 tsconfig.json에 alias를 설정해줘야 합니다. 이것이 귀찮다면 vite-tsconfig-paths 플러그인을 사용합니다. (관련 링크) 이번 글에서는 플러그인을 사용하지 않고 manual 하게 설정해 보겠습니다. 자주 사용하는 src, atoms, hooks, components, pages, types 폴더에 대해서 설정해 보겠습니다. vite.config.ts import path from 'path'; import { defineConfig } from 'vite'; import eslint from 'vite-plugin-eslint'; import react from '@vitejs/plugin-react-sw.. 공감수 0 댓글수 0 2023. 8. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.