🎯 메모리 최적화 체크리스트

① 불필요한 창 닫기
사용하지 않는 BrowserWindow는 즉시 닫아줘. 각 창마다 별도의 렌더러 프로세스가 생성되니까 메모리를 많이 차지해.

// 창 닫을 때 메모리 해제
let myWindow = null;

function closeWindow() {
  if (myWindow) {
    myWindow.close();
    myWindow = null;  // 참조 제거로 가비지 컬렉션 유도
  }
}

② 이미지 최적화
큰 이미지는 앱을 느리게 만드는 주범이야. 적절한 크기로 리사이징하고 WebP 같은 효율적인 포맷을 사용해.

// Sharp 라이브러리로 이미지 최적화
const sharp = require('sharp');

async function optimizeImage(inputPath, outputPath) {
  await sharp(inputPath)
    .resize(800, 600, { fit: 'inside' })
    .webp({ quality: 80 })
    .toFile(outputPath);
}

③ 메모리 누수 방지
이벤트 리스너를 제거하지 않으면 메모리 누수가 발생해. 항상 cleanup을 잊지 마!

// 나쁜 예 ❌
window.addEventListener('resize', handleResize);

// 좋은 예 ✅
const handleResize = () => { /* ... */ };
window.addEventListener('resize', handleResize);

// 컴포넌트 언마운트 시
window.removeEventListener('resize', handleResize);

🚀 렌더링 최적화 기법

① Virtual Scrolling 구현
긴 리스트를 렌더링할 때는 보이는 부분만 렌더링해. React-Window나 React-Virtualized 같은 라이브러리를 활용하면 좋아.

// React-Window 예시
import { FixedSizeList } from 'react-window';

const MyList = ({ items }) => (
  <FixedSizeList
    height={600}
    itemCount={items.length}
    itemSize={50}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index]}
      </div>
    )}
  </FixedSizeList>
);

② CSS 애니메이션 최적화
transform과 opacity만 사용해서 애니메이션을 만들면 GPU 가속을 받을 수 있어.

/* 나쁜 예 ❌ - Reflow 발생 */
.box {
  transition: width 0.3s, height 0.3s;
}

/* 좋은 예 ✅ - GPU 가속 */
.box {
  transition: transform 0.3s, opacity 0.3s;
  will-change: transform;
}

③ 디바운싱과 쓰로틀링
빈번한 이벤트는 성능을 크게 저하시켜. 적절히 제어해줘야 해.

// 디바운스 - 마지막 호출만 실행
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
}

// 쓰로틀 - 일정 시간마다 한 번만 실행
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 사용 예시
const handleSearch = debounce((query) => {
  // 검색 로직
}, 300);

const handleScroll = throttle(() => {
  // 스크롤 로직
}, 100);

⚡ 시작 속도 개선 방법

① 지연 로딩(Lazy Loading)
필요한 모듈만 먼저 로드하고, 나머지는 나중에 로드해.

// 나쁜 예 ❌ - 모든 모듈을 처음에 로드
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');
const { dialog } = require('electron');

// 좋은 예 ✅ - 필요할 때만 로드
function saveFile() {
  const fs = require('fs');  // 여기서 로드
  const { dialog } = require('electron');
  // 파일 저장 로직
}

② V8 스냅샷 활용
자주 사용하는 코드를 미리 컴파일해서 스냅샷으로 만들면 시작 속도가 빨라져.

// electron-builder 설정
{
  "build": {
    "electronCompile": true,
    "asar": true,
    "asarUnpack": ["**/*.node"]
  }
}

③ Splash Screen 활용
앱이 로딩되는 동안 예쁜 스플래시 화면을 보여주면 체감 속도가 빨라져.

let splashWindow;
let mainWindow;

function createSplashWindow() {
  splashWindow = new BrowserWindow({
    width: 400,
    height: 300,
    transparent: true,
    frame: false,
    alwaysOnTop: true
  });
  
  splashWindow.loadFile('splash.html');
}

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    show: false  // 준비될 때까지 숨김
  });
  
  mainWindow.loadFile('index.html');
  
  // 준비되면 스플래시 닫고 메인 윈도우 표시
  mainWindow.once('ready-to-show', () => {
    setTimeout(() => {
      splashWindow.close();
      mainWindow.show();
    }, 500);
  });
}

app.whenReady().then(() => {
  createSplashWindow();
  setTimeout(createMainWindow, 1000);
});

