Skip to main content

BrowserView에서 WebContentsView로 마이그레이션하기

· 6 min read
yangannyx
yangannyx

Electron 30부터 BrowserView는 더 이상 사용되지 않으며, WebContentView로 대체되었다. 다행히도 마이그레이션은 비교적 간단하다.

Electron은 Chromium의 UI 프레임워크인 Views API와의 일관성을 유지하기 위해 BrowserView에서 WebContentsView로 전환하고 있다. WebContentsView는 Chromium의 렌더링 파이프라인과 직접 연결된 재사용 가능한 뷰를 제공하며, 이를 통해 향후 업그레이드가 간소화되고 개발자가 Electron 앱에 비웹 UI 엘리먼트를 통합할 수 있는 가능성이 열린다. WebContentsView를 채택함으로써 애플리케이션은 다가오는 업데이트에 대비할 수 있을 뿐만 아니라 코드 복잡성이 줄어들고 장기적으로 잠재적인 버그가 감소하는 이점을 얻는다.

BrowserWindow와 BrowserView에 익숙한 개발자라면 BrowserWindow와 WebContentsView가 각각 BaseWindow와 View 기본 클래스를 상속받은 서브클래스라는 점을 주목해야 한다. 사용 가능한 인스턴스 변수와 메서드를 완전히 이해하려면 이 기본 클래스에 대한 문서를 참고하는 것이 좋다.

마이그레이션 단계​

1. Electron을 30.0.0 이상 버전으로 업그레이드​

warning

Electron 릴리스에는 애플리케이션에 영향을 미칠 수 있는 주요 변경 사항이 포함될 수 있다. 이 마이그레이션을 진행하기 전에 먼저 애플리케이션에서 Electron 업그레이드를 테스트하고 적용하는 것이 좋다. 각 Electron 주요 버전의 주요 변경 사항 목록은 여기에서 확인할 수 있으며, Electron 블로그의 각 주요 버전 릴리스 노트에서도 확인할 수 있다.

2. 애플리케이션에서 BrowserView를 사용하는 부분 파악하기​

이를 위해 코드베이스에서 new BrowserView(를 검색해 보는 방법이 있다. 이렇게 하면 애플리케이션이 BrowserView를 어떻게 사용하고 있는지, 그리고 몇 군데를 마이그레이션해야 하는지 대략적인 감을 잡을 수 있다.

tip

대부분의 경우, 애플리케이션에서 새로운 BrowserView를 생성하는 각각의 인스턴스는 서로 독립적으로 마이그레이션할 수 있다.

3. BrowserView 사용 부분 마이그레이션​

  1. 인스턴스 생성 부분을 마이그레이션한다. WebContentsView와 BrowserView의 생성자는 거의 동일한 형태를 가지고 있기 때문에 비교적 간단하다. 둘 다 webPreferences 파라미터를 통해 WebPreferences를 받는다.

    - this.tabBar = new BrowserView({
    + this.tabBar = new WebContentsView({
    info

    기본적으로 WebContentsView는 흰색 배경으로 인스턴스화되지만, BrowserView는 투명한 배경으로 인스턴스화된다.
    WebContentsView에서 투명한 배경을 얻으려면 배경색을 RGBA 헥스 값으로 설정하고 알파 채널을 00으로 지정한다:

    + this.webContentsView.setBackgroundColor("#00000000");

  2. BrowserView가 부모 윈도우에 추가되는 부분을 마이그레이션한다.

    - this.browserWindow.addBrowserView(this.tabBar)
    + this.browserWindow.contentView.addChildView(this.tabBar);

  3. 부모 윈도우에서 BrowserView 인스턴스 메서드 호출을 마이그레이션한다.

    이전 메서드새로운 메서드참고 사항
    win.setBrowserViewwin.contentView.removeChildView + win.contentView.addChildView
    win.getBrowserViewwin.contentView.children
    win.removeBrowserViewwin.contentView.removeChildView
    win.setTopBrowserViewwin.contentView.addChildView기존 뷰에 addChildView를 호출하면 해당 뷰를 맨 위로 재정렬한다.
    win.getBrowserViewswin.contentView.children

  4. setAutoResize 인스턴스 메서드를 리사이즈 리스너로 마이그레이션한다.

    - this.browserView.setAutoResize({
    -   vertical: true,
    - })

    + this.browserWindow.on('resize', () => {
    +   if (!this.browserWindow || !this.webContentsView) {
    +     return;
    +   }
    +   const bounds = this.browserWindow.getBounds();
    +   this.webContentsView.setBounds({
    +     x: 0,
    +     y: 0,
    +     width: bounds.width,
    +     height: bounds.height,
    +    });
    +  });
    tip

    browserView.webContents와 browserView.setBounds, browserView.getBounds, browserView.setBackgroundColor 인스턴스 메서드의 기존 사용법은 마이그레이션할 필요가 없으며, WebContentsView 인스턴스에서 바로 작동한다!

4. 변경 사항 테스트 및 커밋​

문제가 발생한가요? Electron의 이슈 트래커에서 WebContentsView 태그를 확인해 보고, 당신이 겪고 있는 문제가 이미 보고되었는지 확인하세요. 해당 문제가 없다면 새로운 버그 리포트를 추가해도 좋습니다. 테스트 케이스 예제를 포함하면 문제를 더 효율적으로 처리할 수 있습니다.

축하합니다! WebContentsView로 마이그레이션을 성공적으로 완료했습니다! 🎉