Electron 프레임워크 기술에 대한 소개 및 구현?

1. Electron 프레임워크 기술에 대한 소개

Electron은 웹 기술(HTML, CSS 및 JavaScript)을 사용하여 데스크톱 애플리케이션을 개발할 수 있게 해주는 오픈 소스 프레임워크입니다. 주로 웹 개발자들이 데스크톱 애플리케이션을 만들 때 사용하며, 크로스 플랫폼(Windows, macOS, Linux)에서 동작하는 애플리케이션을 구축할 수 있도록 도와줍니다.

 

장점 : 크로스 플랫폼 개발,  웹 기술 활용,  네이티브 기능 접근,  개발자 도구와 생태계

1. 크로스 플랫폼 개발: Electron을 사용하면 한 번의 개발로 여러 플랫폼에서 동작하는 애플리케이션을 만들 수 있습니다. 이는 개발 비용과 시간을 절약해줍니다.

2. 웹 기술 활용: 웹 개발자들은 이미 익숙한 HTML, CSS 및 JavaScript를 사용하여 데스크톱 애플리케이션을 개발할 수 있습니다. 이로 인해 웹 개발자들이 데스크톱 애플리케이션 개발에 빠르게 적응할 수 있습니다.

3. 네이티브 기능 접근: Electron은 Node.js를 통해 네이티브 기능에 접근할 수 있습니다. 이를 통해 데스크톱 애플리케이션은 파일 시스템, 네트워크 등 다양한 기능을 활용할 수 있습니다.

4. 개발자 도구와 생태계: Electron은 활발한 개발자 커뮤니티와 풍부한 생태계를 가지고 있습니다. 다양한 확장 패키지와 도구들을 활용하여 개발 및 디버깅을 더 효율적으로 수행할 수 있습니다.

단점 : 성능과 메모리 사용,  앱 크기,  보안과 취약점,  랜더러 프로세스 분리

1. 성능과 메모리 사용: Electron 애플리케이션은 Chromium 엔진과 Node.js 런타임을 함께 사용하기 때문에 상대적으로 메모리를 많이 사용하고 시작 속도가 느릴 수 있습니다. 특히 경량화가 필요한 애플리케이션에는 적합하지 않을 수 있습니다.

2. 앱 크기: Electron 애플리케이션은 Chromium과 Node.js를 함께 포함하기 때문에 파일 크기가 상대적으로 큽니다. 이로 인해 다운로드 및 설치 시간이 길어질 수 있습니다.

3. 보안과 취약점: Electron은 Chromium 엔진의 버전을 사용하며, 이에 따라 웹 브라우징과 관련된 보안 취약점이 영향을 미칠 수 있습니다. 주기적으로 업데이트를 수행하여 보안 문제를 관리해야 합니다.

4. 렌더러 프로세스 분리: Electron의 렌더러 프로세스 분리는 안정성과 보안을 향상시키지만, 애플리케이션 전체 구조를 복잡하게 만들 수 있습니다.

결론적으로, Electron은 웹 개발자들이 데스크톱 애플리케이션을 쉽게 개발하고 배포할 수 있도록 도와주는 강력한 프레임워크이지만, 성능과 메모리 사용, 앱 크기 등의 측면에서 고려해야 할 점들도 존재합니다. 

 

2. 구현 코드

사용한 기술스텍 : React, Electron, Css 사용.

const {app,BrowserWindow} = require('electron');
 
const remote = require('@electron/remote/main')
remote.initialize()
 
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            enableRemoteModule: true
        }
    })
 
    win.loadURL('http://localhost:3000')
 
    remote.enable(win.webContents);
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', function() {
    if(process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', function() {
    if(BrowserWindow.getAllWindows().length === 0) createWindow()
})

1. app은 애플리케이션의 생명 주기와 관련된 이벤트와 동작을 관리하며, BrowserWindow는 브라우저 창을 생성하고 제어하는 데 사용됩니다.

2. const remote = require('@electron/remote/main') : 렌더러 프로세스에서 메인 프로세스의 모듈과 상호 작용할 수 있게 해줍니다.

3. remote.initialize() : Electron Remote 모듈을 초기화합니다.

4. createWindow() : 함수는 브라우저 창을 생성하고 설정하는 역할을 합니다. BrowserWindow객체를 생성하여 창의 크기와 웹 페이지 렌더링 설정을 지정합니다.

6. win.loadURL('http://localhost:3000'): 생성한 브라우저 창에 지정된 URL(`http://localhost:3000`)을 로드합니다.

7. remote.enable(win.webContents) : 생성한 브라우저 창의 웹 컨텐츠를 원격으로 제어할 수 있도록 활성화합니다.

8. app.on('ready', createWindow) : 애플리케이션이 준비되었을 때 createWindow()를 호출하여 초기 창을 생성합니다.

9. app.on('window-all-closed', function() { ... }) : 모든 창이 닫혔을 때 애플리케이션을 종료합니다. 다만, macOS의 경우에는 마지막 창이 닫혀도 애플리케이션은 종료되지 않도록 합니다.

10. app.on('activate', function() { ... }) : 애플리케이션이 활성화되었을 때, 창이 없으면 새 창을 생성합니다. 

 

부가설명 => darwin : macOS,   win32 : Windows,   linux : Linux

 

3. 구현 영상

 

Electron은 서버냐? 클라이언트냐?