Build your own WinRAR software with ElectronJS & React JS
- 이 튜토리얼에서는 ElectronJS, ReactJS, TypeScript 및 D UI를 사용하여 WinRAR과 유사한 자체 압축 해제 소프트웨어인 'Archive'를 구축하는 방법을 설명합니다. 🗜️
- Archive 앱은 파일 압축 및 압축 해제 기능을 제공하며, 사용자는 특정 파일을 선택적으로 추출하거나 압축할 수 있습니다. 📂
- Electron Forge를 사용하여 ReactJS 및 TypeScript 설정을 간소화하고, 번들링 과정을 쉽게 만듭니다. 🛠️
- Tailwind CSS를 설정하여 UI를 구성하고, DC UI 컴포넌트를 활용하여 UI 개발 시간을 단축합니다. 🎨
- ElectronJS의 주요 개념인 메인 프로세스와 렌더러 프로세스 간의 통신을 위해 preload.ts와 IPC(Inter-Process Communication)를 사용합니다. 📡
- 렌더러 프로세스에서 메인 프로세스로의 통신을 위해 contextBridge.exposeInMainWorld를 사용하여 'electron' API를 노출합니다. 🌉
- 파일 선택 대화 상자를 열고, 선택한 아카이브 파일의 내용을 추출하는 기능을 구현합니다. 📤
- 압축 기능을 통해 사용자는 디렉토리 또는 단일 파일을 zip, T file, GZIP, TGZ 형식으로 압축할 수 있습니다. 🗜️
- 대용량 파일 처리 시, 처음 50개 항목을 로드한 후 스크롤 시 추가 항목을 로드하는 방식으로 성능을 최적화합니다. 🚀
- UI는 시스템의 색상 모드에 따라 자동으로 다크 모드 또는 라이트 모드로 전환됩니다. 🌗
- 사용자는 압축 또는 추출할 파일을 선택할 수 있으며, 선택하지 않은 파일은 결과물에서 제외됩니다. ✅
- 이 튜토리얼은 ElectronJS, ReactJS, TypeScript를 사용하여 실용적인 데스크톱 애플리케이션을 구축하는 방법을 제공합니다. 👨💻