DEV189

• 의존성 주입 (Dependency Injection) 이해하자 의존성 주입(Dependency Injection, DI) 은 객체 지향 프로그래밍에서 객체가 자신이 필요로 하는 의존성을 직접 생성하지 않고, 외부에서 제공(주입)받는 설계 패턴이자 원칙입니다(Fowler, 2004). 여기서 의존성이란 한 객체가 다른 객체의 기능이나 데이터를 필요로 할 때 그 객체를 의미합니다. DI는 이러한 의존성을 객체 내부에서 직접 생성하지 않고, 외부에서 전달받음으로써 객체 간의 결합도를 낮추고 코드의 유연성과 재사용성을 향상시킵니다.DI는 다양한 프로그래밍 언어와 프레임워크에서 널리 사용되며, 객체 지향 프로그래밍의 핵심 원칙 중 하나인 단일 책임 원칙(Single Responsibility Principle) 을 준수하도록 돕습니다. 또한 DI는 제어의 역전(Inversi.. DEV 2024. 9. 26.

• Electron App Mac Appstore 애플리케이션 제출 가이드 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 2024. 2. 29.

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

• Switching from Sharp to Jimp for Dependency Issues 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 .. DEV 2024. 2. 23.

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

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

• GitHub Actions의 워크플로우를 활용한 프로젝트 관리 Git Workflow 문제 해결 - 보일러 템플레이트 본 포스트에서는 GitHub Actions의 워크플로우를 활용해 프로젝트 관리를 어떻게 더 효율적으로 할 수 있는지에 대한 실제 경험을 공유하고자 합니다 GitHub Actions는 GitHub에서 직접 제공하는 CI/CD(Continuous Integration/Continuous Delivery) 도구로, 코드 통합부터 배포까지의 전 과정을 자동화할 수 있습니다. 복잡한 스크립트나 외부 서비스 없이도 GitHub 리포지토리 내에서 직접 이러한 프로세스들을 관리할 수 있는 것이 큰 장점입니다. 최근 프로젝트 리팩토링을 하며 GitHub의 vite-electron-builder 보일러플레이트를 도입했을 때, 그 중 GitHub Actions 설정이 .. DEV 2024. 2. 15.

• Electron에서 모니터 해상도로 인한 이미지 및 창 불일치 문제 해결 Electron에서 모니터 해상도로 인한 이미지 및 창 불일치 문제 해결 Electron을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 때, 다양한 해상도를 갖는 여러 모니터를 처리하는 것은 이미지 캡처 및 표시와 관련된 도전을 유발할 수 있습니다. 일반적인 문제 중 하나는 모니터 해상도의 차이로 인한 캡처된 이미지와 창 간의 불일치입니다. 이 블로그 게시물에서는 이 문제의 근본 원인을 탐구하고 이를 해결하기 위한 정교한 접근 방식을 제시하며, height: 100%에서 auto로 CSS 속성을 조정하는 경우를 중점적으로 다룹니다. 문제: 다양한 모니터 해상도 이 문제는 외부 모니터에서 캡처된 이미지가 올바르게 표시되는 반면 MacBook에서는 그렇지 않은 경우에 발생했습니다. 초기 의심사항은 .. DEV 2024. 2. 11.

• Electron Unplugin-auto-expose 사용 메뉴얼 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.. DEV 2024. 2. 10.

• Git Checkout으로 프로젝트 버전 이동하며 문제 해결하기 Git Checkout으로 프로젝트 버전 이동하며 문제 해결하기 프로젝트 개발 과정에서 버전 관리는 필수적인 작업 중 하나입니다. Git은 개발자들에게 널리 사용되는 버전 관리 시스템으로, 효율적인 협업과 이전 상태로의 원활한 복귀를 가능하게 합니다. 본 글에서는 git checkout 명령어를 활용하여 프로젝트의 특정 버전으로 이동하고, 이 과정에서 발생한 문제를 해결한 경험을 공유하고자 합니다. 문제 상황 개발 중 발생한 예상치 못한 버그로 인해 프로젝트의 이전 상태로 돌아가야 하는 상황이 발생했습니다. 프로젝트의 안정성을 위해 최근 변경사항 이전의 상태로 복귀할 필요가 있었고, 이를 위해 Git의 checkout 명령어를 사용하기로 결정했습니다. 해결 과정 커밋 로그 확인: git log 명령어를 .. DEV 2024. 2. 10.

• Electron TSX Production 환경에서 윈도우에 로딩이 되지 않는 문제 해결 Electron TSX Production 환경에서 윈도우에 로딩이 되지 않는 문제 해결 Electron과 TypeScript (TSX)를 사용하여 Single Page Application (SPA)을 구축하는 경우, Production 환경에서 여러 윈도우를 띄우면서 클라이언트 사이드 라우팅을 적절히 관리하는 방법에 대해 자주 질문을 받습니다. 특히, file:// 프로토콜을 사용하는 프로덕션 환경에서 SPA 구성을 유지하면서 멀티 윈도우를 효과적으로 띄우는 방법에 대한 해결책을 제공하고자 합니다. 문제 상황 Production 환경에서 file:// 프로토콜을 사용할 때 SPA의 클라이언트 사이드 라우팅이 제대로 작동하지 않는 문제가 발생할 수 있습니다. 멀티 윈도우를 SPA 구성으로 띄우고자 할 .. DEV 2024. 2. 10.

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