Vibe Editor
2025.04 ~ 2025.05 (6주)|6명(기여도 25%) †
Frontend Lead / VSCode Extension DeveloperVS Code에서 코드/디렉토리/로그 스냅샷을 찍고, AI 도움으로 기술 블로그 초안을 Notion에 게시하는 확장 프로그램
스냅샷 기능
VS Code
자동 게시
Notion
AI 포스트 생성
템플릿 기반 프롬프트
VSCode ExtensionAI : Prompt EngineeringAI : Agent DesignReactNext.jsTypeScriptTailwindNotion APIJenkinsFigmaReact Hook FormUX Writing
트러블 슈팅
Redux의 WebView 전용 구조로 인해 VSCode Extension 전역 상태 공유에 실패
현상Webview에서 Redux로 관리하던 전역 상태 데이터가 TreeView 등의 다른 영역에서 동기화되지 않음
원인Redux는 React 기반 WebView 내부에서만 동작하며, WebView 간 또는 TreeView 등 외부 UI 컴포넌트에서는 Redux state 접근이 불가
해결- ExtensionContext.globalState(VSCode Extension의 전역 저장소)를 사용해 공통 상태 데이터를 저장
- getLocalTemplates(), getLocalTemplate() 등 유틸 함수를 생성해 상태 읽기/갱신 로직 구현
- postMessage로 상태 변경을 통지해, 다른 WebView도 동기화
- 사용자 설정은 VSCode 설정 API를 래핑한 클래스로 전역 관리하며, settings.json에 저장
성과- Webview, TreeView 등 Extension 전역에서 상태 일관성 확보
- 모든 워크스페이스에서 캐시 데이터 공유
- 데이터 동기화코드를 별도 함수로 분리, 반복 코드 최소화
- 로그아웃 시 캐시·secret 일괄 초기화로 데이터 잔존 문제 방지
회고캐시 데이터의 호출 실패 시 경고 메시지에 재시도 또는 설정 확인 등의 해결책까지 명시하면 사용자 혼란을 줄이고 UX 완성도가 높아졌을 것
VSCode Extension의 쿠키 미지원으로 Oauth2 리디렉션 토큰 처리 실패
현상Oauth2 인증 후 AccessToken을 쿠키에 담아 전달하더라도, VSCode Extension 내부에서는 해당 쿠키에 접근할 수 없어 인증 불가
원인 VSCode Extension은 WebView가 iframe + sandbox 환경에서 동작하며, 쿠키/세션이 차단됨
해결- 클라이언트인 VSCode Extension 내에서 로컬 서버를 실행(localhost:5013)함
- 외부 브라우저에서 로컬 서버를 열고 AccessToken을 URL 파라미터로 전달받아 직접 수신하도록 처리
- 서버는 /callback 엔드포인트로 AccessToken을 전달받아, Extension 내부의 secret storage에 안전하게 저장
- 로그인 성공 메시지를 띄운 뒤, 로컬 서버를 통해 VSCode Extension 내부로 상태 전달 및 initFetchData 트리거 실행
성과- 외부 토큰 유출 없이 Extension 내부에 AccessToken 저장 가능
- 인증 상태를 모든 WebView에 일관되게 전파하여 사용자 흐름 유지
회고정적 포트(5013) 대신 동적 포트를 사용했다면 포트 충돌 가능성 없이 더 안전하게 서버를 열 수 있었을 것
Tailwind의 빌드 타임 색상 정의가 VSCode 테마의 실시간 반영을 막는 이슈
현상VSCode의 테마를 바꿔도, Extension 내의 색상이 즉시 반영되지 않고 프로그램 재시작 후에야 적용됨
원인테마 색상은 CSS 변수(var)로 제공되는데, Tailwind config의 theme 속성에 정의된 색상은 빌드 타임에만 적용되어 런타임의 변수 변경을 감지하지 못함
해결색상 관련 CSS는 별도의 global.css에서 정의하고, 테마 변수(var(--vscode-foreground) 등)를 직접 참조하도록 구성. Tailwind는 레이아웃·여백·타이포 등 비색상 영역에서만 사용
성과테마 변경이 즉시 반영되어, 재시작 없이 UX 흐름 유지 가능 (변경 반영 시간 0.1초 이내)
회고색상 클래스 정의 시 Tailwind의 명명 규칙(bg-, text-)을 활용했다면 CSS 유지보수성과 일관성을 더 확보할 수 있었을 것
프롬프트 전환 시 입력 상태 초기화 실패
현상프롬프트 전환 후에도 form 값이 이전 상태에 머무름
원인React Hook Form의 reset 타이밍이 form 초기값(defaultPrompt)의 변화를 감지하지 못함.
해결- defaultPrompt 변경 시 useMemo + useRef로 변경 감지 → reset() 호출로 폼 초기화
- preview에는 postMessage로 전환된 prompt 정보 전달하여 UI 동기화
성과프롬프트 전환 시 UI 전체가 정확하게 초기화되어 사용자 혼란 제거
회고폼 상태 관리를 위해 FormProvider를 적용했다면 중복된 훅 구조나 reset 타이밍 제어를 더 쉽게 처리할 수 있었을 것
스냅샷 변경 사항 실시간 반영 누락
현상TreeView에서 snapshot을 추가하거나 수정해도, form과 preview에 즉시 반영되지 않음
원인폼에 사용되는 snapshot 데이터는 defaultPrompt 내 snapshotAttachList와 별도로 관리되어 동기화가 누락됨
해결attachId 기준으로 snapshotList와 병합 후 form 갱신 후 동기화 유도
성과form과 preview가 snapshot 추가/삭제 직후에도 정확히 반영되어, 실시간 UX 유지
회고snapshot 변경 이후 서버 반영까지 자동 처리되도록 debounce 흐름과 자동 저장 로직이 병행되었으면 더욱 완성도 높은 UX를 제공할 수 있었을 것
.jpg&w=3840&q=75)
