전체 글

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 구성으로 띄우고자 할 ..

마이그레이션 가이드: Create React App에서 Vite로 이 문서는 React 프로젝트의 빌드 시스템을 Create React App(CRA)에서 Vite로 마이그레이션하는 과정을 설명합니다. 이 마이그레이션은 프로젝트의 빌드 속도를 개선하고, 경로 설정을 보다 쉽게 관리할 수 있도록 하기 위해 수행됩니다. Vite로의 마이그레이션 배경 빌드 속도 개선: Vite는 모던 브라우저의 ES 모듈을 활용하여 빠른 콜드 스타트와 HMR을 제공합니다. 경로 설정 용이성: Vite는 tsconfig.json과 유사한 방식으로 경로 별칭을 설정할 수 있으며, 이는 개발자에게 보다 직관적인 경험을 제공합니다. Vite 프로젝트 설정 0. 기존의 CRA 제거 기존 CRA 프로젝트에서 Vite로 전환하기 전에, ..

앱 전체를 아우르는 화면 캡처: 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를 사용하여 이벤트 리스너를 등록할 때, 이러한 리스너들은 특정 이벤트에 대해 반응하기 위해 메모리에 상주하게 됩니다..

MUI 적용 가이드: React 프로젝트에 MUI 통합하기 Material UI(MUI)는 React 기반 프로젝트에 멋진 UI 구성 요소를 손쉽게 추가할 수 있게 해주는 인기 있는 라이브러리입니다. 이 가이드에서는 MUI의 기본 개념부터 실제 React 프로젝트에 적용하는 방법까지 담백하고 핵심적인 내용을 다룹니다. MUI란 무엇인가? MUI는 Material Design 원칙을 기반으로 한 React 컴포넌트 라이브러리입니다. 개발자가 고품질의 UI를 빠르게 구축할 수 있도록 다양한 미리 만들어진 컴포넌트를 제공합니다. MUI를 사용하면 애플리케이션의 일관성과 접근성을 향상시키면서 개발 시간을 크게 단축시킬 수 있습니다. MUI의 작동 원리 MUI는 React의 구성 요소 기반 아키텍처를 활용하여, ..

React 프로젝트에 네비게이션 바 추가하기: 고도화된 가이드 React를 활용한 ⚙️ SPA(Single Page Application) 구축은 개발자들 사이에서 인기를 끌고 있습니다. 특히 네비게이션 바는 앱 내에서 사용자가 다른 페이지로 손쉽게 이동할 수 있게 하는 핵심 요소입니다. 본 문서는 React 프로젝트에 네비게이션 바를 전역적으로 통합하는 방법을 단계별로 설명합니다. 기술 정의 전역 라우팅의 이해: App.tsx에서 BrowserRouter를 사용해 설정하면, 전체 앱에 걸쳐 단일 페이지 어플리케이션이 구현됩니다. 이는 앱 전체에서 페이지를 전역적으로 렌더링하는 기능을 수행합니다. SPA의 매력: React를 통한 SPA 구현은 페이지 로딩 없이 콘텐츠를 동적으로 렌더링할 수 있게 하여 ..