📦 번들 크기 줄이기

① Tree Shaking
사용하지 않는 코드는 번들에서 제거해.

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    minimize: true
  }
};

② 외부 의존성 최소화
무거운 라이브러리는 가벼운 대안으로 교체해.

// 나쁜 예 ❌ - moment.js (무거움)
const moment = require('moment');

// 좋은 예 ✅ - date-fns (가벼움)
const { format } = require('date-fns');

// 더 좋은 예 ✅✅ - 네이티브 API 사용
const date = new Date().toLocaleDateString();

③ ASAR 아카이브 사용
파일들을 하나의 아카이브로 묶으면 I/O 성능이 향상돼.

// package.json
{
  "build": {
    "asar": true,
    "asarUnpack": [
      "**/node_modules/sharp/**/*",
      "**/node_modules/sqlite3/**/*"
    ]
  }
}

🔄 Worker Threads 활용

// worker.js
const { parentPort } = require('worker_threads');

parentPort.on('message', (data) => {
  // 무거운 계산 작업
  const result = heavyComputation(data);
  parentPort.postMessage(result);
});

function heavyComputation(data) {
  // 복잡한 데이터 처리
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

// main.js
const { Worker } = require('worker_threads');

function runHeavyTask(data) {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js');
    
    worker.on('message', resolve);
    worker.on('error', reject);
    worker.on('exit', (code) => {
      if (code !== 0) {
        reject(new Error(`Worker stopped with exit code ${code}`));
      }
    });
    
    worker.postMessage(data);
  });
}

// 사용
ipcMain.handle('heavy-task', async (event, data) => {
  const result = await runHeavyTask(data);
  return result;
});

⚙️ 네이티브 모듈 예시

// binding.gyp
{
  "targets": [
    {
      "target_name": "native_module",
      "sources": [ "native_module.cc" ],
      "include_dirs": [
        "<!(node -e \"require('nan')\")"
      ]
    }
  ]
}

// native_module.cc
#include <nan.h>

void FastCalculation(const Nan::FunctionCallbackInfo<v8::Value>& info) {
  if (info.Length() < 1) {
    Nan::ThrowTypeError("Wrong number of arguments");
    return;
  }

  double value = info[0]->NumberValue();
  double result = 0;
  
  // 초고속 계산
  for (int i = 0; i < 1000000; i++) {
    result += sqrt(value * i);
  }

  info.GetReturnValue().Set(Nan::New(result));
}

void Init(v8::Local<v8::Object> exports) {
  exports->Set(Nan::New("fastCalculation").ToLocalChecked(),
               Nan::New<v8::FunctionTemplate>(FastCalculation)
                 ->GetFunction());
}

NODE_MODULE(native_module, Init)

// JavaScript에서 사용
const nativeModule = require('./build/Release/native_module');
const result = nativeModule.fastCalculation(42);

💾 SQLite 최적화 팁

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('myapp.db');

// 1. WAL 모드 활성화 (Write-Ahead Logging)
db.run('PRAGMA journal_mode = WAL');

// 2. 동기화 모드 조정 (성능 vs 안정성)
db.run('PRAGMA synchronous = NORMAL');

// 3. 캐시 크기 증가
db.run('PRAGMA cache_size = -64000'); // 64MB

// 4. 트랜잭션 사용으로 대량 삽입 최적화
db.serialize(() => {
  db.run('BEGIN TRANSACTION');
  
  const stmt = db.prepare('INSERT INTO users VALUES (?, ?, ?)');
  for (let i = 0; i < 10000; i++) {
    stmt.run(i, `user${i}`, `email${i}@test.com`);
  }
  stmt.finalize();
  
  db.run('COMMIT');
});

// 5. 인덱스 생성
db.run('CREATE INDEX IF NOT EXISTS idx_user_email ON users(email)');

// 6. VACUUM으로 데이터베이스 최적화 (주기적으로)
db.run('VACUUM');

IndexedDB 활용 (렌더러 프로세스)

// 대용량 데이터는 IndexedDB 사용
class DataStore {
  constructor() {
    this.dbName = 'MyAppDB';
    this.version = 1;
  }

