Blog

Blog

기술과 일에 대한 글.

2026

추적과 검증이 안 되는 스킬은 죽은 스킬이다 — 이미 푼 문제로 다시 풀어보기

Claude Code 스킬을 만들면 끝일까? 만든 사람 머릿속에 있는 절차가 SKILL.md로 옮겨졌는지, 새로 들어온 세션이 같은 절차를 따라가는지는 별개의 문제다. 이미 한번 해결해 본 사건을 새 워크트리에서 스킬로 다시 풀어보고, 산출물을 비교한다 — 그게 검증이다.

2026-04-25·스킬워크플로우Claude Code테스팅에이전트

AI 상담봇 사건 대응을 Claude Code 스킬로 만든 이야기

사내 AI 상담봇에서 "이 예약에 대해 봇이 틀린 답을 했다"는 제보가 반복됐다. 매번 LLM trace · Cloud Run 로그 · 코드를 같은 패턴으로 뒤지다가, 그 절차 자체를 Claude Code skill로 만들었다. 4단계(intake → investigate → fix → verify) 구조와 그 안에 박힌 설계 결정들에 대한 이야기.

2026-04-23·스킬워크플로우Claude CodeLLM에이전트webhook
2025

LLM 상담 에이전트에서 "사용자 질문을 어떻게 분류할 것인가"

OTA 상담 채팅 AI를 만들면서 "사용자 질문을 어떻게 분류할 것인가"를 놓고 했던 설계 판단을 정리한다. 단일 역할에서 시작해 7개 의도 분류, (의도 × 제약사유) 상태, 프롬프트 위생 이슈까지.

2025-11-05·LLM에이전트프롬프트 엔지니어링의도 분류LangChain

Radix UI Popover Portal 사용 시 모달 내 스크롤이 동작하지 않는 문제 해결기

아래는 "Radix UI Popover의 Portal로 인한 모달 내 스크롤 문제 트러블슈팅"을 범용적인 용어로 정리한 마크다운 예시입니다. 문제 상황 React 프로젝트에서 Radix UI의 Popover 컴포넌트를 사용해 검색어 추천/최근 검색어 팝업을 구현했습니다. 이 컴포넌트를…

2025-06-05·PopOverPortalReactradix-ui모달스크롤오버플로우트러블슈팅

Git에서 커밋을 다른 브랜치로 옮기고 원래 브랜치에서는 삭제하는 방법

Git에서 커밋을 다른 브랜치로 옮기고 원래 브랜치에서는 삭제하는 방법 이번 포스팅에서는 한 브랜치의 특정 커밋을 다른 브랜치로 옮기고, 원래 브랜치에서는 해당 커밋을 삭제하는 실전 예제를 소개합니다. 시나리오 브랜치에 두 개의 커밋이 있습니다. fix: 마커가 클러스터에 포함되지 않…

2025-06-02·cherry-pickgit

React에서 Zustand Store와 Context Provider 함께 사용할 때 발생하는 불필요한 리렌더링 문제 해결하기

React에서 Zustand Store와 Context Provider 함께 사용할 때 발생하는 불필요한 리렌더링 문제 해결하기 문제 상황 호텔 검색 기능을 구현하면서 다음과 같은 문제가 발생했습니다: 이 코드에서 발생한 문제: 1. Provider가 리렌더링될 때마다 새로운 stor…

2025-06-02·ReactcontextproviderTypeScriptZustand

Google Maps에서 마커 클릭 시 오버레이 중앙 정렬하기

Google Maps에서 마커 클릭 시 오버레이 중앙 정렬하기 문제 상황 Google Maps에서 마커를 클릭했을 때, 해당 마커 위에 오버레이가 표시되는데, 오버레이가 지도 중앙에 위치하지 않는 문제가 있었습니다. 특히 PC와 모바일 환경에서 각각 다른 위치에 표시되어 사용자 경험을…

2025-06-02·ReactTypeScript구글맵

Tailwind에서 `bg-error`가 적용되지 않는 문제 해결하기 🚀

Tailwind에서 가 적용되지 않는 문제 해결하기 🚀 🔥 문제 상황 Next.js에서 TailwindCSS를 사용 중인데, 에서 색상을 CSS 변수()로 설정했음에도 클래스가 적용되지 않는 문제가 발생했다. 하지만 크롬 개발자 도구에서 를 검색해도 관련 스타일이 존재하지 않았다!🤯…

2025-03-07·JITsafelisttailwindCSS

Conventional Commits의 타입 정리

💡 참고: https://www.conventionalcommits.org/en/v1.0.0/ Conventional Commits에서 사용되는 주요 타입을 정리하면 다음과 같습니다. 각 타입은 커밋의 목적을 명확하게 하기 위해 사용됩니다. 1. (Feature, 기능 추가)새로운 기…

2025-02-26·conventional commitsemantic release타입정리

Next.js와 shadcn/ui에서 DropdownMenuTrigger의 asChild 속성에 대해 알아보기 🚀

