봄수의 연구실

Electron App Mac Appstore 애플리케이션 제출 가이드 주의 사항 App store는 애플리케이션에서 사용하는 API 목록을 확인함 모든 앱스토어를 거치는 앱들은 샌드 박스 처리가 된다 즉 승인 된 것들을 제외하고는 완전히 독립적이여야 한다 아마, 승인 된 api를 제외하고는 외부와의 통신이나 시스템 접근이 허락 되지 않는다 1. Apple Developer Account Apple Developer 등록을 해야 하고, 한화 129000원이 듭니다 Apple의 수수료가 30%에서 15%로 낮아집니다. Apple 개발자 계정이 필요합니다. 연간 비용은 약 $100입니다. developer.apple.com에서 가입하세요. 그리고 앱 스토어의 소규모 비즈니스 프로그램에 가입하세요 (수익이 1..

왜 배포했더니 내 앱은 끔찍하게 느려졌는가? 로컬에서 배포 전 실행했을 때는 빠르게 잘 동작하던 앱이 배포했더니 끔찍하게 느려졌던 이유를 알아봅시다, 처음 만든 앱이라 성능에 다소 미흡할 수 있다는 점을 감안해도, 앱 실행 후 첫 화면을 마주하기까지 5~10초나 기다려야 한다는 사실에 무언가 잘못 되었다 싶었습니다 이 글에서는 배포 전 로컬 환경에서는 문제없이 잘 돌아가던 앱이 왜 배포 후에는 끔찍한 속도 저하를 경험하게 되는지, 그 원인과 이를 해결하기 위한 방법들을 탐색해 보겠습니다. 원인 파악 DMG 파일의 특성 문제일까? 처음에는 DMG 파일로 패키징 후 느려졌기 때문에, 파일 확장자의 특성에 기인한 문제라 생각을 했습니다. 하지만 DMG 파일 확장자의 경우, 배포를 위해 패키징 되는 일종의 컨테..

Switching From Sharp to Jimp for Dependency Issues Sharp is a popular JavaScript library for image editing, but it can pose problems related to operating system dependencies. So. I’m developing a cross-platform Capture App,and These issues become significantly magnified. As a result, the switch to Jimp was not just a choice but a necessity. The migration process was surprisingly straightforward ..

Electron 에서 HashRouter를 쓰는게 정신 건강에 좋은 이유, Electron 애플리케이션에서 React와 함께 라우팅을 구현할 때, BrowserRouter 대신 HashRouter를 사용하는 것이 일반적인 해결책 중 하나입니다. 특히, Electron 환경에서는 file:// 프로토콜을 사용하여 로컬 파일 시스템의 리소스를 로드하므로, SPA(Single Page Application)의 라우팅이 서버 없이도 잘 작동하도록 해야 합니다. 이 글에서는 Electron에서 React Router의 HashRouter를 사용하여 라우팅 문제를 해결하는 방법과 관련 개념을 설명하겠습니다. Electron과 React Router의 HashRouter 왜 HashRouter인가? Electron ..

영어 버전 : [[Solving Memory Leaks with useEffect in React Applications]] React 애플리케이션에서 useEffect를 사용한 메모리 누수 해결하기 저는 개발 중인 Electron 앱의 뷰를 작업하는 동안 메모리 누수 경고를 만났습니다. 해당 경고를 보자마자 이 경고가 useEffect 훅에서 비롯된 것이라고 의심하였습니다. 왜냐하면 React의 useEffect는 컴포넌트의 생명주기 동안 부수 효과(side effects)를 관리하기 위해 사용되며, 이 훅을 잘못 사용하면 예상치 못한 방식으로 함수가 반복 실행될 수 있어 숨겨진 위험의 원천이 될 수 있기 때문입니다. 특히, 이벤트 리스너를 추가하고 제대로 청소하지 않을 경우 메모리 누수로 이어질 수 ..

앱 전체를 아우르는 화면 캡처: Recoil 상태 관리의 힘 현대의 웹 애플리케이션 개발에서 상태 관리는 사용자 경험(UX)을 향상시키고, 앱의 동작을 예측 가능하게 만드는 중요한 역할을 합니다. 특히, ⚙️ React와 같은 모던 프런트엔드 라이브러리/프레임워크를 사용하는 경우, 전역 상태 관리는 앱의 다양한 부분에서 데이터를 쉽게 공유하고 업데이트할 수 있게 해줍니다. 본 블로그에서는 React 애플리케이션 내에서 전역적으로 화면 캡처 기능을 구현하기 위해 Recoil 상태 관리 라이브러리가 어떻게 필요했는지 탐구합니다. 상태 관리의 필요성 캡처 기능이 전역적으로 작동하려면, 어플리케이션의 모든 컴포넌트가 캡처된 데이터에 접근할 수 있어야 합니다. 왜냐하면, 캡처 기능은 전역적으로 어떤 뷰를 보여주든..

Electron에서 시스템 클립보드 사용하기 Electron 애플리케이션 개발 시, 시스템 클립보드와의 상호작용은 사용자 경험을 크게 향상시킬 수 있는 중요한 기능입니다. Electron은 clipboard 모듈을 통해 이러한 상호작용을 용이하게 만들어 줍니다. 이 문서에서는 Electron의 clipboard 모듈을 사용하여 텍스트 데이터를 복사하고 붙여넣기하는 기본적인 방법을 설명합니다. 클립보드 모듈 개요 Electron의 clipboard 모듈은 시스템 클립보드와의 상호작용을 위한 API를 제공합니다. 이 모듈을 사용하면 텍스트 데이터를 클립보드에 복사하거나 클립보드에서 텍스트 데이터를 읽어올 수 있습니다. 텍스트 복사하기 클립보드에 텍스트를 복사하는 것은 clipboard.writeText(te..

Electron API에서 off 메서드 구현의 중요성 Electron 애플리케이션 개발 과정에서 이벤트 리스너의 관리는 앱의 성능과 안정성을 결정짓는 중요한 요소입니다. 특히, preload에서 정의한 electronAPI를 통해 렌더러 프로세스에서 메인 프로세스로의 이벤트 송수신을 처리할 때, 메모리 누수를 방지하기 위해 리스너를 적절히 제거하는 것이 필수적입니다. 이 글에서는 off 메서드를 구현한 이유와 리스너에서 발생하는 메모리 누수의 원인, 그리고 useEffect를 하나의 장소에 모으는 이유에 대해 설명합니다. off 메서드 구현의 이유 Electron에서 ipcRenderer를 사용하여 이벤트 리스너를 등록할 때, 이러한 리스너들은 특정 이벤트에 대해 반응하기 위해 메모리에 상주하게 됩니다..

Electron 구조 이해하기 Intro 2024년, 웹 기술의 활용 범위가 데스크탑 애플리케이션 개발까지 확장되었습니다. 이 중심에 있는 Electron은 웹 개발자들이 크로스 플랫폼 데스크탑 애플리케이션을 개발할 수 있는 새로운 기회를 제공하고 있습니다. Electron의 기본 철학은 명확하며 실용적입니다. Electron 10주년 기념 글에 따르면, Electron은 웹 개발자들이 데스크탑 애플리케이션을 더욱 쉽고 효율적으로 개발할 수 있도록 설계된 라이브러리입니다. Electron의 주요 특징은 크로스 플랫폼 지원입니다. Windows, Mac, Linux 등 다양한 운영 체제에서 원활하게 동작하는 애플리케이션을 개발할 수 있습니다. 또한, 웹 기술(HTML, CSS, JavaScript)을 사용..