  async init() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve();
      };
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        
        // 객체 저장소 생성
        if (!db.objectStoreNames.contains('documents')) {
          const store = db.createObjectStore('documents', 
            { keyPath: 'id', autoIncrement: true });
          store.createIndex('title', 'title', { unique: false });
          store.createIndex('date', 'date', { unique: false });
        }
      };
    });
  }

  async saveDocument(doc) {
    const tx = this.db.transaction(['documents'], 'readwrite');
    const store = tx.objectStore('documents');
    return new Promise((resolve, reject) => {
      const request = store.add(doc);
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }

  async getDocuments() {
    const tx = this.db.transaction(['documents'], 'readonly');
    const store = tx.objectStore('documents');
    return new Promise((resolve, reject) => {
      const request = store.getAll();
      request.onsuccess = () => resolve(request.result);
      request.onerror = () => reject(request.error);
    });
  }
}

// 사용
const dataStore = new DataStore();
await dataStore.init();
await dataStore.saveDocument({ 
  title: '문서1', 
  content: '내용...', 
  date: new Date() 
});

📱 반응형 레이아웃 예시

// CSS Grid로 반응형 레이아웃
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

// 미디어 쿼리로 세밀한 조정
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  
  .main-content {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .container {
    grid-template-columns: 250px 1fr 300px;
  }
}

// JavaScript로 창 크기 감지
window.addEventListener('resize', debounce(() => {
  const width = window.innerWidth;
  
  if (width < 768) {
    // 모바일 레이아웃
    document.body.classList.add('mobile');
  } else {
    document.body.classList.remove('mobile');
  }
}, 250));

🌙 다크 모드 구현

// main.js - 시스템 테마 감지
const { nativeTheme } = require('electron');

function setupTheme() {
  // 시스템 테마 변경 감지
  nativeTheme.on('updated', () => {
    const isDark = nativeTheme.shouldUseDarkColors;
    // 모든 창에 테마 변경 알림
    BrowserWindow.getAllWindows().forEach(window => {
      window.webContents.send('theme-changed', isDark);
    });
  });
}

// preload.js
contextBridge.exposeInMainWorld('themeAPI', {
  isDarkMode: () => {
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  },
  onThemeChange: (callback) => {
    ipcRenderer.on('theme-changed', (event, isDark) => {
      callback(isDark);
    });
  }
});

// renderer.js
// CSS 변수로 테마 관리
const root = document.documentElement;

function applyTheme(isDark) {
  if (isDark) {
    root.style.setProperty('--bg-color', '#1e1e1e');
    root.style.setProperty('--text-color', '#ffffff');
    root.style.setProperty('--border-color', '#404040');
  } else {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
    root.style.setProperty('--border-color', '#e0e0e0');
  }
}

// 초기 테마 적용
applyTheme(window.themeAPI.isDarkMode());

// 테마 변경 감지
window.themeAPI.onThemeChange((isDark) => {
  applyTheme(isDark);
});

// CSS
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #e0e0e0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  border: 1px solid var(--border-color);
  background-color: var(--bg-color);
}

🔒 CSP 설정

// index.html
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self'; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:; 
               font-src 'self' data:;">

// 또는 main.js에서 설정
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  callback({
    responseHeaders: {
      ...details.responseHeaders,
      'Content-Security-Policy': [
        "default-src 'self'; script-src 'self'"
      ]
    }
  });
});

🔗 외부 링크 안전하게 처리하기

// main.js
const { shell } = require('electron');

mainWindow.webContents.setWindowOpenHandler(({ url }) => {
  // 외부 URL은 기본 브라우저에서 열기
  if (url.startsWith('http://') || url.startsWith('https://')) {
    shell.openExternal(url);
    return { action: 'deny' };
  }
  
  // 내부 URL은 허용
  return { action: 'allow' };
});

// 네비게이션 제한
mainWindow.webContents.on('will-navigate', (event, url) => {
  const allowedDomains = ['myapp.com', 'api.myapp.com'];
  const urlObj = new URL(url);
  
  if (!allowedDomains.includes(urlObj.hostname)) {
    event.preventDefault();
    shell.openExternal(url);
  }
});

⚙️ electron-builder 설치 및 설정

npm install electron-builder --save-dev

