REAReverse Engineer Anything
한국어

홈 / 가이드 / JavaScript & Electron

Electron의 CSV
내보내기를 추적하세요

버튼 클릭부터 페이지 API, Electron IPC를 거쳐 CSV 파일 저장까지 추적합니다.

“메모 내보내기”는 어디로 이어질까요?

이 가이드는 작은 Electron 앱을 사용합니다. 노트 내보내기를 클릭하면 페이지의 API가 호출되고, 메인 프로세스를 거쳐 CSV 파일이 기록됩니다. 이 동작은 여러 파일에 걸쳐 구현되어 있습니다.

Electron 프로세스를 넘나드는 CSV 내보내기

  1. 렌더러 → 프리로드notes.exportCsv()renderer.js이 preload.js에서 노출한 API를 호출합니다.
  2. 프로세스 간 통신notes:export프리로드는 메인 프로세스로 보내는 이름 있는 메시지인 IPC 채널을 호출합니다.
  3. 메인 프로세스내보내기 핸들러main.js이 해당 채널을 처리하고 CSV 저장 함수를 호출합니다.

csv.js이 메모를 변환 → main.js이 downloads/notes.csv 저장.

REA는 리터럴 IPC 호출을 핸들러와 연결하고 노출된 API를 식별합니다. 이 경로는 코드에서 추론한 것이며, 런타임 캡처로 실제 실행을 확인할 수 있습니다.

CSV 내보내기 질문하기

에이전트에 REA를 연결하고 앱 폴더나 ASAR 파일을 전달하세요:

코딩 에이전트

REA로 이 앱에서 메모를 내보내면 어떤 일이 일어나는지 찾아줘. CSV는 어디서 만들어져?

예제 프롬프트입니다. 앱 폴더 또는 app.asar의 절대 경로를 포함하세요.

REA가 앱 파일을 읽어 진입점, 모듈, 프로세스 경계의 연결 지도를 만듭니다. 에이전트는 이를 바탕으로 조사 범위를 내보내기 기능으로 좁힙니다.

내보내기 코드 추적

페이지에서 작은 API를 호출합니다

renderer.js · 예제 소스 
document.querySelector("#export").addEventListener("click", async () => {
  const destination = await window.notes.exportCsv();
  document.querySelector("#status").textContent = `Saved to ${destination}`;
});

페이지는 메서드 이름을 알고 있습니다. 실제 구현은 프리로드에 있으며, 프리로드가 이를 렌더러에 노출합니다.

preload.js · 예제 소스 
contextBridge.exposeInMainWorld("notes", {
  exportCsv: () => ipcRenderer.invoke("notes:export"),
});

REA는 notes.exportCsv과 리터럴 채널 notes:export을 기록합니다. 이 호출을 메인 프로세스에서 유일하게 일치하는 핸들러와 연결합니다.

main.js · 예제 소스 
ipcMain.handle("notes:export", () => {
  const destination = path.join(app.getPath("downloads"), "notes.csv");
  writeFileSync(destination, toCsv(notes), "utf8");
  return destination;
});

핸들러를 읽으면 처음 질문의 답이 나옵니다. csv.js이 메모를 변환하고, 메인 프로세스가 사용자의 다운로드 폴더에 notes.csv을 저장합니다.

REA 결과 · summary.ipc 발췌 
{
  "literal_channels": 1,
  "renderer_transmissions": 1,
  "main_handlers": 1,
  "paired_renderer_transmissions": 1,
  "ambiguous_renderer_transmissions": 0
}

아래 다운로드 예제를 REA 4.1.0으로 분석한 기록입니다. API, 채널, 핸들러 결과에는 소스 위치가 함께 제공됩니다.

예제를 직접 분석해 보세요

예제를 다운로드하고 압축을 푸세요. 압축 파일에는 notes-example 폴더 전체가 들어 있습니다. Node.js와 npm으로 분석하세요. 이 예제에는 Electron이 필요하지 않습니다.

예제 ZIP 다운로드

소스 파일 6개 살펴보기
정적 애플리케이션 분석 
npx -y rea-agents@latest analyze-javascript-application \
  /absolute/path/to/notes-example --json

경로를 압축을 푼 폴더로 바꾸세요. normalized_result.summary.ipc에서 IPC 채널 하나와 일치하는 핸들러 하나가 나와야 합니다. 소스 위치는 normalized_result.graph에 있습니다.

직접 고른 앱도 폴더나 ASAR 경로로 같은 명령을 실행하세요. 에이전트는 REA의 기능 추적 도구로 리터럴 문자열, API 이름, IPC 채널을 추적할 수 있습니다.

CSV 저장 코드 살펴보기

notes:export에서 핸들러까지 추적해 줘. CSV 저장 함수에 어떤 입력이 전달되고, 파일 저장에 실패하면 어떻게 돼?

소스 위치를 따라 세부 동작을 살펴보세요. 계산된 채널 이름이나 모호한 핸들러는 확인되지 않을 수 있습니다. 런타임 관찰은 이를 조사하는 또 다른 방법입니다.

상단