노트

Electron 앱 구조

Electron Process Model

프런트엔드#security#architecture · 연결된 개념 4개

쉽게 말하면

Electron 앱은 손님을 맞는 창구와 금고가 있는 안쪽 사무실로 나뉜 은행 같아요. 웹 화면은 창구인 렌더러에서 돌고, 파일 저장 같은 일은 정해진 신청서인 IPC로만 안쪽 메인 프로세스에 부탁해요.

비유가 깨지는 곳 창구 직원이 금고 열쇠를 직접 쥐면 위험해요. 그래서 nodeIntegration을 끄고 contextIsolation을 켜고, preload로 노출하는 API를 좁게 둬서 렌더러에서 XSS가 터져도 OS까지 닿지 않게 해요.

Electron은 Chromium과 Node.js를 묶어 웹 기술(HTML·CSS·JavaScript)로 데스크톱 앱을 만드는 프레임워크다. 앱은 OS(Operating System) 권한을 가진 메인 프로세스(Main Process) 하나와, 창마다 하나씩 뜨는 렌더러 프로세스(Renderer Process)로 나뉜다.

  • 메인 프로세스: Node.js 환경. 앱 생명주기, BrowserWindow 생성, 파일 시스템·메뉴·트레이·알림 같은 OS 작업을 맡는다
  • 렌더러 프로세스: 각 창 안의 웹 페이지. 보통의 브라우저처럼 화면을 그리고, React 같은 UI 라이브러리가 여기서 돈다
  • preload 스크립트: 둘 사이의 다리. contextBridge.exposeInMainWorld()로 허용한 API(Application Programming Interface)만 window에 노출한다
  • IPC(Inter-Process Communication): 렌더러가 ipcRenderer.invoke()로 요청하면 메인이 ipcMain.handle()로 실제 작업(파일 저장 등)을 하고 결과를 돌려준다
Renderer ──window.api.save()──▶ Preload ──ipcRenderer.invoke──▶ Main(fs 접근)

보안 기본값

  • contextIsolation: true: preload와 페이지의 JS 컨텍스트를 분리한다
  • nodeIntegration: false: 렌더러가 Node API를 직접 쓰지 못하게 한다. 렌더러에서 외부 콘텐츠나 XSS(Cross-Site Scripting)가 실행돼도 OS까지 닿지 않게 하려는 것이다
  • 메인 프로세스는 브라우저의 동일 출처 정책 같은 제약을 받지 않으므로, preload로 노출하는 API는 좁게 둔다

배포와 코드 서명(Code Signing)

macOS Gatekeeper(공증 포함)와 Windows SmartScreen은 서명 없는 앱을 막거나 경고한다. 서명은 바이너리가 변조되지 않았음을 증명하고, macOS의 자동 업데이트(autoUpdater)와 앱 스토어 배포에도 필요하다.

렌더러의 로컬 저장소로는 IndexedDB를 많이 쓴다. 원격 호출을 함수처럼 감싸는 IPC의 발상은 RPC와 닮았다.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 하이드레이션

    하이드레이션(Hydration)은 서버가 미리 렌더해 보낸 HTML(HyperText Markup Language)을 클라이언트에서 다시 만들지 않고, 그 DOM(Document Object Model)에 React 컴포넌트를 연결해 이벤트 핸들러와 상태를 붙이는 과정이다(hydrateRoot). Dan Abramov의 비유로는 "마른 HTML에 상호작용이라는 물을 주는 일"이다.

  • Pages Router에서 App Router로

    App Router는 Next.js 13에서 도입된 app/ 디렉터리 기반 라우터로, 서버 컴포넌트·중첩 레이아웃(Nested Layouts)·스트리밍을 기본으로 한다. pages/ 기반의 Pages Router에서 옮길 때 바뀌는 생각을 정리한다.

  • 웹뷰 브리지(웹↔네이티브 통신)

    앱 안의 웹뷰에서 웹과 네이티브가 서로 말을 거는 길. User-Agent 표식, 메시지 핸들러, 스크립트 실행, URL(딥링크)이 있다.

  • 로컬 퍼스트 아키텍처

    클라이언트 기기의 로컬 데이터를 진실의 원천(Source of Truth)으로 삼고, 서버는 동기화와 백업을 맡는 설계 방식. 전통적인 "서버가 원천, 클라이언트는 요청해서 그린다" 구조를 뒤집어 로컬 DB → UI 렌더링 → 백그라운드 동기화 순서로 흐른다.

  • 'use client'와 클라이언트 경계

    'use client'는 파일 맨 위에 적어 "여기서부터 클라이언트 번들에 들어간다"는 경계를 선언하는 지시어(Directive)다. 경계 파일과 그 파일이 import하는 모듈은 모두 클라이언트 컴포넌트가 된다. state, Effect, 이벤트 핸들러, 브라우저 API(Application Programming Interface)가 필요한 곳에 쓴다.

보기 옵션