[Claude 2026-10-20] Claude Code Git Workflow 자동화 - Commit Message, PR Description, Merge Conflict 해결, Git Hook
개발하면서 의외로 시간을 많이 쓰는 일이 Git 관련 "글쓰기"입니다. 커밋 메시지를 고민하고, PR 설명을 정리하고, 머지 충돌이 나면 양쪽 코드를 비교하며 손으로 고칩니다. 이런 작업은 변경 내용(diff)만 정확히 보여주면 Claude Code가 아주 잘하는 분야입니다. 이번 글에서는 Claude Code로 커밋 메시지 생성, 의미 단위로 나눠 커밋하기, PR 설명 작성, 머지 충돌 해결, 그리고 Git Hook에 연결해 커밋할 때 자동으로 메시지를 채우는 방법까지 실제 저장소에서 실행한 결과와 함께 정리합니다. ※ 실습 환경: Windows 11 + Git Bash, Git 2.49, Claude Code 2.1.304, 모델은 haiku. 모든 캡쳐는 실제 실행 결과입니다. 1. 실습용 저장소 ..
[Claude 2026-10-20] Claude Agent SDK (Python) 시작하기 - query(), ClaudeSDKClient, Custom Tool, Permission, Hooks
Claude Code를 터미널에서만 쓰는 것이 아니라, 내 파이썬 프로그램 안에서 "에이전트 엔진"으로 쓰고 싶을 때 사용하는 것이 Claude Agent SDK입니다. Claude Code가 내부적으로 쓰는 에이전트 루프(도구 호출 → 결과 확인 → 다음 행동)를 그대로 라이브러리로 제공하기 때문에, 파일 읽기·명령 실행·웹 검색 같은 내장 도구는 물론 내가 직접 만든 파이썬 함수도 도구로 붙일 수 있습니다. 이번 글에서는 설치부터 단발성 질의(query), 멀티턴 대화(ClaudeSDKClient), 커스텀 도구, 권한 콜백(can_use_tool), Hooks, 구조화된 출력까지 실제 실행 결과와 함께 단계별로 정리합니다. ※ 실습 환경: Windows 11 + Git Bash, Python 3.1..
[Claude 2026-10-20] Claude Code Unix Pipe 활용 - stdin으로 Log, git diff, CSV를 넘겨 분석하기
Claude Code는 대화형 터미널 앱이지만, 동시에 유닉스 철학을 따르는 명령줄 도구이기도 합니다. claude -p(헤드리스 모드)는 표준 입력(stdin)으로 들어온 데이터를 프롬프트와 함께 받아 처리하고, 결과를 표준 출력(stdout)으로 내보냅니다. 그래서 cat, grep, git, python 같은 기존 명령과 파이프(|)로 자연스럽게 연결할 수 있습니다. 이번 글에서는 로그 분석, git diff 리뷰, CSV 집계, 에러 메시지 해석, 커밋 이력으로 릴리즈 노트 만들기까지, 파이프로 Claude를 연결하는 실전 패턴을 실제 실행 결과와 함께 정리합니다. ※ 실습 환경: Windows 11 + Git Bash, Claude Code 2.1.304, 모델은 비용이 저렴한 haiku를 사용..
[Vue.js 2026-10-17] Options API vs Composition API - data, methods, computed, watch 비교와 마이그레이션
Vue 컴포넌트는 두 가지 스타일로 작성할 수 있습니다. Vue 2 시절부터 사용해 온 Options API와, Vue 3에서 도입된 Composition API입니다. 두 API는 같은 반응형 시스템 위에서 동작하는 서로 다른 인터페이스일 뿐이며, Vue 3에서는 둘 다 공식적으로 지원됩니다. 이번 글에서는 같은 기능을 두 가지 방식으로 구현해 보면서 data/ref, methods/함수, computed, watch, 라이프사이클, props/emits, 템플릿 ref의 대응 관계를 정리하고, 로직 재사용 방식(Mixins vs Composables)의 차이, 두 API를 함께 쓰는 방법, 그리고 어떤 상황에서 무엇을 선택해야 하는지까지 예제와 실행 결과로 살펴보겠습니다. 1. 같은 컴포넌트, 두 가..
[Vue.js 2026-10-17] Render Functions와 h() - VNode, Functional Components, 렌더 함수로 v-if/v-for/v-model 구현
Vue는 대부분의 경우 템플릿으로 화면을 작성하도록 권장합니다. 하지만 템플릿은 결국 렌더 함수(Render Function)로 컴파일되어 실행됩니다. 렌더 함수는 JavaScript의 표현력을 그대로 사용할 수 있기 때문에, 조건에 따라 태그 이름 자체가 바뀌거나 매우 동적인 구조를 만들어야 할 때 템플릿보다 유연합니다. 이번 글에서는 가상 DOM과 VNode의 개념, h() 함수의 사용법, script setup과 setup()에서 렌더 함수 반환하기, 템플릿 기능(v-if, v-for, v-on, v-model, 슬롯)을 렌더 함수로 구현하는 방법, 그리고 함수형 컴포넌트(Functional Components)까지 예제와 실행 결과로 정리해 보겠습니다. 1. 가상 DOM과 VNode Vue는 실제..
[Vue.js 2026-10-17] Plugins와 Application API - app.use, globalProperties, app.provide, errorHandler
Vue 애플리케이션은 createApp()으로 만든 애플리케이션 인스턴스(app)에서 시작합니다. 이 app 인스턴스를 통해 전역 컴포넌트와 디렉티브를 등록하고, 전역 설정을 바꾸고, 플러그인을 설치할 수 있습니다. 플러그인(Plugins)은 Vue에 앱 수준의 기능을 추가하는 독립적인 코드입니다. Vue Router, Pinia, vue-i18n 같은 라이브러리도 모두 플러그인으로 설치됩니다. 이번 글에서는 애플리케이션 인스턴스 API(app.component, app.directive, app.provide, app.config), 플러그인의 구조와 작성법, 옵션 전달, globalProperties와 provide를 이용한 기능 제공, 그리고 전역 에러 처리까지 예제와 실행 결과로 정리해 보겠습니다..
[Vue.js 2026-10-17] Template Syntax - Text Interpolation, v-html, v-bind, Dynamic Arguments, v-once, v-memo
Vue는 HTML 기반의 템플릿 문법을 사용해 렌더링된 DOM을 컴포넌트의 데이터와 선언적으로 연결합니다. 모든 Vue 템플릿은 문법적으로 유효한 HTML이므로 브라우저와 HTML 파서가 그대로 해석할 수 있으며, Vue는 내부적으로 이 템플릿을 최적화된 JavaScript 렌더 함수로 컴파일합니다. 이번 글에서는 텍스트 보간(Mustache), 원시 HTML 출력(v-html), 속성 바인딩(v-bind)과 축약 문법, boolean 속성, 여러 속성 한 번에 바인딩, JavaScript 표현식 사용 규칙, 디렉티브의 구조(인자, 동적 인자, 수식어), 그리고 렌더링 최적화용 디렉티브(v-once, v-memo, v-pre, v-text)까지 예제와 실행 결과로 정리해 보겠습니다. 1. 텍스트 보간 (..