Electron | vite quick-start

vite 로 설치 하니 추가 설정이 엄청 편하고
실행도 빠르다

npm create @quick-start/electron
npm install --save-dev @electron-toolkit/tsconfig

✔ Select a framework: › react
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

electron updater

“Add Electron updater plugin”은 Electron 애플리케이션에 자동 업데이트를 추가하는 것을 의미합니다. Electron 앱에서 자동 업데이트를 구현하는 데 사용되는 주요 플러그인 중 하나는 electron-updater입니다. 이 플러그인은 Electron 앱이 최신 버전을 유지하도록 도와줍니다.

• 기능:
  • 크로스 플랫폼 지원: Windows, macOS, Linux에서 작동합니다.
  • 자동 업데이트: 앱이 실행될 때 자동으로 업데이트를 확인하고 다운로드합니다.
  • 다양한 저장소 지원: GitHub Releases, Amazon S3, DigitalOcean Spaces 등 다양한 저장소를 지원합니다.

moirror proxy

“Enable Electron download mirror proxy”는 Electron을 설치할 때 사용할 수 있는 기능으로, Electron의 바이너리를 다운로드할 때 사용할 미러 서버를 설정하는 것을 의미합니다. 미러 서버는 공식 Electron 저장소가 아닌 다른 서버에서 Electron 바이너리를 다운로드할 수 있도록 해줍니다. 이는 네트워크 연결 문제나 특정 도메인에 대한 접근 제한이 있을 때 유용할 수 있습니다.

미러 서버 사용의 장점

• 네트워크 문제 해결: 느린 네트워크나 접근 제한이 있는 경우, 미러 서버를 통해 더 빠르고 안정적으로 다운로드할 수 있습니다.
• 프록시 지원: 프록시 서버를 통해 다운로드할 수 있어, 회사 내부 네트워크에서 Electron을 설치할 때 유용합니다.

이 기능은 Electron 애플리케이션을 개발할 때 특히 유용하며, 네트워크 환경에 따라 적절히 활용할 수 있습니다.

vite

Vite의 빠른 개발 서버는 프로젝트에 다음과 같은 영향을 미칩니다:

개발 속도 향상

• 빠른 서버 시작: Vite는 번들링을 생략하고 네이티브 ES 모듈을 사용하여 개발 서버를 즉시 시작할 수 있습니다. 이는 특히 대규모 프로젝트에서 개발 서버 시작 시간을 크게 단축합니다.
• 즉각적인 코드 반영: Hot Module Replacement (HMR) 기능을 통해 코드 변경 시 거의 즉시 브라우저에 반영되므로, 개발자에게 빠른 피드백을 제공합니다.

프로젝트 성능 최적화

• 최적화된 코드 크기: Vite는 코드 최적화 기능을 통해 최종 번들 크기를 줄여 페이지 로딩 속도를 향상시킵니다.
• 효율적인 빌드 프로세스: esbuild와 Rollup을 사용하여 개발 및 프로덕션 환경에서 각각 최적화된 빌드를 제공합니다.

다양한 플러그인 지원

• 확장성: Vite는 Rollup 플러그인과 호환되며, 다양한 기능을 추가할 수 있는 풍부한 플러그인 생태계를 제공합니다.
  이러한 장점들은 프로젝트의 개발 속도, 개발자 경험, 성능 최적화, 확장성 측면에서 긍정적인 영향을 미칩니다.

tailwindCSS

npm install tailwindcss @tailwindcss/vite

electron.vite.config.ts

import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  // ...
  renderer: {
    plugins: [tailwindcss()],
  },
});

tsconfig.node.json

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "moduleResolution": "bundler"
  },
  
}

tailwind.config.js

module.exports = {
  darkMode: ['class'],
  content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      // 색상 및 스타일 설정
    }
  },
  plugins: [import('tailwindcss-animate')]
}

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

touch src/index.css

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

npx shadcn@latest add button