Next.js와 shadcn/ui에서 DropdownMenuTrigger의 asChild 속성에 대해 알아보기 🚀 안녕하세요! 이번 포스트에서는 Next.js에서 shadcn/ui패키지의 컴포넌트를 사용할 때 등장하는 속성에 대해 살펴보려 합니다. “이 속성은 언제 써야 하고, 왜 필…

2025-02-21·asChildhydration-errorNext.jsshadcn

Next.js에서 루트 경로(`/`) 접근 시 특정 경로(`/food`) 렌더링하기 🚀

Next.js에서 루트 경로() 접근 시 특정 경로() 렌더링하기 🚀 개요 📝 Next.js 프로젝트에서 루트 경로()에 접근했을 때, 특정 경로()의 내용을 렌더링하도록 설정하고 싶다면 어떻게 하면 될까요? 🤔 이 글에서는 의 기능을 활용하여 이를 간단하게 구현하는 방법을 소개합니다…

2025-02-20·Next.jsrewrites경로설정변경

📌 VS Code에서 자동 import 시 alias가 아닌 상대 경로가 표시되는 문제 해결

📌 VS Code에서 자동 import 시 alias가 아닌 상대 경로가 표시되는 문제 해결 개발 중에 를 사용할 때, 원하는 alias 경로가 아닌 상대 경로가 자동으로 추가되는 문제가 발생했다. 원하는 import 형태실제 자동 import된 형태이 문제의 원인은 VS Code 설…

2025-02-20·import aliasTypeScriptvscode상대경로

NPM 패키지 생성 및 semantic-release를 활용한 자동 배포

NPM 패키지 생성 및 semanticrelease를 활용한 자동 배포 개요 NPM 패키지를 생성하고, 를 사용하여 GitHub Actions를 통해 자동으로 배포하는 과정을 정리합니다. 1. 프로젝트 초기화 먼저, NPM 패키지를 위한 프로젝트를 생성하고 초기화합니다. 이제 파일이…

2025-02-13·githubgithub-actions-workflownpmnpm-package-releasesemantic releaseworflow

Promise.race를 사용하여 API Timeout 구현하기

Promise.race를 사용하여 API Timeout 구현하기 API 호출 시, 네트워크 지연이나 서버 문제로 인해 응답이 오지 않는 상황이 발생할 수 있습니다. 이러한 문제를 방지하기 위해 타임아웃을 설정하여 일정 시간이 지난 후 요청을 강제로 종료할 수 있습니다. 이번 포스트에서…

2025-02-12·APIpromise.racetimeout

웹훅(Webhook) 이해와 구현 예제 🚀

웹훅(Webhook) 이해와 구현 예제 🚀 이 글에서는 웹훅(Webhook)의 개념과 동작 원리, 그리고 REST API와의 차이점을 알아보고 Python을 이용한 웹훅 구현 예제를 소개합니다. 목차 1. 웹훅(Webhook) 개념 2. 웹훅 동작 원리 3. Python 코드 예제 3…

2025-02-11·FlaskPythonrestapiwebhook개념웹훅

GitHub CLI (`gh`) 완벽 가이드

