Code Beat

이전 글에서는 WebView를 생성하고 VSCode Extension 내부 메시지 전달 구조를 구축했다. WebView → Extension 방향의 데이터 플로우가 확인된 상태이며, 이제 OpenAI API를 연결하여 실제 대화 기능을 구현할 수 있다.이번 단계의 목표는 다음과 같다.WebView 메시지를 OpenAI API로 전달OpenAI의 응답을 다시 WebView에 표시페이지 새로고침이 없는 채팅 UI 형태 완성최소 기능의 ChatGPT 기반 개발 보조 도구 형태 확보아키텍처현재 단계의 데이터 흐름은 다음과 같다: WebView (UI) ↓ postMessage()VSCode Extension ↓ OpenAI API 요청OpenAI 응답 ↓ panel.webview.postMessage()W..

이전 글에서는 VSCode Extension 개발 환경을 구성하고 템플릿 프로젝트를 생성한 뒤, OpenAI API 연동 준비까지 완료했다. 이제 실제로 ChatGPT와 상호작용할 수 있는 UI를 VSCode 내부에 구축할 차례다.이번 단계의 목표는 다음과 같다.VSCode WebView를 통해 사용자 입력 UI 구현WebView → 확장 → OpenAI API → WebView 구조 설계확장 명령(Command)로 패널 열기 기능 구현ChatGPT에게 메시지를 입력하고 응답을 표시하는 초기 형태 완성WebView란 무엇인가?WebView는 VSCode 확장 내부에서 HTML, CSS, JavaScript를 실행할 수 있는 독립된 렌더링 환경이다. 웹 기술로 UI를 만들어 VSCode 확장 UI처럼 사용..

최근 개발 방식은 단순히 도구를 사용하는 수준을 넘어, AI 모델을 개발 워크플로우 내부에 통합하는 방향으로 변화하고 있다. 특히 OpenAI 기반 모델은 코드 이해, 리팩터링, 파일 생성, 테스트 보조 등 다양한 기능을 수행할 수 있어 IDE 수준의 도구와 결합할 경우 기존 개발 방식보다 높은 생산성을 기대할 수 있다.이번 시리즈는 ChatGPT(OpenAI API)를 Visual Studio Code Extension과 직접 연결해, 개발 환경 내부에서 코드 생성 및 자동화 기능을 수행하는 구조를 만드는 과정을 기록한다. 목표는 다음과 같다.목표ChatGPT를 VSCode 확장 내부에서 직접 호출할 수 있도록 구성한다.브라우저나 외부 창 없이 VSCode 내에서 AI와 상호작용할 수 있는 UI를 구축..