Visual Studio Code 플러그인을 iframe으로 3주 만에 개발한 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

- 웹 개발자 및 디자인 툴 사용자: 아이콘 통합 작업의 효율성 향상

- 난이도: 중간 (VS Code 플러그인 개발 기초 지식 필요)

핵심 요약

• iframe 기반 UI로 VS Code 내에서 아이콘 검색 및 드래그 앤 드롭이 가능
• 모노레포 아키텍처와 공유 컴포넌트 라이브러리로 3주 내 플러그인 개발 가능
• Redux + RTK Query를 사용해 상태 관리와 API 통합을 간소화

섹션별 세부 요약

1. 개발 배경 및 문제점

• 개발자들이 매번 SVG 아이콘을 수동으로 다운로드 및 인터페이스하는 과정의 비효율성
• VS Code 플러그인을 통해 드래그 앤 드롭 기능 추가로 작업 흐름 단축
• /assets 폴더 내 아이콘 자동 다운로드 기능 제공

2. 기술 스택 및 아키텍처

• Next.js 기반 WebView로 UI 렌더링
• Redux + RTK Query로 전역 상태 관리 및 API 통합
• 공유 컴포넌트 라이브러리를 통해 플러그인 간 코드 재사용
• Iframe을 통해 VS Code API와의 상호작용 처리

3. 모노레포 활용 전략

• 기존 여러 리포지토리에서의 중복 로직 문제 해결
• 모노레포를 통해 90% 이상의 프론트엔드 코드 재사용
• Shared Store와 Component Library로 빠른 기능 확장

결론

• Streamline Icons Marketplace에서 플러그인 설치 후 VS Code 내 아이콘 통합 작업 가능
• 모노레포 + 공유 라이브러리 전략으로 향후 플러그인 개발 시간 90% 이상 절감 가능
• Redux + RTK Query 활용 시 상태 관리 및 API 통합 복잡도 감소