지식 창고

VSCode와 MCP (Model Context Provider) 연동하기

Visual Studio Code(VSCode)는 최근 Model Context Protocol(MCP) 지원을 도입하여 개발자들에게 더욱 향상된 코딩 경험을 제공하고 있습니다. 이 문서에서는 MCP의 도입 소식, MCP 연동의 이점, 그리고 VSCode와 MCP를 연동하는 방법을 단계별로 상세히 설명하겠습니다.1. VSCode MCP 추가 소식2025년 4월, VSCode는 GitHub Copilot의 에이전트 모드와 함께 MCP 지원을 도입하였습니다. 이로써 개발자들은 MCP 호환 서버를 VSCode에 통합하여 외부 도구 및 서비스와의 상호작용을 표준화할 수 있게 되었습니다. 이를 통해 코드 작성, 디버깅, 테스트 등의 작업을 보다 효율적으로 수행할 수 있습니다.  2. VSCode에 MCP를 연동하..

AI MCP: Model Context Provider란 무엇일까요?

안녕하세요, 여러분! 오늘은 인공지능(AI) 분야에서 최근 주목받고 있는 ‘MCP’에 대해 알아보겠습니다. ‘MCP’는 ‘Model Context Protocol’의 약자로, AI 모델이 외부 도구나 데이터와 쉽게 연결될 수 있도록 돕는 새로운 표준입니다.1. MCP란 무엇일까요?여러분이 컴퓨터에 프린터나 마우스를 연결할 때, USB 포트를 사용하는 것처럼, MCP는 AI 모델이 다양한 도구나 데이터에 연결될 수 있도록 돕는 ‘표준화된 연결 방식’입니다. 예를 들어, 우리가 스마트폰에 이어폰을 꽂을 때, 규격이 맞지 않으면 사용할 수 없죠? MCP는 이러한 문제를 해결하기 위해 AI와 외부 도구 사이에 공통된 ‘언어’를 만들어주는 역할을 합니다.2. 왜 MCP가 필요할까요?AI 모델은 많은 정보를 학습하..

Firebase Studio

최근 Google은 개발자들이 AI 애플리케이션을 보다 쉽고 빠르게 개발할 수 있도록 지원하는 Firebase Studio를 선보였습니다. 이 블로그 글에서는 Firebase Studio의 정의, 주요 장점, 사용 방법에 대해 자세히 알아보겠습니다.Firebase Studio란 무엇인가요?Firebase Studio는 Google이 제공하는 클라우드 기반의 통합 개발 환경으로, 브라우저에서 직접 애플리케이션을 프로토타입, 개발, 테스트, 배포할 수 있는 플랫폼입니다. 특히, Google의 AI 모델인 Gemini를 활용하여 자연어 입력만으로도 애플리케이션을 생성할 수 있는 기능을 제공합니다.Firebase Studio의 장점다양한 언어 및 프레임워크 지원: Firebase Studio는 Go, Java,..

TanStack Query의 isFetching vs isLoading 차이점TanStack Query(구 React Query)는 비동기 데이터 관리를 강력하게 도와주는 라이브러리입니다. 데이터를 가져올 때 isLoading과 isFetching이라는 두 가지 상태를 제공하는데, 이 둘의 차이를 이해하는 것이 중요합니다.1. isLoading이란?isLoading은 데이터를 처음 로드할 때(initial loading) true가 됩니다. 즉, 쿼리가 처음 실행되면서 아직 캐시에 데이터가 없는 경우를 의미합니다.예제 코드isLoading이 true가 되는 경우쿼리가 처음 실행될 때캐시에 해당 데이터가 없는 경우isLoading이 false가 되는 경우데이터가 성공적으로 로드된 후에러가 발생한 경우2. ..

