🎯 “.exe만 고르게 해주세요”… 저는 그렇게 말했습니다

“사용자한테 .exe만 고르게 하고 싶습니다.

다른 거? .zip? .txt? 고르지도 못하게 해주세요. 클릭도 못 하게요.”

처음엔 정말 그게... 쉬울 줄 알았어요.

🚪 시작은 언제나 <input type="file">

React로 프로젝트를 짜다 보면 파일 선택이 필요하잖아요?

<input type="file" accept=".exe" />

저는 이걸 썼습니다.

그리고 자신만만하게 .exe만 나올 줄 알고 확인 버튼을 눌렀죠.

그런데…

"모든 파일 (.)"

?????? 😨

왜 이게 보여...?

.txt도 선택되고, .pdf도 되고… 온갖 파일이 다 들어오는 겁니다.

“accept는 도대체 왜 준 거야…??” 싶은 순간이었죠.

---

🔍 React의 accept는 말 그대로 “추천”일 뿐입니다

사실 <input type="file" accept="...">는 "이런 파일이 적절해요~"라는 힌트일 뿐이고,

사용자 선택을 제한할 권한은 없습니다.

브라우저는 보안이 가장 중요하기 때문에,

사용자 파일 시스템을 적극적으로 제한하지 않습니다.

🧨 그래서 결국… 이상한 파일이 들어오고 메타데이터 추출에서 앱이 터지고... 💣

---

😎 그런데 말입니다. Electron을 쓰면 얘기가 달라집니다

Electron에서는 이렇게 쓸 수 있어요:

const result = await window.electronAPI.openFileDialog({
  title: '실행 파일을 선택하세요',
  filters: [{ name: '실행 파일', extensions: ['exe'] }],
  properties: ['openFile']
});

이 코드 하나면,

✅ .exe 외 확장자? 절대 안 보여요

✅ "모든 파일"? 그런 거 없습니다

✅ .zip? .txt? 선택조차 못 합니다!

Electron은 내부적으로 Node.js를 내장하고 있어서

dialog.showOpenDialog()로 운영체제의 파일 탐색기를 직접 호출합니다.

즉, 이건 힌트가 아니라 진짜 OS에다가 "이거만 보여줘!"라고 말하는 거예요.

---

🚀 Electron이 가능한 이유: Node.js의 힘

Electron은 내부적으로 Node.js를 내장하고 있고,

파일 시스템, 네이티브 모듈, OS API 등에 자유롭게 접근할 수 있습니다.

그래서 가능해지는 것들:

• fs, path 등을 통한 파일 직접 접근
• child_process로 PowerShell/CLI 호출
• dialog.showOpenDialog()로 확장자 제한 강제
• 심지어 .exe 메타데이터 추출, 서명 확인까지 가능!

웹브라우저는 이걸 못 합니다.

보안이 우선이기 때문에, 사용자 디바이스에 있는 파일을 마음대로 보고, 필터링하고, 실행하고 하는 행위는 제한되죠

⚔️ 이래서 Electron을 씁니다

항목	React (브라우저)	Electron
확장자 제한	❌ 힌트만 가능	✅ 진짜 제한 가능
시스템 접근	❌ 제한됨	✅ Native API 가능
메타데이터 추출	❌ 불가능	✅ PowerShell, 인증서 분석 가능
UX	😢 실수 유도 가능	😎 실수 차단 가능

Electron을 쓰는 이유가 이런 강력한 시스템 제어력 때문 아니겠어요? 😎

파일 선택기 하나도 제대로 다루면 앱이 훨씬 견고해집니다.

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

---

🧁 보너스 🍩: Electron 없이 .exe만 고르게 하려면?

Electron 안 쓰는데 진짜 .exe만 고르게 하고 싶으시다고요?

그럼 이건 크게 두 가지 방법을 고민해보셔야 합니다.

1. 업로드 후 검증

• 사용자가 뭘 업로드하든 서버나 클라이언트에서 검사해서 .exe 아니면 거절하는 방법입니다.
  
• 예: MIME 타입 체크, 확장자 검사, 내부 구조 일부 파싱 등

if (!file.name.endsWith('.exe')) {
  alert('이 파일은 .exe가 아닙니다!');
  return;
}

🧨 단점: 사용자 입장에선 이미 파일 고르고도 "안 돼요" 하면 UX가 안 좋아요.

---

2. 커스텀 파일 업로드 컴포넌트 만들기

• 라이브러리 없이 <input type="file"> 대신 버튼 + 드래그앤드롭 UI를 만들어서 내부에서 .exe 파일만 거르는 방식입니다
  
• 브라우저 보안상 "선택 자체를 막는 것"은 불가능하므로, 선택 후 거르는 UX로 우회해야 합니다
  

---

🎬 결론

“accept=".exe" 줬는데도 안 막히네?”

→ 당연한 거였습니다.

브라우저는 권한이 없거든요.

💡 하지만 Electron은 OS에 진짜 말을 걸 수 있는 도구니까요.

dialog.showOpenDialog()를 쓰면

보안성, UX, 실수 방지까지 완벽하게 챙길 수 있습니다.

---

📌 만약 Electron 없이 이 기능이 꼭 필요하다면?

"제대로 못 막는다는 사실을 알고, 대응 UX를 설계하는 것"이 중요합니다!