Electron App Mac Appstore 애플리케이션 제출 가이드 주의 사항 App store는 애플리케이션에서 사용하는 API 목록을 확인함 모든 앱스토어를 거치는 앱들은 샌드 박스 처리가 된다 즉 승인 된 것들을 제외하고는 완전히 독립적이여야 한다 아마, 승인 된 api를 제외하고는 외부와의 통신이나 시스템 접근이 허락 되지 않는다 1. Apple Developer Account Apple Developer 등록을 해야 하고, 한화 129000원이 듭니다 Apple의 수수료가 30%에서 15%로 낮아집니다. Apple 개발자 계정이 필요합니다. 연간 비용은 약 $100입니다. developer.apple.com에서 가입하세요. 그리고 앱 스토어의 소규모 비즈니스 프로그램에 가입하세요 (수익이 1..
DEV
왜 배포했더니 내 앱은 끔찍하게 느려졌는가? 로컬에서 배포 전 실행했을 때는 빠르게 잘 동작하던 앱이 배포했더니 끔찍하게 느려졌던 이유를 알아봅시다, 처음 만든 앱이라 성능에 다소 미흡할 수 있다는 점을 감안해도, 앱 실행 후 첫 화면을 마주하기까지 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)를 관리하기 위해 사용되며, 이 훅을 잘못 사용하면 예상치 못한 방식으로 함수가 반복 실행될 수 있어 숨겨진 위험의 원천이 될 수 있기 때문입니다. 특히, 이벤트 리스너를 추가하고 제대로 청소하지 않을 경우 메모리 누수로 이어질 수 ..
Git Workflow 문제 해결 - 보일러 템플레이트 본 포스트에서는 GitHub Actions의 워크플로우를 활용해 프로젝트 관리를 어떻게 더 효율적으로 할 수 있는지에 대한 실제 경험을 공유하고자 합니다 GitHub Actions는 GitHub에서 직접 제공하는 CI/CD(Continuous Integration/Continuous Delivery) 도구로, 코드 통합부터 배포까지의 전 과정을 자동화할 수 있습니다. 복잡한 스크립트나 외부 서비스 없이도 GitHub 리포지토리 내에서 직접 이러한 프로세스들을 관리할 수 있는 것이 큰 장점입니다. 최근 프로젝트 리팩토링을 하며 GitHub의 vite-electron-builder 보일러플레이트를 도입했을 때, 그 중 GitHub Actions 설정이 ..
Electron에서 모니터 해상도로 인한 이미지 및 창 불일치 문제 해결 Electron을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 때, 다양한 해상도를 갖는 여러 모니터를 처리하는 것은 이미지 캡처 및 표시와 관련된 도전을 유발할 수 있습니다. 일반적인 문제 중 하나는 모니터 해상도의 차이로 인한 캡처된 이미지와 창 간의 불일치입니다. 이 블로그 게시물에서는 이 문제의 근본 원인을 탐구하고 이를 해결하기 위한 정교한 접근 방식을 제시하며, height: 100%에서 auto로 CSS 속성을 조정하는 경우를 중점적으로 다룹니다. 문제: 다양한 모니터 해상도 이 문제는 외부 모니터에서 캡처된 이미지가 올바르게 표시되는 반면 MacBook에서는 그렇지 않은 경우에 발생했습니다. 초기 의심사항은 ..
Unplugin-auto-expose 사용 메뉴얼 unplugin-auto-expose는 Electron 애플리케이션에서 preload 스크립트를 통해 renderer 프로세스에 API를 쉽게 노출시킬 수 있게 해주는 플러그인입니다. 이 문서는 unplugin-auto-expose의 기본 사용법, 설정 방법 및 TypeScript 설정 방법을 안내합니다. 기본 사용 예시 preload.ts 예시: // preload.ts export const foo = 'foo string' // 동등한 기존 방식 electron.contextBridge.exposeInMainWorld('__electron_preload_foo', 'foo string') renderer.ts 예시: // renderer.ts imp..
Git Checkout으로 프로젝트 버전 이동하며 문제 해결하기 프로젝트 개발 과정에서 버전 관리는 필수적인 작업 중 하나입니다. Git은 개발자들에게 널리 사용되는 버전 관리 시스템으로, 효율적인 협업과 이전 상태로의 원활한 복귀를 가능하게 합니다. 본 글에서는 git checkout 명령어를 활용하여 프로젝트의 특정 버전으로 이동하고, 이 과정에서 발생한 문제를 해결한 경험을 공유하고자 합니다. 문제 상황 개발 중 발생한 예상치 못한 버그로 인해 프로젝트의 이전 상태로 돌아가야 하는 상황이 발생했습니다. 프로젝트의 안정성을 위해 최근 변경사항 이전의 상태로 복귀할 필요가 있었고, 이를 위해 Git의 checkout 명령어를 사용하기로 결정했습니다. 해결 과정 커밋 로그 확인: git log 명령어를 ..
Electron TSX Production 환경에서 윈도우에 로딩이 되지 않는 문제 해결 Electron과 TypeScript (TSX)를 사용하여 Single Page Application (SPA)을 구축하는 경우, Production 환경에서 여러 윈도우를 띄우면서 클라이언트 사이드 라우팅을 적절히 관리하는 방법에 대해 자주 질문을 받습니다. 특히, file:// 프로토콜을 사용하는 프로덕션 환경에서 SPA 구성을 유지하면서 멀티 윈도우를 효과적으로 띄우는 방법에 대한 해결책을 제공하고자 합니다. 문제 상황 Production 환경에서 file:// 프로토콜을 사용할 때 SPA의 클라이언트 사이드 라우팅이 제대로 작동하지 않는 문제가 발생할 수 있습니다. 멀티 윈도우를 SPA 구성으로 띄우고자 할 ..
