❓그럼 Node.js쓰면 파일 선택기를 제한할 수 있나요??

송연지·2025년 4월 30일

Node React electron 프론트엔드

트러블슈팅

목록 보기

24/32

💡 결론 먼저 말하자면:

❌ Node.js만으로는 사용자의 파일 선택 창을 띄우고 제어할 수 없습니다.

✅ Electron은 Chromium + Node.js 조합이라서 그게 가능한 거예요.

🔍 왜 Node.js는 파일 선택을 못 하는가?

Node.js는 서버 사이드 런타임입니다.

Node는 백그라운드에서 돌아가는 터미널 기반 애플리케이션을 만들 때 쓰죠.
그러니까 사용자에게 UI를 띄운다거나, 마우스로 파일을 고르게 한다거나 하는 건 Node의 역할이 아닙니다.


// Node.js에서는 이런 코드 못 씁니다
dialog.showOpenDialog(...); // UI 없음, 사용자 없음

Node.js에서 파일을 여는 방식은 이런 겁니다:


const fs = require('fs');

fs.readFile('C:/path/to/some/file.exe', (err, data) => {
  // 사용자가 직접 경로를 입력해야 함
});

즉, Node는 파일을 “여는” 건 잘하지만, “고르게 하는” 건 못 합니다.

✅ React + Node.js 조합에서는 어떤 구조?

예시 구조 (웹에서 흔히 쓰는 구조):


[React (프론트엔드)] <--- HTTP 요청 ---> [Node.js (백엔드)]

React는 <input type="file">로 사용자에게 파일을 선택하게 하고,
선택한 파일은 FormData로 Node.js 서버에 업로드합니다.

이 구조에서는 React가 “고르게” 하고, Node가 “받아서 처리”합니다.

❌ 그런데 Node.js만으로 "사용자가 파일을 고르게 하기"는 불가능

Node는 콘솔 기반 런타임이라, 사용자와 시각적인 상호작용을 할 수 없습니다.

파일 선택창 같은 UI는 존재하지 않아요.


// Node.js에서 이런 건 안 됨 ❌
dialog.showOpenDialog(); // Electron에서만

✅ Electron은 다릅니다

Electron은:


[React (렌더러)] <== IPC 통신 ==> [Node.js (메인 프로세스)]

이 구조라서,

React가 버튼을 보여주고
Node가 파일 선택 다이얼로그 띄우고
선택한 파일 경로를 다시 React에 전달합니다

이 둘이 서로 IPC로 통신하면서 완전체를 이룹니다. 그래서 가능한 거예요.

✨ 결론

항목	React (브라우저)	Node.js	Electron
사용자에게 파일 선택 시키기	✅ 가능 (`<input>`)	❌ 불가능	✅ 가능 (`showOpenDialog`)
`.exe`만 고르게 제한	❌ 힌트만 가능	❌ 아예 불가	✅ 완벽 제어 가능
시스템 경로 접근	❌ 제한됨	✅ 가능	✅ 가능
파일 다이얼로그 커스터마이징	❌ 불가	❌ 불가	✅ 이름, 필터, 확장자 제한 모두 가능

"React는 사용자에게 보여주고 고르게 하는 데 특화돼 있고,
Node는 파일을 열고 조작하는 데 특화돼 있어요.
이 둘을 연결하려면 React → 사용자 선택 → Node로 전송 구조가 필요합니다.
하지만 Node만으로는 절대 사용자에게 파일을 '고르게' 할 수는 없습니다."

🧠 쉽게 비유하자면

환경	설명
Node.js만	전화기 본체는 있는데, 수화기가 없음 (사용자와 대화 불가능)
브라우저만	수화기(인터페이스)는 있는데, 전화를 걸 능력이 없음 (시스템 제어 불가능)
Electron	전화기 + 수화기 + 교환원까지 다 있음 😎