dongzzi

AI 에이전트가 웹사이트에서 무언가를 실행하려면 지금은 화면을 긁는 수밖에 없습니다. DOM을 읽어 버튼을 찾고, 좌표를 계산해서 클릭합니다. 클래스명 하나가 바뀌거나 렌더링이 조금 늦어지면 그대로 깨집니다. 에디터처럼 내부 상태를 따로 들고 있는 컴포넌트라면 화면에는 값이 들어간 것처럼 보이는데 정작 저장되는 값은 비어 있는 일까지 생깁니다. 원인은 하나입니다. 사이트가 의도해서 열어준 인터페이스가 아니라, 사이트가 우연히 노출한 표면을 붙잡고 조작하고 있기 때문입니다. 마크업은 사람이 보라고 만든 것이지 프로그램이 호출하라고 만든 것이 아닙니다. WebMCP는 여기에 다른 방식을 제안합니다. 버튼을 찾게 하지 말고, 페이지가 직접 "나는 이런 일을 할 수 있다"고 선언하게 하자는 것입니다. 구글과 마..

AI 에이전트에게 코드 수정을 맡기다 보면 곤란한 상황이 생깁니다. 에이전트가 파일을 고치는 동안 저는 그 프로젝트에서 아무것도 할 수 없습니다.에이전트가 작업 중인 파일을 제가 열어서 다른 걸 만지면 서로 덮어씁니다. 다른 티켓을 급하게 봐야 해도 브랜치를 바꿀 수 없습니다. 결과물이 마음에 들지 않아 되돌리려 해도, 그 사이 제가 만진 것과 에이전트가 만진 것이 섞여 있어 골라내기가 번거롭습니다.작업 디렉토리가 하나뿐이라서 생기는 문제입니다. git worktree로 이걸 정리하고, 그 위에 티켓 단위 작업 흐름을 만들었습니다.브랜치를 바꾸는 것과 작업 공간을 늘리는 것은 다릅니다git checkout으로 브랜치를 옮기는 것은 책상 위 서류를 전부 치우고 다른 서류를 꺼내는 일에 가깝습니다. 책상은 ..

AI 코딩 도구를 실무에 쓰다 보면 어느 순간 벽을 만나게 됩니다. 코드는 잘 짜는데, 우리 도메인을 모른다는 것입니다."환불 기능 만들어줘"라고 하면 일반적인 환불 로직을 만들어옵니다. 하지만 실제 우리 서비스에는 결제수단별로 환불 처리 시점이 다르고, 특정 조건에서는 환불 자체가 막혀 있고, 그렇게 정해진 이유가 따로 있습니다. 이런 건 코드만 봐서는 알 수 없습니다.매번 프롬프트로 설명해주는 것도 한계가 있어서, 도메인 지식을 별도 레포로 분리하고 Claude Code가 코드 작업 중에 자동으로 참조하도록 연결해보았습니다.문제 상황문제 상황을 크게 두 가지로 나눠서 정리해봤습니다.히스토리가 문서화되어 있지 않아 기획이나 추가 작업 논의 때 불필요한 병목이 생기는 문제정책과 히스토리가 없어 AI가 잘..

Next.js에서 현재 route에 접근하거나 다른 route로 이동하는 등 라우터에 대한 접근이 필요할 때 next/router패키지를 사용하게 됩니다 (page router 기준)해당 모듈은 다음과 같은 방법들로 사용할 수 있습니다. useRouter 훅 사용 default로 export되는 Router 싱글톤 객체를 사용하기 Next.js에서는 싱글톤 객체 사용 방법은 현재 사라진 상태이며 useRouter를 이용하는것을 권장하고 있습니다. Next.js 동작 방식우선 next/router에 대해서 알아보기전에 Next.js 동작방식에 대해서 이해할 필요가 있습니다.SSG (Static Site Generation) : 빌드 타임에 HTML 생성 & 캐싱된 HTML을 기반으로 매 요청마다 재사용SS..

사내 결제 페이지 개편이유 사내 결제 페이지 (이하 payment) 프로젝트가 1차적으로 릴리즈되었을 당시 통일되지 않은 부분들이 굉장히 많았었습니다.1.  기존의 payment 프로젝트가 억지로 끼워 맞춘 부분이 많았다.예를들어 api호출을 할때 axios, react-query가 혼합되어 사용 되었다거나,니콘머니 충전, 콘구매 페이지 까지의 처리방식과 실제 결제를 진행하는 페이지에서의 처리방식이 다르거나,컨벤션이나 구조가 잡혀있지 않아서 각 파일마다 코드의 흐름이 다르다던가 등등 여러가지의 이유가 있었습니다.2. 불필요한 컴포넌트 분리가 너무 많았다.리팩토링을 진행한 가장 큰 이유였습니다.컴포넌트가 굳이 분리가 되지 않아도 되는 부분에서 분리가 되어 있었고 오히려 분리가 되지 않아야 할 부분에서 분리..