[Electron] 컨텍스트 격리(Context Isolation): 보안과 TypeScript로 더 안전하게

컨텍스트 격리(Context Isolation)란?컨텍스트 격리는 Electron의 렌더러 프로세스에서 실행되는 JavaScript와 Preload 스크립트의 실행 환경을 분리하는 보안 메커니즘입니다. 즉, 웹 콘텐츠가 Electron 내부 API나 프리로드 스크립트에서 정의한 객체에 직접 접근하는 것을 차단합니다.기본적으로 Electron 5.0.0부터 도입되었으며, Electron 12.0.0부터는 기본값으로 활성화되었습니다(contextIsolation: true) 이 기능을 활성화하면 window 객체가 프리로드 스크립트와 웹 콘텐츠에서 서로 다른 인스턴스로 작동하게 됩니다. 예를 들어, 프리로드 스크립트에서 window.hello = 'wave'를 설정하더라도, 웹 콘텐츠에서는 window.he..

• format_list_bulleted Electron
• · 2025. 3. 24.
• textsms

[Electron] 프로세스 모델: 메인과 렌더러의 조화로운 협력

Electron의 프로세스 구조Electron은 Chromium과 Node.js를 결합한 프레임워크로, 각 앱은 다음과 같은 두 가지 프로세스로 나뉘어 동작합니다.메인 프로세스:  애플리케이션의 중심 역할을 하며, 단일 인스턴스로 실행됩니다.렌더러 프로세스: 각 창(window)마다 별도로 생성되며, UI를 렌더링합니다.메인 프로세스의 역할메인 프로세스는 애플리케이션의 진입점으로, Node.js 환경에서 실행됩니다. 이 프로세스는 애플리케이션의 창을 생성하고 관리하는 역할을 하며, 운영 체제와 상호작용할 수 있습니다.앱 생명주기 관리: app 모듈을 통해 앱의 시작, 종료, 활성화 등을 제어합니다.창 생성 및 관리: BrowserWindow를 사용해 UI 창을 생성하고 조작합니다.Node.js 환경: 파..

• format_list_bulleted Electron
• · 2025. 3. 24.
• textsms

[Electron] 튜토리얼 Part 6: 앱 배포 및 자동 업데이트

GitHub Publisher 설정Electron Forge는 GitHub Publisher 플러그인을 통해 앱의 배포 파일을 GitHub Releases에 업로드할 수 있습니다. 먼저, 아래와 같이 Publisher 모듈을 설치합니다.npm install --save-dev @electron-forge/publisher-github설치 후, forge.config.js 파일에 GitHub Publisher를 설정합니다. 예제에서는 배포를 초안(draft) 상태로 생성하여 나중에 GitHub 웹사이트에서 릴리즈 노트를 작성할 수 있도록 구성합니다.// forge.config.jsmodule.exports = { packagerConfig: { // 운영체제별 서명 옵션 등을 여기에 설정할 수 있습..

• format_list_bulleted Electron
• · 2025. 3. 24.
• textsms

[Electron] 튜토리얼 Part 5: 앱 패키징 및 배포하기

Electron으로 앱 개발을 마무리했다면, 이제 사용자에게 배포할 준비를 해야 합니다. Electron은 기본적으로 패키징 도구를 제공하지 않으므로, Electron Forge같은 외부 도구를 사용해 앱을 빌드하고 플랫폼별 배포 파일로 변환해야 합니다. Electron Forge 설정하기Electron Forge는 복잡한 패키징 과정을 단순화해주는 도구로, 다양한 플랫폼에 맞는 배포 파일을 쉽게 생성할 수 있습니다.터미널에서 다음 명령어로 Electron Forge CLI를 설치합니다npm install --save-dev @electron-forge/cli기존 Electron 프로젝트를 Forge 형식으로 변환합니다npx electron-forge importforge.config.js 파일을 생성하..

• format_list_bulleted Electron
• · 2025. 3. 20.
• textsms

[Electron] 튜토리얼 Part 4: 기능 확장

렌더러 프로세스의 웹 기술 활용렌더러 프로세스는 HTML, CSS, JavaScript를 기반으로 동작하므로, 웹 개발 기술을 그대로 활용 가능합니다.UI 개선: 반응형 레이아웃, 애니메이션, SVG 그래픽 등을 추가해 사용자 경험을 향상시킵니다.기능 확장: 할 일 관리, 실시간 채팅, 차트 시각화 같은 기능을 구현할 수 있습니다.운영체제 및 Node.js와의 통합메인 프로세스를 통해 운영체제와 Node.js 기능을 활용 가능합니다. 이를 통해 네이티브 기능을 구현할 수 있습니다.네이티브 알림: 사용자에게 데스크탑 알림을 표시합니다.파일 시스템 접근: 파일 읽기/쓰기를 통해 데이터를 저장하거나 불러옵니다.시스템 통합: 단축키, 트레이, 메뉴 등 OS와의 상호작용을 지원합니다.네이티브 알림과 파일 저장 기..

• format_list_bulleted Electron
• · 2025. 3. 20.
• textsms

[Electron] 튜토리얼 Part 3: Preload 스크립트로 안전한 통신 구현하기

Electron은 메인 프로세스와 렌더러 프로세스로 나뉘어 동작하며, 각각의 역할과 권한이 다릅니다.메인 프로세스는 Node.js와 OS에 접근할 수 있지만, 렌더러 프로세스는 기본적으로 보안상의 이유로 이런 권한이 제한됩니다.preload 스크립트를 이 두 프로세스 간의 안전한 연결을 가능하게 해주는 핵심 도구입니다.Preload 스크립트의 역할Preload 스크립트는 렌더러 프로세스가 HTML을 로드하기 전에 실행되는 JavaScript 파일입니다. 이 스크립트는 Node.js와 Electron API에 제한적으로 접근할 수 있으며, 렌더러와 메인 간의 안전한 다리 역할을 합니다.보안 강화: 렌더러에 전체 Node.js 환경을 노출하지 않고, 필요한 기능만 선택적으로 제공합니다.API 중개: cont..

• format_list_bulleted Electron
• · 2025. 3. 19.
• textsms