// package.json
{
  "name": "my-awesome-app",
  "version": "1.0.0",
  "description": "멋진 Electron 앱",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  },
  "build": {
    "appId": "com.mycompany.myapp",
    "productName": "My Awesome App",
    "copyright": "Copyright © 2024 My Company",
    
    // 파일 포함/제외
    "files": [
      "main.js",
      "preload.js",
      "renderer/**/*",
      "assets/**/*",
      "node_modules/**/*"
    ],
    "extraResources": [
      {
        "from": "resources",
        "to": "resources",
        "filter": ["**/*"]
      }
    ],
    
    // Windows 설정
    "win": {
      "target": ["nsis", "portable"],
      "icon": "assets/icon.ico",
      "publisherName": "My Company"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "My Awesome App"
    },
    
    // macOS 설정
    "mac": {
      "target": ["dmg", "zip"],
      "icon": "assets/icon.icns",
      "category": "public.app-category.productivity",
      "hardenedRuntime": true,
      "gatekeeperAssess": false,
      "entitlements": "build/entitlements.mac.plist",
      "entitlementsInherit": "build/entitlements.mac.plist"
    },
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    
    // Linux 설정
    "linux": {
      "target": ["AppImage", "deb", "rpm"],
      "icon": "assets/icon.png",
      "category": "Utility"
    }
  }
}

🔄 Auto Updater 설정

npm install electron-updater --save

// main.js
const { autoUpdater } = require('electron-updater');
const log = require('electron-log');

// 로그 설정
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';

// 업데이트 체크
function checkForUpdates() {
  autoUpdater.checkForUpdatesAndNotify();
}

// 앱 준비 후 업데이트 체크
app.whenReady().then(() => {
  createWindow();
  
  // 5초 후 업데이트 체크 (앱이 완전히 로드된 후)
  setTimeout(checkForUpdates, 5000);
  
  // 1시간마다 업데이트 체크
  setInterval(checkForUpdates, 60 * 60 * 1000);
});

// 업데이트 이벤트 처리
autoUpdater.on('checking-for-update', () => {
  log.info('업데이트 확인 중...');
});

autoUpdater.on('update-available', (info) => {
  log.info('업데이트 가능:', info);
  
  // 사용자에게 알림
  dialog.showMessageBox({
    type: 'info',
    title: '업데이트 가능',
    message: '새로운 버전이 있습니다. 다운로드하시겠습니까?',
    buttons: ['다운로드', '나중에']
  }).then(result => {
    if (result.response === 0) {
      autoUpdater.downloadUpdate();
    }
  });
});

autoUpdater.on('update-not-available', (info) => {
  log.info('최신 버전 사용 중:', info);
});

autoUpdater.on('error', (err) => {
  log.error('업데이트 에러:', err);
});

autoUpdater.on('download-progress', (progressObj) => {
  let message = `다운로드 속도: ${progressObj.bytesPerSecond}`;
  message += ` - ${progressObj.percent}% 완료`;
  message += ` (${progressObj.transferred}/${progressObj.total})`;
  log.info(message);
  
  // 진행 상황을 렌더러에 전송
  mainWindow.webContents.send('download-progress', progressObj);
});

autoUpdater.on('update-downloaded', (info) => {
  log.info('업데이트 다운로드 완료:', info);
  
  dialog.showMessageBox({
    type: 'info',
    title: '업데이트 준비 완료',
    message: '업데이트가 다운로드되었습니다. 지금 재시작하시겠습니까?',
    buttons: ['재시작', '나중에']
  }).then(result => {
    if (result.response === 0) {
      autoUpdater.quitAndInstall();
    }
  });
});

// package.json에 publish 설정 추가
{
  "build": {
    "publish": [
      {
        "provider": "github",
        "owner": "your-username",
        "repo": "your-repo"
      }
    ]
  }
}

🧪 Jest로 단위 테스트 작성

npm install --save-dev jest @types/jest

// package.json
{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "testEnvironment": "node",
    "coverageDirectory": "coverage",
    "collectCoverageFrom": [
      "src/**/*.js",
      "!src/**/*.test.js"
    ]
  }
}

// utils.test.js
const { formatDate, calculateTotal } = require('./utils');

describe('Utils 함수 테스트', () => {
  test('날짜 포맷팅', () => {
    const date = new Date('2024-01-15');
    expect(formatDate(date)).toBe('2024-01-15');
  });

  test('합계 계산', () => {
    const items = [
      { price: 1000, quantity: 2 },
      { price: 2000, quantity: 1 }
    ];
    expect(calculateTotal(items)).toBe(4000);
  });

  test('빈 배열 처리', () => {
    expect(calculateTotal([])).toBe(0);
  });
});

🎭 Spectron으로 E2E 테스트

npm install --save-dev spectron

