[AI] MCP — Function Calling/Production Hardening 2026. 09. 15MCP 스터디 — Function Calling부터 Production Hardening까지#MCP #FunctionCalling #FastMCP #OAuth #AgentAI어제에 이어 오늘은 MCP를 실제로 다루는 쪽으로 한 단계 더 들어갔다. Function calling과 MCP 래핑부터 시작해서, Host·Client·Server가 실제로 어떤 메시지를 주고받는지, 그리고 마지막엔 보안과 운영 안정화까지 하루 만에 꽤 넓은 범위를 훑었다.1. Enterprise AI로 가는 방향 — Agent의 목표는 자동화AI가 발전해온 흐름을 정리하면 대략 이렇다.chatbot → copilot → AI agent → connected enterprise AI챗봇은 질문에 답하는 수준이고.. [Python] venv vs conda — 같은 가상환경, 다른 관리 방식 2026. 09. 15venv vs conda — 같은 가상환경, 다른 관리 방식#Python #venv #conda #가상환경파이썬으로 작업하다 보면 가상환경을 만드는 방법이 하나가 아니라는 걸 알게 됩니다. 가장 먼저 만나는 건 파이썬에 내장된 venv고, 데이터 관련 작업을 시작하면 conda도 자연스럽게 등장합니다. 둘 다 '가상환경'이라는 같은 목적을 갖고 있지만, 실제로 무엇을 격리하고 어디에 저장하는지는 상당히 다릅니다.📋 한눈에 비교구분.venvconda만드는 방법python3 -m venv .venvconda create -n [이름]Python 인터프리터시스템에 설치된 것을 재사용conda가 별도로 설치·관리패키지 관리pip만 사용pip + conda install저장 위치프로젝트 폴.. [AI] MCP, Agent, Tool 2026. 09. 14MCP 스터디 — Agent와 Tool, 그리고 LLM이 답을 만드는 원리#MCP #Agent #LangChain #FunctionCalling #LLM오늘은 MCP 실습에 앞서 Agent가 무엇인지, Tool은 어떻게 만드는지, 그리고 그 아래에서 LLM이 실제로 어떻게 텍스트를 생성하는지까지 개념을 잡았다. 다음 시간에는 본격적으로 MCP를 직접 만드는 법을 배울 예정이다. 핵심 아이디어는 이미 있는 기능을 MCP로 래핑(wrapping)해서 표준화된 형태로 붙여 쓰는 것.1. Agent — 나를 대신해 일해주는 존재Agent는 한마디로 나를 대신해 작업을 수행해주는 주체다. 단순히 답만 뱉는 게 아니라, 상황을 보고 무엇을 할지 스스로 판단하고 그것을 실행한다.Agent = 의.. [React] useQuery — 서버 상태를 다루는 법 서버에서 가져온 데이터는 컴포넌트 안에서 다루는 값과 성격이 다릅니다. 로딩 중인지, 에러가 났는지, 캐시된 값을 그대로 써도 되는지, 언제 다시 가져와야 하는지까지 신경 쓸 게 많습니다. 이 문제를 매번 useState와 useEffect로 직접 짜다 보면 컴포넌트마다 비슷한 코드가 반복됩니다. TanStack Query(구 React Query)의 useQuery는 이 반복을 없애기 위한 훅입니다.🔄 01. 직접 구현하면 반복되는 것들function TodoList() { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(.. [React] 아키텍처 추상화 기능이 늘어날수록 컴포넌트 하나가 떠안는 역할도 늘어납니다. 상태 관리, 유효성 검사, API 호출, 렌더링이 한곳에 몰리기 시작하면 이후에 하나만 바꾸려 해도 전체를 다시 읽어야 하는 상황이 옵니다. 이럴 때 필요한 게 관심사 분리와 추상화입니다.🧱 01. 복잡함이 쌓이는 방식// 흔히 시작되는 모습function UserForm() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [errors, setErrors] = useState({}); const [loading, setLoading] = useState(false); const handleSubmit = async () => {.. [React] 리렌더링 최적화 리액트 애플리케이션이 느려졌다는 이야기는 대부분 '너무 자주, 너무 많이 리렌더링되고 있다'는 뜻입니다. 브라우저 렌더링 성능을 이야기할 때 리액트 레벨에서 먼저 들여다볼 수 있는 부분이 바로 이 리렌더링입니다.🎯 01. 리액트는 언제 다시 그리는가state가 바뀌거나 props가 바뀌면 리렌더링이 일어납니다. 그런데 여기서 자주 놓치는 부분이 하나 있는데, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 props가 그대로여도 기본적으로 같이 리렌더링된다는 점입니다. 🎯 02. React.memo — 컴포넌트 단위로 막기const ListItem = React.memo(function ListItem({ item }) { return {item.name};});props를 얕은 비교(shallow c.. [React] webworker 메인스레드 JavaScript는 기본적으로 싱글 스레드로 동작합니다. 무거운 연산이 실행되는 동안에는 화면도, 클릭 이벤트도 전부 멈춥니다. 이 문제를 다루는 방법 중 하나가 Web Worker입니다.⚙️ 01. 왜 화면이 멈추는가리스트를 몇 만 건 정렬하거나, 큰 JSON을 파싱하거나, 복잡한 계산을 반복하는 코드를 메인 스레드에서 실행하면, 그 연산이 끝날 때까지 브라우저는 렌더링도 사용자 입력 처리도 할 수 없습니다. 사용자 입장에서는 그냥 '멈춘 화면'입니다. ⚙️ 02. Web Worker란Web Worker는 메인 스레드와 별개의 백그라운드 스레드에서 JavaScript를 실행할 수 있게 해주는 브라우저 API입니다. 무거운 연산을 워커로 넘기면, 메인 스레드는 그동안에도 렌더링과 인터랙션을 계속 처리할.. [React] 웹소켓 실시간 데이터 실시간 시세, 채팅, 알림처럼 서버가 클라이언트에 먼저 데이터를 보내야 하는 상황이 있습니다. HTTP 요청-응답 구조로는 이런 흐름을 자연스럽게 표현하기 어렵습니다. 매번 클라이언트가 먼저 물어봐야(polling) 하니까요. 이럴 때 쓰는 게 WebSocket입니다.📡 01. HTTP와 무엇이 다른가HTTP는 요청 하나에 응답 하나, 그리고 연결이 끝납니다. 실시간성이 필요하면 짧은 주기로 계속 요청을 보내는 폴링으로 흉내 내야 하는데, 데이터가 없어도 계속 요청이 나가니 비효율적입니다.WebSocket은 처음 한 번 핸드셰이크(handshake)로 연결을 맺고 나면, 그 연결을 계속 열어둔 채로 서버와 클라이언트가 서로 원할 때 데이터를 보낼 수 있습니다. 서버가 먼저 보내는 것(push)도 가능해.. [GPU] NVIDIA MIG(Multi-Instance GPU)의 구조적 이해: Profile과 Config 01. MIG(Multi-Instance GPU)란?하나의 물리적 GPU를 최대 7개의 독립적인 GPU 인스턴스로 분할하여 사용할 수 있게 하는 기술입니다.기존의 시간 분할(Time-slicing) 방식이나 소프트웨어적인 가상화와 달리, MIG는 하드웨어 레벨에서 격리(Isolation)를 제공합니다. 즉, 분할된 각 인스턴스는 고유한 메모리, 캐시, Compute Core를 할당받습니다. 이로 인해 하나의 인스턴스에서 부하가 발생하더라도 다른 인스턴스의 성능에 영향을 주지 않는 것이 특징입니다. 02. 핵심 구성 요소MIG를 구성할 때 가장 혼동하기 쉬운 두 가지 개념이 Instance Profile과 GPU Config(Placement)인데,이를 '조각'과 '조합'의 관점에서 이해하면 명확합니다. .. [CSS] SCSS 문법 01. 중첩 (Nesting)HTML 구조처럼 CSS를 겹쳐서 작성할 수 있음/* SCSS */.navbar { width: 100%; padding: 1rem; ul { list-style: none; } li { display: inline-block; }} 02. 상위 선택자 참조 (&)중첩 안에서 부모 선택자를 지칭할 때 사용주로 가상 클래스(:hover)나 클래스 결합할 때 씀/* SCSS */.button { background: blue; /* .button:hover 와 동일 */ &:hover { background: darkblue; } /* .button.active 와 동일 */ &.active { background: red; }} 03.. [JS] 얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)객체를 복사할 때 최상위 속성만 복사하고, 그 안에 또 다른 객체나 배열이 있으면 그 주소값만 복사'바로가기 아이콘'을 복사하는 것과 같다고 할 수 있습니다.아이콘을 복사해서 바탕화면에 두 개가 생겼지만, 두 아이콘 모두 결국 똑같은 원본 프로그램을 가리킵니다.하나를 통해 원본을 바꾸면 다른 바로가기에도 영향이 갑니다. 예시 코드 👀const original = { name: "peazh", age: 20, address: { city: "서울" }};// 스프레드 문법을 사용한 얕은 복사const shallowCopy = { ...original };// case 1.// 복사본의 최상위 속성 변경shallowCopy.name = 'pp';// 원본 객체.. [HTTP] HTTP 상태 코드 HTTP 상태 코드는 클라이언트(브라우저)가 서버에 무언가를 요청했을 때, 서버가 그 요청을 어떻게 처리했는지 알려주는 세 자리 숫자로 된 결과 이 코드를 통해 요청이 성공했는지, 실패했다면 왜 실패했는지(예: 페이지가 없어서, 권한이 없어서, 서버에 문제가 생겨서 등)를 알 수 있습니다. 상태 코드는 크게 5개의 그룹으로 나뉩니다.1xx: 정보 (Informational)요청을 받았으며, 처리 중이라는 의미 (거의 사용되지 않음)2xx: 성공 (Success)요청이 성공적으로 접수되고, 처리되었다는 의미200 OK : 요청이 성공적으로 처리202 Accepted : 요청을 받았지만 처리가 완료되지 않은 상태201 Created : 요청이 성공하여 새로운 리소스가 생성204 No Content : 요청은.. 이전 1 2 3 4 ··· 15 다음