요소의 높이를 100%로 늘리는 애니메이션을 만들려면 다음과 같은 단계를 따르면 됩니다:1. 요소에 대한 CSS 속성을 설정합니다. 이때 요소는 상위 요소(부모 요소)의 크기를 기준으로 높이를 조정합니다..parent { height: 400px; /* 부모 요소의 높이 */}.child { height: 0; /* 자식 요소의 초기 높이 */ transition: height 0.5s ease-in-out; /* 높이가 바뀔 때 애니메이션 속성 */}2. 자식 요소의 높이를 100%로 늘리는 애니메이션을 작성합니다. 이때 자식 요소의 높이를 100%로 설정하면 부모 요소의 높이와 동일하게 됩니다..child.active { height: 100%; /* 자식 요소의 높이를 100%로 설정 */}..

최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가 있다고 평가하면서, 앞으로는 React Fast Refresh로 대체될 것이라 생각한다고 의견을 밝혔다. 기존의 핫 로더는, 대규모 앱에서 코드변경, export/import 문제, Typescript관련 문제 등 앱이 매우 느리게 동작하는 것이 문제였다. 그 대안으로 나온게 Fast Refresh이며, 2019년 React Native 0.61에 처음 도입 되었다. 그렇다면 React Fast Refresh가 하는 일은 무엇인가? 앱 전체를 다시 ..

전개 구문(Spread Syntax)와 Rest Parameter를 딱히 구분해서 공부하진 않았는데, 확실하게 기억해 두지 않으니 사용할때마다 헷갈린다. 이번 기회에 확실하게 정리해 두도록 하자. Spread Syntax 전개 구문은 반복 가능한 배열, 문자열 또는 이터러블에 대해서 사용이 가능하다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6 위 예제와 같이 함수의 파라미터로 넘길 때 "..."를 사용하여 넘기면 내부적으로 풀어서 인자를 전달 해준다. const numbers = [1, 2, 3]; const num = [...numbers, 'four', '..

TC-39 Github에 패턴 매칭(Parttern-Matching)이 Stage 0에서 1로 한단계 등급이 상향됬었다. Stage1은 proposal 단계로 앞으로 TC-39 위원회에서 논의할 예정이며, 구체적인 데모에 대한 코드도 포함되어야 한다. 아직 Stage2(draft)와 Stage3(candidate), 그리고 stage4(finished)를 거쳐 정식으로 스펙에 추가되려면 갈 길이 멀지만 어떤 기능을 가지고 있고 또 어떻게 사용할 수 있는지 간단하게나마 미리 알아보도록 하자. 패턴 매칭은 Scala, F#, Rust 등 다른 언어에도 있는 기능인데, 앞서 언급한 언어에 대해서는 잘 모르지만, 비교적 단순하므로 다른 언어를 통해 알아보도록 하자. Scala object MatchTest1 e..

날짜 기능을 개발하다보면 현재 해당하는 월(Month)에 몇일까지 있는지를 알아야할 필요가 있다. 다음 코드를 사용하면 해당하는 연도의 월에 몇일까지 있는지 계산할수 있다. function getDayOfMonth(year, month) { return 32 - new Date(year, month-1, 32).getDate(); }

Chrome autoplay가mute속성과 함께라면 항상 자동재생가능 Sound가 있을 때는 다음의 경우에만 허용된다 유저의 Interaction(click, tap)이 있을 경우 MEI(Media Engagement Index)지수가 특정 기준보다 높을경우 MEI: 간단히 말하면, 유저의 브라우저의 기록되는 점수로서 특정 사이트에서 유저가 얼마나 많이 영상을 소리와 함께 봤는지에 대한 지표 지표에 적용되려면 소리를 틀고 7초이상 재생 Audio버튼 나타나야 함 200x140보다 비디오 사이즈가 커야함 브라우저에서 MEI 보는 방법Chrome://media-engagement접속 유저가 모바일에서 홈화면에 바로가기를 추가했거나, 데스크탑에서 PWA로 설치한 경우 Browser history가 없는 경우 ..