전체 글420 [ Tech ] 터미널 속의 AI 비서, Claude Code를 위한 MCP 설정 가이드 최근 개발자들 사이에서 화제가 되고 있는 Claude Code를 사용해 보셨나요? 터미널 환경에서 코드를 분석하고 수정까지 해주는 놀라운 도구인데요. 하지만 Claude Code의 진정한 강력함은 단순히 코드 편집에 있지 않습니다.바로 MCP(Model Context Protocol)를 통해 외부 데이터나 도구와 연결될 때 그 진가가 발휘되죠. 오늘은 Claude Code에 MCP 서버를 설정하여, 데이터베이스를 조회하거나 외부 API를 연동하는 등 AI의 작업 범위를 무한히 확장하는 방법을 정리해 보겠습니다. 1. MCP란 무엇인가?MCP(Model Context Protocol)는 LLM(대형 언어 모델)이 로컬 데이터 소스나 외부 서비스에 안전하게 접근할 수 있도록 설계된 오픈 표준 프로토콜입니다... 2026. 3. 9. [ 백엔드 ] Strapi 란? 생산성을 극대화하는 Strapi의 장단점 Strapi란?Strapi는 Node.js를 기반으로 하는 오픈소스 **Headless CMS(Content Management System)**입니다.일반적인 CMS(WordPress 등)가 관리자 화면과 사용자에게 보여지는 화면(프론트엔드)이 결합된 형태라면, Headless CMS인 Strapi는 '머리(Front-end)'가 없고 '몸통(Back-end)'만 있는 구조입니다. 즉, 관리자 페이지를 통해 데이터를 관리하고, 그 데이터를 REST API나 GraphQL 형태로 제공하는 역할에 집중합니다.개발자는 Strapi가 제공하는 API를 호출하여 React, Vue, Next.js 등 원하는 프론트엔드 프레임워크에서 자유롭게 화면을 구성할 수 있습니다. Strapi의 주요 특징Strapi가 현대.. 2026. 3. 6. [ UI Library ] Ant Design을 넘어 Shadcn/ui로: 2026년 프론트엔드 디자인 시스템의 진화 지난 포스팅에서 많은 개발자의 사랑을 받는 UI 라이브러리인 Ant Design의 강력함에 대해 알아보았습니다. Ant Design은 그 자체로 완벽한 디자인 시스템을 제공하며, 특히 기업용 대규모 관리자 페이지를 만들 때 "치트키"와 같은 존재였죠.하지만 2026년 현재, 프론트엔드 생태계에는 새로운 바람이 불고 있습니다. 단순히 완성된 컴포넌트를 가져다 쓰는 것을 넘어, **"스타일은 내가 정의하되, 기능과 접근성만 빌려 쓰겠다"**는 이른바 Headless UI와 Shadcn/ui 방식이 대세로 자리 잡았습니다.오늘은 Ant Design의 견고함과 Shadcn/ui의 유연함을 비교하며, 우리가 어떤 도구를 선택해야 할지 깊이 있게 다뤄보겠습니다! 1. 다시 보는 Ant Design먼저 우리가 Ant.. 2026. 3. 3. [ 웹 기능 구현 ] 내 프로젝트에 딱 맞는 '프레임워크 & 스타일 & 아이콘' 조합 찾기 🎨 프레임워크 & 디자인 툴, 뭘 써야 할까? (초보자 결정 가이드)개발 공부 시작할 때 가장 머리 아픈 게 바로 "도구 선택".유행하는 거 무작정 따라 하지 말고, 내 목적에 맞는 최강 조합을 골라보세요! 1. 프레임워크 (Framework): 어떤 엔진을 달까?구분이름특징추천 상황대세 중의 대세React커뮤니티가 가장 큼, 취업 시장 압도적 1위취업이 목표라면 무조건러닝커브 낮음Vue.js코드가 직관적이고 배우기 매우 쉬움빠르게 결과물을 내고 싶을 때풀스택 끝판왕Next.js검색 노출(SEO) 최적화, 최신 트렌드실제 서비스/블로그 만들 때 2. 스타일 라이브러리 (CSS): 옷은 어떻게 입힐까?Tailwind CSS (강력 추천 🔥)Styled-ComponentsSCSS 3. 아이콘 & UI 소.. 2026. 2. 26. [ React ] react-calendar 커스터마이즈 하기 react-calendar 설치https://www.npmjs.com/package/react-calendarnpm i react-calendar SmallCalendar.jsreact-calendar를 가져온다.import Calendar from "react-calendar"export const SmallCalendar = () => { return ( )} CalendarPage.jsCalendarPage안에 달력외 메뉴들을 구성할 예정이다.import { SmallCalendar } from "../components/SmallCalendar"export const CalendarPage = () => { return ( .. 2025. 6. 30. [ 언리얼엔진 ] Cesium for Unreal 빠른 시작 가이드 안녕하세요! 오늘은 Cesium for Unreal을 사용해서 실제 지형과 건물 데이터를 활용한 3D 애플리케이션을 만드는 방법을 소개해드리려고 합니다. 이 가이드에서는 Cesium World Terrain과 Cesium OSM Buildings를 사용해서 멋진 3D 세계를 구축하는 과정을 단계별로 알아보겠습니다. 시작하기 전에이 가이드는 Unreal Engine 5.1을 기준으로 작성되었지만, 최신 버전의 언리얼 엔진을 사용하셔도 단계는 동일합니다. 다만 UI가 조금 다를 수 있어요.단계별 과정을 건너뛰고 Cesium for Unreal의 능력을 바로 확인하고 싶으시다면, Cesium for Unreal Samples 프로젝트를 다운로드해 보세요! 이 가이드에서 배울 내용이 튜토리얼을 통해 다음과 같은.. 2025. 5. 23. [ 언리얼엔진 ] LudusAI: 게임 개발의 혁신, 설치부터 시작까지 완벽 가이드 Ludus AI - Unreal Engine AI toolkit Ludus AI - Unreal Engine AI toolkitProfessional AI tools for Unreal Engine 5: C++ assistance, Blueprints copilot, scene generation, and AI Unreal expert. Try Ludus Unreal AI plugin today!ludusengine.com 게임 개발에 있어 가장 큰 진입 장벽 중 하나는 복잡한 엔진 구조와 코드 작성입니다. 그러나 최근 주목받는 차세대 게임 개발 도구인 LudusAI는 이 문제를 혁신적으로 해결하고 있습니다. 특히 Ludus Engine 기반의 LudusAI는 AI로 게임을 설계하고 구현하는 도구로, .. 2025. 5. 22. [ React ] 웹사이트 성능을 점검하는 필수 도구 Lighthouse 웹 페이지를 만들고 나면, "이 사이트 잘 만들 걸까?, "사용자들이 사용하는데 느리진 않은가?"라는 의문들이 들 수 있다.이때 Lighthouse를 통해 성능 체크가 가능하다. Lighthouse란?Lighthouse는 웹 애플리케이션의 성능, 접근성, SEO, PWA(Progressive Web App)등을 자동으로 분석해 주는 Google에서 제공하는 성능 진단 도구이다. Lighthouse를 사용하는 이유?웹페이지의 아래와 같은 항목들을 자동으로 분석해 점수와 개선 방법을 알려준다:Performance (성능)Accessibility (접근성)Best Practices (웹 표준)SEO (검색엔진 최적화)PWA (Progressive Web App 지원 여부)Lighthouse는 웹사이트의 품.. 2025. 4. 24. [ Ant Design ] React + Ant Design + React Router Dom으로 사이드 메뉴 라우팅 구현하기 이 글에서는 React 프로젝트를 처음부터 셋업 하고,Ant Design의 메뉴 컴포넌트를 활용해 사이드바 라우팅 UI를 구현하는 과정을 단계별로 정리해 보겠습니다. 1. React 프로젝트 생성원하는 위치에 React 파일을 생성합니다.npx create-react-app 프로젝트이름cd 프로젝트이름 2. Ant desgin 설치Ant design의 메뉴를 사용하기 위해서 아래의 명령어로 Ant design을 설치합니다.npm install antd# 또는yarn add antd 3. React Router 설치페이지 이동 기능을 구현하기 위해 React Router를 설치합니다.npm install react-router-dom# 또는yarn add react-router-dom 4. 파일 구조.. 2025. 4. 18. 이전 1 2 3 4 ··· 47 다음 728x90
