데브허브 | DEVHUB | Vibe Coding? Agmented Coding! ERP 재고 관리 시스템 개발Vibe Coding? Agmented Coding! ERP 재고 관리 시스템 개발
- 엔지니어를 위한 라이브 코딩 세션을 통해 ERP 재고 관리 시스템 개발 과정을 공유하고 실시간 질의응답을 진행함. 🧑💻
- 테이블 스크롤바 부재, 자동 완성 드롭다운 Z-인덱스 문제 등 UI/UX 버그를 진단하고 해결을 시도함. 🐛
- Cursor와 Claude Code 같은 AI 도구를 활용하여 자연어 명령으로 개발 문제를 해결하는 '증강 코딩' 방식을 시연함. 🤖
- AI가 복잡한 UI 문제 해결에 어려움을 겪을 때, 프롬프트 개선 및 다른 AI 모델(Claude)을 활용하여 반복적으로 문제 해결을 시도함. 🔄
- 복잡한 드롭다운 렌더링 문제를 해결하기 위해 React Portal을 사용하여 DOM 계층 구조 밖에서 요소를 렌더링하는 방식을 채택함. 🚪
- 불필요한 라이브러리 설치를 지양하고, 의존성 관리 및 버전 충돌을 최소화하기 위해 React DOM의
createPortal과 같은 내장 기능을 선호함. 🚫
- ERP 시스템의 전표 관리 기능을 개발하며, 전표 출력 안내문의 기본값을 조직 설정에서 가져오도록 데이터베이스 스키마와 폼을 수정함. 🧾
- AI를 활용하여 데이터베이스 스키마 변경 및 관련 폼 컴포넌트 생성을 요청하고 구현하는 과정을 시연함. ✍️
- Cursor 에이전트를 활용하여 특정 작업을 병렬로 처리하게 하고, 개발자는 다른 작업에 집중하거나 PR을 검토하는 효율적인 개발 워크플로우를 소개함. 🚀
- Claude AI 모델(Sonnet, Opus)의 성능 차이와 사용량/비용에 대해 언급하며, 복잡한 문제 해결에는 Opus 모델이 더 효과적임을 설명함. 💰
- Next.js 개발 시 기능 및 캐시 관리를 위해 패스 기반 라우팅을 사용하는 것이 좋다는 베스트 프랙티스를 공유함. 🛣️
- Claude Code로 로컬 개발을 진행하고, Cursor는 병렬 에이전트 작업이나 IDE 수정에 활용하는 효율적인 개발 워크플로우를 요약함. 🛠️