Electron 아키텍처: 메인 프로세스와 렌더러 프로세스
Electron의 다중 프로세스 모델을 이해합니다. 메인 프로세스는 네이티브 API를, 렌더러 프로세스는 React UI를 담당합니다.
Electron 아키텍처: 메인 프로세스와 렌더러 프로세스은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Electron이란 무엇인가요
Electron은 Chromium(웹 렌더링용)과 Node.js(네이티브 API 액세스용)를 결합한 프레임워크로, 개발자가 익숙한 웹 기술을 사용하여 여러 플랫폼용 데스크톱 애플리케이션을 만들 수 있게 합니다. React 앱은 Chromium 브라우저 창 안에서 실행되고, Node.js를 통해 운영 체제 기능에 접근할 수 있습니다.
메인 프로세스
메인 프로세스는 Electron 애플리케이션의 진입점입니다. 애플리케이션 수명 주기를 관리하고, 창을 생성하고 제어하며, 네이티브 OS 상호작용을 처리합니다. 렌더러 프로세스를 생성하고 Node.js API와 기반 운영 체제에 완전히 접근할 수 있습니다.
렌더러 프로세스
각 BrowserWindow는 자체 렌더러 프로세스를 생성하며, 이 프로세스는 Chromium을 실행하고 React 애플리케이션을 구동합니다. 창마다 렌더러 프로세스가 하나씩 존재하며, 일반적인 브라우저 탭과 매우 비슷하게 작동하여 HTML, CSS, JavaScript를 렌더링합니다.
메인 프로세스의 기능
메인 프로세스는 Node.js에 완전히 접근할 수 있으므로 파일 시스템을 읽고 쓸 수 있고, 네이티브 메뉴를 만들고, 시스템 트레이를 관리하고, 자식 프로세스를 생성하고, 하드웨어와 상호작용할 수 있습니다. 이러한 기능은 보안상의 이유로 기본적으로 렌더러에서 사용할 수 없습니다.
렌더러 프로세스 샌드박스 처리
contextIsolation이 true로 설정되면(현재의 기본 설정), 렌더러 프로세스는 샌드박스 처리되어 Node.js API에 직접 접근할 수 없습니다. 이 보안 모델은 악성 웹 콘텐츠가 파일 시스템에 접근하거나 임의의 시스템 명령을 실행하지 못하도록 합니다.
IPC: 프로세스 간 통신 통로
프로세스 간 통신(IPC)은 메인 프로세스와 렌더러 프로세스가 메시지를 주고받을 수 있게 하는 메커니즘입니다. 메인 프로세스는 ipcMain을 사용하여 메시지를 수신하고 응답하며, 렌더러는 ipcRenderer를 사용하여 메시지를 보냅니다. 모든 통신은 비동기 방식의 메시지 기반으로 이루어집니다.
프리로드 스크립트
프리로드 스크립트는 특별한 중간 역할을 합니다. 렌더러 프로세스의 컨텍스트에서 실행되면서도 페이지 콘텐츠가 로드되기 전에 Node.js API에 접근할 수 있습니다. 따라서 샌드박스 처리된 렌더러와 권한이 있는 메인 프로세스를 연결하는 안전한 통로가 됩니다.
contextBridge: 안전한 API 노출
contextBridge.exposeInMainWorld를 사용하면 프리로드 스크립트가 안전하고 엄선된 API를 렌더러에 선택적으로 노출할 수 있습니다. 렌더러는 Node.js나 Electron 내부 기능에 직접 접근하지 않고도 노출된 함수를 호출할 수 있으므로, 강력한 보안 경계를 유지할 수 있습니다.
React에서 노출된 API에 접근하기
contextBridge가 "api"와 같은 이름으로 API를 노출하면 React 컴포넌트에서 window.api.myFunction()을 통해 해당 API를 호출할 수 있습니다. 일반적인 JavaScript 함수를 호출하는 것처럼 느껴지지만, 내부적으로는 IPC를 통해 메인 프로세스로 전달됩니다.
보안 모델 요약
contextIsolation이 활성화되면 Electron 보안 모델은 렌더러에서 Node.js에 직접 접근하는 것을 명시적으로 금지합니다. 권한이 필요한 모든 작업은 프리로드 스크립트와 contextBridge를 거쳐야 합니다. 따라서 렌더러에서 XSS 공격이 발생하더라도 공격자가 파일 시스템에 접근할 수 없습니다.
프로세스 간 통신 흐름
일반적인 상호작용은 다음과 같은 흐름으로 이루어집니다. React 컴포넌트가 window.api.readFile()을 호출하고 → 프리로드가 ipcRenderer.invoke()를 호출하며 → 메인 프로세스에서 ipcMain.handle()이 fs.readFile()을 실행하고 → 결과가 Promise로 렌더러에 반환됩니다. 이 구조는 렌더러를 깔끔하고 안전하게 유지합니다.
contextBridge의 목적
Electron에서 contextBridge.exposeInMainWorld의 주된 목적은 무엇인가요?
학습 내용 정리
Electron은 Chromium과 Node.js를 결합합니다. 메인 프로세스는 애플리케이션 수명 주기를 관리하고 OS에 완전히 접근할 수 있으며, 렌더러 프로세스는 샌드박스 환경에서 React UI를 실행합니다. 프리로드 스크립트와 contextBridge가 안전한 통로를 구성하고, IPC가 권한이 있는 메인 프로세스와 격리된 렌더러 사이의 안전한 통신을 가능하게 합니다.
자주 묻는 질문
“Electron 아키텍처: 메인 프로세스와 렌더러 프로세스” 강의는 무료인가요?
네 — “Electron 아키텍처: 메인 프로세스와 렌더러 프로세스” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Electron 아키텍처: 메인 프로세스와 렌더러 프로세스”에서 뭘 배우나요?
Electron의 다중 프로세스 모델을 이해합니다. 메인 프로세스는 네이티브 API를, 렌더러 프로세스는 React UI를 담당합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Electron 아키텍처: 메인 프로세스와 렌더러 프로세스” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Electron 아키텍처: 메인 프로세스와 렌더러 프로세스
- Electron과 React 설정하기
- 프로세스 간 IPC 통신
- 데스크톱 플랫폼용 패키징 및 배포