// e2e.test.js
const Application = require('spectron').Application;
const path = require('path');

describe('Electron 앱 E2E 테스트', () => {
  let app;

  beforeEach(async () => {
    app = new Application({
      path: path.join(__dirname, '../node_modules/.bin/electron'),
      args: [path.join(__dirname, '../main.js')],
      env: { NODE_ENV: 'test' }
    });
    await app.start();
  });

  afterEach(async () => {
    if (app && app.isRunning()) {
      await app.stop();
    }
  });

  test('앱이 정상적으로 시작됨', async () => {
    const isVisible = await app.browserWindow.isVisible();
    expect(isVisible).toBe(true);
  });

  test('창 제목이 올바름', async () => {
    const title = await app.client.getTitle();
    expect(title).toBe('My Awesome App');
  });

  test('버튼 클릭 동작', async () => {
    await app.client.click('#myButton');
    const text = await app.client.getText('#result');
    expect(text).toBe('버튼이 클릭되었습니다!');
  });

  test('메뉴 동작', async () => {
    await app.client.keys(['Control', 'n']);
    const windowCount = await app.client.getWindowCount();
    expect(windowCount).toBe(2);
  });
});

📝 마크다운 에디터 핵심 기능

• 실시간 미리보기
• 파일 저장/불러오기
• 다크 모드 지원
• 단축키 지원
• PDF 내보내기

// renderer.js
const marked = require('marked');
const hljs = require('highlight.js');

// 마크다운 설정
marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return hljs.highlightAuto(code).value;
  },
  breaks: true,
  gfm: true
});

const editor = document.getElementById('editor');
const preview = document.getElementById('preview');

// 실시간 미리보기
editor.addEventListener('input', debounce(() => {
  const markdown = editor.value;
  const html = marked.parse(markdown);
  preview.innerHTML = html;
}, 300));

// 파일 저장
document.getElementById('saveBtn').addEventListener('click', async () => {
  const content = editor.value;
  const result = await window.electronAPI.saveFile(content);
  if (result.success) {
    showNotification('파일이 저장되었습니다!');
  }
});

// 파일 열기
document.getElementById('openBtn').addEventListener('click', async () => {
  const result = await window.electronAPI.openFile();
  if (result.success) {
    editor.value = result.content;
    editor.dispatchEvent(new Event('input'));
  }
});

// PDF 내보내기
document.getElementById('exportBtn').addEventListener('click', async () => {
  const html = preview.innerHTML;
  await window.electronAPI.exportPDF(html);
});

📊 시스템 모니터 핵심 기능

// main.js
const si = require('systeminformation');

// 시스템 정보 수집
async function getSystemInfo() {
  const [cpu, mem, disk, network] = await Promise.all([
    si.currentLoad(),
    si.mem(),
    si.fsSize(),
    si.networkStats()
  ]);

  return {
    cpu: {
      usage: cpu.currentLoad.toFixed(2),
      cores: cpu.cpus.length
    },
    memory: {
      total: (mem.total / 1024 / 1024 / 1024).toFixed(2),
      used: (mem.used / 1024 / 1024 / 1024).toFixed(2),
      percentage: ((mem.used / mem.total) * 100).toFixed(2)
    },
    disk: disk.map(d => ({
      mount: d.mount,
      size: (d.size / 1024 / 1024 / 1024).toFixed(2),
      used: (d.used / 1024 / 1024 / 1024).toFixed(2),
      percentage: d.use.toFixed(2)
    })),
    network: network.map(n => ({
      interface: n.iface,
      rx: (n.rx_sec / 1024 / 1024).toFixed(2),
      tx: (n.tx_sec / 1024 / 1024).toFixed(2)
    }))
  };
}

// 1초마다 정보 업데이트
setInterval(async () => {
  const info = await getSystemInfo();
  mainWindow.webContents.send('system-info', info);
}, 1000);

// renderer.js - Chart.js로 시각화
const ctx = document.getElementById('cpuChart').getContext('2d');
const cpuChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'CPU 사용률 (%)',
      data: [],
      borderColor: '#667eea',
      backgroundColor: 'rgba(102, 126, 234, 0.1)',
      tension: 0.4
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        max: 100
      }
    },
    animation: {
      duration: 0
    }
  }
});