GitHub CLI () 완벽 가이드 GitHub CLI()는 터미널에서 GitHub과 상호작용할 수 있도록 도와주는 강력한 도구입니다. 이 글에서는 의 설치부터 주요 기능까지 자세히 다뤄보겠습니다. 1. GitHub CLI 설치 macOS (Homebrew) Windows (Scoo…

2025-02-10·ghgithubgithub cli설치가이드

🎯 RASA Socket.IO 연결 문제 해결기

🎯 RASA Socket.IO 연결 문제 해결기 RASA를 사용하면서 Socket.IO를 통해 실시간 통신을 구현하는 과정에서 예상치 못한 문제에 직면했습니다. 이 글에서는 문제의 증상, 원인 분석, 그리고 해결 방법을 단계별로 정리했습니다. 🚩 문제 상황 RASA 서버와 Python…

2025-02-05·Socket통신rasasocketio버그

📚 Rasa Form Validation 이슈 해결기

📚 Rasa Form Validation 이슈 해결기 이번 글에서는 Rasa를 활용한 대화형 챗봇 개발 중 겪었던 Form Validation 이슈와 이를 어떻게 해결했는지에 대해 정리했습니다. 🎯 문제 상황 Rasa를 활용해 여행 일정을 수집하는 챗봇을 개발하고 있었습니다. 대화 흐…

2025-02-05·custom actionrasa문제해결

Rasa Form Handling: 자동화된 Slot Filling 이해하기

Rasa Form Handling: 자동화된 Slot Filling 이해하기 Rasa를 사용하면서 에 정의된 들이 에 명시되지 않았음에도 불구하고 정상적으로 응답되는 이유에 대해 고민해 본 적이 있나요? 이번 글에서는 Form과 Slot Filling 메커니즘을 통해 이 과정을 상세히…

2025-02-05·form handlingrasa

개념정리: 📦Protobuf 와 🚀gRPC

🚀 React 프로젝트에서 Protocol Buffers와 gRPC 개념 정리 📦 1. Protocol Buffers (proto)란? Protocol Buffers (protobuf)는 Google에서 개발한 데이터 직렬화(Serialization) 포맷입니다. 데이터 구조를 정의하…

2025-02-03·RPCgrpcprotoprotocol butter

Docker에서 requirements.txt vs RUN pip install

Dockerfile에서 와 사용 비교 Dockerfile에서 Python 패키지를 설치할 때 를 사용하는 방법과 을 사용하는 방법에는 각각의 장단점이 있습니다. 아래에서 이를 비교하고 상황에 따른 추천 방법을 정리합니다. 1. 를 사용해 패키지를 설치 Dockerfile에서 를 사용하…

2025-01-23·dockerpip installrequirements.txt

Python 코드에 필요한 패키지 추출하기

를 사용하여 생성하기 는 프로젝트에서 실제로 사용된 를 기반으로 파일을 자동 생성해주는 유용한 도구입니다. 이를 통해 불필요한 의존성을 제거하고 정확한 파일을 생성할 수 있습니다. 설치 방법 먼저, 를 설치합니다: 사용 방법 프로젝트에서 파일을 생성하려면 다음 단계를 따라주세요: 1.…

2025-01-22·3.xpipreqsPythonrequirements.txt

데이터 저장: 60분 vs 60🧐

데이터 표현과 타입 설계: 고민과 개념 정리 시간과 같은 데이터를 다룰 때, 데이터를 어떻게 표현하고 처리할지에 대한 고민은 소프트웨어 설계에서 중요한 문제입니다. 예를 들어, 시간을 표시하는 라벨에 "60분"을 출력하려고 할 때, 다음 두 가지 방식으로 데이터를 설계할 수 있습니다.…

2025-01-22·SRP데이터 표현역직렬화직렬화추상화

Github Repository 및 인증 재설정 문제해결

Git 문제 해결 정리 Git을 사용하면서 발생한 문제와 해결 방법을 정리합니다. 아래는 실제 발생했던 상황과 이를 해결하기 위한 단계별 과정입니다. --- 1. GitHub 로그인 정보 변경 및 Repository 재설정문제 상황 - GitHub에서 기존 계정과 연결된 상태에서 새…

2025-01-21·gitgithub

npm install vs yarn add

npm install vs yarn add JavaScript 패키지를 설치할 때 과 를 사용합니다. 두 명령어는 비슷한 작업을 수행하지만, 사용하는 도구( vs )에 따라 차이점이 있습니다. 아래는 두 명령어의 주요 차이점과 비교입니다. --- 1. 패키지 관리 도구 - npm: N…

2025-01-18·npmyarn비교

Pyenv와 Virtualenv로 프로젝트별 Python 환경 설정하기

Pyenv로 Python 3.10.0 가상환경 설정하기 를 사용하여 특정 프로젝트에서만 Python 3.10.0 가상환경을 설정하는 방법을 단계별로 알아보겠습니다. --- 1. Pyenv 설치 확인 가 설치되어 있는지 확인합니다. 없다면 아래 명령어로 설치합니다. MacOS/Linux…

2025-01-16·pyenvPythonvirtualenv가상환경

GitHub에서 `git clone` 하는 방법

GitHub에서 하는 방법 GitHub에서 명령어를 사용해 저장소를 복제하는 방법을 단계별로 설명합니다. --- 1. 복제할 저장소 URL 복사 1. 복제하려는 GitHub 저장소 페이지로 이동합니다. 2. 오른쪽 상단의 "Code"버튼을 클릭합니다. 3. HTTPS, SSH, 또는…

2025-01-16·clonegithub초보

Flask로 간단한 GET API 만들기

Flask로 간단한 GET API 만들기 Python의 Flask는 가볍고 사용하기 쉬운 웹 프레임워크로, 간단한 API를 빠르게 개발할 수 있습니다. 이 글에서는 Flask를 이용해 간단한 GET API를 만드는 방법을 단계별로 설명합니다. 1. Flask 설치하기 먼저 Flask를…

2025-01-15·FlaskREST APIPython웹개발초보자

Docker build 시 에러 발생

에러 내용 docker build 실행시 문제 발생 사용한 수정한 에러원인(추정) 에 패지키와 기본 이미지에 패키지가 충돌되면서 발생하는 문제로 판단됩니다. 에 내용을 삭제하니 문제없이 빌드 완료된다.

2025-01-07·dockerPythonrasa
2024

[NextAuth] 오류: "authOptions" is not a valid Route export field

에러 내용 원인 와 를 함께 export해서 발생하는 문제 에서는 문제가 발생 안하지만 시 에러가 발생 해결방법 와 를 파일을 분리해서 export 진행

2024-12-16·NextAutherrorNext.js

Nextjs 15 + NextAuth

1. Next-auth 초기 설정 - 초기 설정 가이드 내용 참고 - app router를 사용중이기 때문에 이 가이드를 참고 2. 구글 OAuth 설정 - 구글OAuth 3. 클리언트 컴포넌트 예시 4. 서버 컴포넌트 예시

2024-12-16·NextAuthNext.js초기설정