Electron TSX Production 환경에서 윈도우에 로딩이 되지 않는 문제 해결

Electron TSX Production 환경에서 윈도우에 로딩이 되지 않는 문제 해결

Electron과 TypeScript (TSX)를 사용하여 Single Page Application (SPA)을 구축하는 경우, Production 환경에서 여러 윈도우를 띄우면서 클라이언트 사이드 라우팅을 적절히 관리하는 방법에 대해 자주 질문을 받습니다. 특히, file:// 프로토콜을 사용하는 프로덕션 환경에서 SPA 구성을 유지하면서 멀티 윈도우를 효과적으로 띄우는 방법에 대한 해결책을 제공하고자 합니다.

문제 상황

• Production 환경에서 file:// 프로토콜을 사용할 때 SPA의 클라이언트 사이드 라우팅이 제대로 작동하지 않는 문제가 발생할 수 있습니다.
• 멀티 윈도우를 SPA 구성으로 띄우고자 할 때, 각 윈도우에 대한 적절한 라우팅 처리가 필요합니다.

왜 file:// 프로토콜인가?

file:// 프로토콜을 사용하는 주된 이유는 Electron 애플리케이션의 특성과 프로덕션 환경에서의 요구 사항 때문입니다. Electron 앱은 웹 기술을 사용하여 데스크탑 애플리케이션을 개발할 수 있도록 하는 크로스 플랫폼 프레임워크입니다. 이러한 앱은 일반적으로 내부적으로 웹 서버를 호스팅하지 않고, 대신 로컬 파일 시스템에서 직접 HTML, CSS, JavaScript 파일 등을 로드하여 사용자 인터페이스를 렌더링합니다.

프로덕션 환경에서 file:// 프로토콜을 사용하는 것은 Electron 애플리케이션의 자체 포함성, 보안, 성능 측면에서 큰 이점을 제공합니다. 클라이언트 사이드 라우팅과 SPA 구조를 효과적으로 지원하기 위해 HashRouter와 같은 해시 기반 라우팅 방식을 사용하여, file:// 프로토콜의 제한을 우회하고 사용자 경험을 최적화할 수 있습니다.

file:// 프로토콜의 사용 이유:

1. 자체 포함성(Self-Contained): Electron 앱은 외부 서버에 의존하지 않고 독립적으로 실행될 수 있습니다. file:// 프로토콜을 사용하면, 애플리케이션은 네트워크 연결 없이도 모든 리소스를 로컬에서 직접 로드할 수 있어, 오프라인 상태에서도 작동 가능합니다.

2. 보안: Electron에서는 웹 콘텐츠의 보안을 매우 중요하게 다룹니다. file:// 프로토콜을 사용하면, CORS(Cross-Origin Resource Sharing) 정책과 같은 웹 기반 보안 제약 사항을 우회할 수 있습니다. 이는 로컬 리소스에 대한 접근을 보다 통제된 방식으로 관리할 수 있게 해줍니다.

3. 성능: 로컬 파일 시스템에서 리소스를 직접 로드하는 것은 네트워크를 통해 리소스를 요청하는 것보다 일반적으로 더 빠릅니다. 이는 애플리케이션의 초기 로딩 시간을 단축시키고, 전반적인 성능을 향상시킵니다.

http:// 프로토콜과의 비교:

• 개발 편의성: 개발 중에는 http:// 프로토콜을 사용하여 로컬 개발 서버(Vite, Webpack Dev Server 등)를 통해 애플리케이션을 서빙하는 것이 일반적입니다. 이 방법은 핫 리로딩과 같은 개발 편의 기능을 제공합니다.
• 프로덕션 환경에서의 도전 과제: 프로덕션 환경에서 HTTP 서버를 내장하거나 외부 서버에 호스팅하는 방식을 선택할 수 있으나, 이는 추가적인 보안 고려 사항, 리소스 관리, 배포 복잡성 등을 수반합니다.

해결 방안

1. HashRouter를 사용한 클라이언트 사이드 라우팅

React Router의 HashRouter 컴포넌트를 사용하여 클라이언트 사이드 라우팅을 구현합니다. HashRouter는 URL의 해시(#) 부분을 사용하여 라우트를 관리하기 때문에, file:// 프로토콜과의 호환성 문제를 해결할 수 있습니다.

import { HashRouter, Route, Routes } from "react-router-dom";
// 컴포넌트 임포트

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/capture/:windowId" element={<Capture />} />
        // 다른 라우트 구성
      </Routes>
    </HashRouter>
  );
}

2. Electron 윈도우 로딩 URL 구성

Electron의 메인 프로세스에서 각 BrowserWindow 인스턴스를 생성할 때, 클라이언트 사이드 라우팅에 맞는 URL을 로드합니다. Production 환경과 Development 환경에 따라 다르게 URL을 구성합니다.

const captureUrl = process.env.NODE_ENV === "production"
  ? `file://${path.join(__dirname, "../index.html")}#/capture/${windowId}`
  : `http://localhost:3000/#/capture/${windowId}`;

3. WindowManager 클래스 구현

WindowManager 클래스를 통해 메인 윈도우와 캡처 윈도우를 관리합니다. 각 윈도우를 생성할 때, 위에서 구성한 URL을 loadURL 메서드를 사용하여 로드합니다.

class WindowManager {
  // 클래스 초기 구성 및 메서드

  createCaptureWindowForDisplay(display: Electron.Display, thumbnail: Electron.NativeImage) {
    const { x, y, width, height } = display.bounds;
    const captureWindow = new BrowserWindow({/* 윈도우 설정 */});
    const windowId = captureWindow.id;
    const captureUrl = process.env.NODE_ENV === "production"
      ? `file://${path.join(__dirname, "../index.html")}#/capture/${windowId}`
      : `http://localhost:3000/#/capture/${windowId}`;

    captureWindow.loadURL(captureUrl);
    // 이벤트 리스너 및 추가 로직
  }
}

4. 고려 사항

• 보안 설정: Electron에서 nodeIntegration, contextIsolation 등의 웹 보안 관련 설정을 적절히 관리합니다.
• 성능 최적화: 로컬 파일 시스템에서 리소스를 로드하는 경우와 비교하여, 클라이언트 사이드 라우팅을 사용할 때의 성능 영향을 고려합니다.
• 라우팅 관리: HashRouter를 사용함으로써 SPA 내에서 클라이언트 사이드 라우팅을 효과적으로 관리할 수 있습니다.

이러한 방법을 통해, Electron 애플리케이션에서 SPA 구성을 유지하면서도 멀티 윈도우를 효과적으로 띄우고 관리할 수 있습니다. 클라이언트 사이드 라우팅을 적용함으로써, 사용자 경험을 개선하고 애플리케이션의 유연성을 높일 수 있습니다.