window.electronAPI.onSystemInfo((info) => {
  // CPU 차트 업데이트
  const now = new Date().toLocaleTimeString();
  cpuChart.data.labels.push(now);
  cpuChart.data.datasets[0].data.push(info.cpu.usage);
  
  // 최근 60개 데이터만 유지
  if (cpuChart.data.labels.length > 60) {
    cpuChart.data.labels.shift();
    cpuChart.data.datasets[0].data.shift();
  }
  
  cpuChart.update();
  
  // 메모리 정보 업데이트
  document.getElementById('memoryUsage').textContent = 
    `${info.memory.used} GB / ${info.memory.total} GB (${info.memory.percentage}%)`;
});

📸 스크린샷 도구 핵심 기능

// main.js
const { desktopCapturer, screen } = require('electron');

// 화면 캡처
ipcMain.handle('capture-screen', async () => {
  const sources = await desktopCapturer.getSources({
    types: ['screen'],
    thumbnailSize: screen.getPrimaryDisplay().workAreaSize
  });

  return sources[0].thumbnail.toDataURL();
});

// 특정 영역 캡처
ipcMain.handle('capture-area', async (event, bounds) => {
  const sources = await desktopCapturer.getSources({
    types: ['screen'],
    thumbnailSize: {
      width: bounds.width,
      height: bounds.height
    }
  });

  return sources[0].thumbnail.toDataURL();
});

// renderer.js
// 전체 화면 캡처
document.getElementById('captureBtn').addEventListener('click', async () => {
  const dataUrl = await window.electronAPI.captureScreen();
  
  // 이미지 표시
  const img = document.createElement('img');
  img.src = dataUrl;
  document.getElementById('preview').appendChild(img);
  
  // 저장 옵션 제공
  showSaveDialog(dataUrl);
});

// 영역 선택 캡처
document.getElementById('areaBtn').addEventListener('click', () => {
  // 반투명 오버레이 표시
  const overlay = document.createElement('div');
  overlay.className = 'selection-overlay';
  document.body.appendChild(overlay);
  
  let startX, startY;
  
  overlay.addEventListener('mousedown', (e) => {
    startX = e.clientX;
    startY = e.clientY;
  });
  
  overlay.addEventListener('mouseup', async (e) => {
    const bounds = {
      x: Math.min(startX, e.clientX),
      y: Math.min(startY, e.clientY),
      width: Math.abs(e.clientX - startX),
      height: Math.abs(e.clientY - startY)
    };
    
    const dataUrl = await window.electronAPI.captureArea(bounds);
    overlay.remove();
    
    showPreview(dataUrl);
  });
});

⏱️ 성능 측정 도구

// 1. 메모리 사용량 측정
function logMemoryUsage() {
  const usage = process.memoryUsage();
  console.log({
    rss: `${(usage.rss / 1024 / 1024).toFixed(2)} MB`,
    heapTotal: `${(usage.heapTotal / 1024 / 1024).toFixed(2)} MB`,
    heapUsed: `${(usage.heapUsed / 1024 / 1024).toFixed(2)} MB`,
    external: `${(usage.external / 1024 / 1024).toFixed(2)} MB`
  });
}

// 주기적으로 측정
setInterval(logMemoryUsage, 10000);

// 2. 실행 시간 측정
function measurePerformance(fn, label) {
  const start = performance.now();
  fn();
  const end = performance.now();
  console.log(`${label}: ${(end - start).toFixed(2)}ms`);
}

// 사용 예시
measurePerformance(() => {
  // 무거운 작업
  processLargeData();
}, '데이터 처리');

// 3. 렌더링 성능 측정
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.duration.toFixed(2)}ms`);
  }
});

observer.observe({ entryTypes: ['measure', 'navigation'] });

// 4. Chrome DevTools Performance API
performance.mark('start-heavy-task');
heavyTask();
performance.mark('end-heavy-task');
performance.measure('heavy-task', 'start-heavy-task', 'end-heavy-task');

// 5. 앱 시작 시간 측정
const startTime = Date.now();

app.whenReady().then(() => {
  createWindow();
  
  mainWindow.once('ready-to-show', () => {
    const loadTime = Date.now() - startTime;
    console.log(`앱 시작 시간: ${loadTime}ms`);
    
    // 분석 서비스로 전송
    analytics.track('app-start-time', { duration: loadTime });
  });
});

🎉 Electron 마스터의 길은 이제 시작이야! 🎉

계속 배우고, 실험하고, 만들어봐!
당신의 아이디어가 현실이 되는 순간을 기대할게! 😊