Invariant Failed You Should Not Use Outside a 문제 상황 개발 중, 리액트 애플리케이션에 react-router-dom을 사용하여 페이지 라우팅을 구현하려고 할 때 아래와 같은 에러 메시지가 발생했습니다. 에러 메시지 Error: Invariant failed: You should not use outside a 이 메시지는 컴포넌트가 컴포넌트의 외부에서 사용되었을 때 나타납니다. 원인 분석 컴포넌트는 반드시 컴포넌트(예: , )의 내부에 위치해야 합니다. 이 규칙이 지켜지지 않으면 라우팅이 제대로 작동하지 않습니다. 프로젝트 구조상 컴포넌트의 포함이 누락되었거나, 잘못된 위치에 배치된 경우가 있을 수 있습니다. 해결책 1. 컴포넌트 확인 모든 컴포넌트가 안에 존재하는..
DEV
Electron 구조 이해하기 Intro 2024년, 웹 기술의 활용 범위가 데스크탑 애플리케이션 개발까지 확장되었습니다. 이 중심에 있는 Electron은 웹 개발자들이 크로스 플랫폼 데스크탑 애플리케이션을 개발할 수 있는 새로운 기회를 제공하고 있습니다. Electron의 기본 철학은 명확하며 실용적입니다. Electron 10주년 기념 글에 따르면, Electron은 웹 개발자들이 데스크탑 애플리케이션을 더욱 쉽고 효율적으로 개발할 수 있도록 설계된 라이브러리입니다. Electron의 주요 특징은 크로스 플랫폼 지원입니다. Windows, Mac, Linux 등 다양한 운영 체제에서 원활하게 동작하는 애플리케이션을 개발할 수 있습니다. 또한, 웹 기술(HTML, CSS, JavaScript)을 사용..
React 프로젝트가 로딩 되기 전에 Electron이 구동 되어 버릴 때 해결 방법 React 개발 서버가 완전히 준비된 후 Electron 앱이 시작되도록 설정하기 위해 wait-on 도구를 사용할 수 있습니다. wait-on은 특정 URL, 파일, 또는 포트가 사용 가능해질 때까지 기다리는 데 사용되는 유틸리티입니다. 이를 통해 Electron 앱이 React 개발 서버가 완전히 준비된 후에 시작되도록 구성할 수 있습니다. wait-on 설치 먼저 wait-on을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하세요: npm install --save-dev wait-on 또는 yarn을 사용하는 경우: yarn add --dev wait-on 설치가 완료되면, package.js..
require() Of ES Module A JavaScript error occurred in the main process Uncaught Exception: Error [ERR_REQUIRE_ESMI: require) of ES Module /Users/gobeomsu/ Documents/GitHub/PixelScriber/node_modules/electron-is-dev/index.js from /Users/gobeomsu/Documents/GitHub/PixelScriber/dist/main/main.js not supported Instead change the require of index.js in /Users/gobeomsu/Documents/ GitHub/PixelScriber/dis..
Typescript의 Interface와 Type의 차이는 뭘까 TypeScript에서 interface와 type은 유사한 기능을 제공하지만, 몇 가지 중요한 차이점이 있습니다. 1. Interface (인터페이스) 정의 및 사용: 객체의 구조를 정의하는 데 사용됩니다. 선택적 속성(optional properties) 및 읽기 전용 속성(readonly properties)을 포함할 수 있습니다. 확장성: 인터페이스는 다른 인터페이스를 확장할 수 있으며, 동일한 이름으로 선언되면 자동으로 합쳐지거나 확장됩니다. 융통성: 인터페이스는 객체의 형태를 정의하는 데 초점을 맞추고 있으며, 객체 간의 계약(contract)을 설정하는 데 유용합니다. 2. Type (타입) 정의 및 사용: 새로운 타입을 정의하..
Electron Browser Window 숨기는 방법 방법 : mainWindow?.hide();, mainWindow?.show(); 목적 Electron 앱이 캡처 과정에 직접 개입하지 않도록 하여, 보다 정확한 화면 캡처를 가능하게 합니다. 😄 캡처 지연: 화면 캡처를 시작하기 전에 약간의 지연 시간(예: 1-2초)을 두어 Electron 앱 창을 최소화하거나 숨길 시간을 제공합니다. 이렇게 하면 desktopCapturer가 Electron 창을 제외한 나머지 화면을 캡처할 수 있습니다. ipcMain.on("capture-screen", async (event) => { // 창을 숨기거나 최소화 mainWindow?.hide(); // 약간의 지연 후 캡처 setTimeout(() => { ..
Electron 개발환경에서 캡처가 되지 않았던 이유 Electron에서 desktopCapturer API를 사용하여 화면을 캡처할 때, 다른 애플리케이션이 보이지 않고 오직 빈 배경화면만 나타나는 문제가 있었습니다. 여러 다른 라이브러리를 사용해 보았지만, 동일한 문제가 지속되었고, 이는 권한 문제로 의심되었습니다. 이에 대한 문제 해결 과정을 아래에 기록합니다. MacOS의 보안 정책 MacOS Catalina(10.15) 이상 버전에서는 새로운 보안 및 개인 정보 보호 기능들이 도입되었습니다. 특히 ‘화면 녹화’ 권한이 중요한 부분 중 하나입니다. Electron 앱이 화면을 캡처하려면 사용자로부터 명시적인 허가가 필요합니다. 이 권한 없이는 Electron 앱이 빈 화면이나 배경화면만을 캡처할 ..
🚀 Yarn을 사용한 TypeScript 프로젝트의 자동 빌드 및 재시작 설정 방법 TypeScript 프로젝트에서 파일 변경 시 자동으로 빌드하고 Electron 애플리케이션을 재시작하려면, Nodemon과 TypeScript 컴파일러(tsc)를 활용할 수 있습니다. 1. nodemon.json 설정 Nodemon 설정 파일(nodemon.json)을 생성하고, TypeScript 파일의 변경을 감시하도록 설정합니다. { "watch": ["src/**/*.ts"], "ext": "ts", "exec": "yarn build && electron ." } watch: 감시할 파일의 경로 및 패턴을 지정합니다. ext: 감시할 파일의 확장자를 지정합니다. exec: 파일 변경 시 실행할 명령어입니다. 여..
Electron 애플리케이션 개발: Yarn을 활용한 기본 설정과 파일 구성 Yarn을 통한 Electron 설치 및 초기 설정 Yarn을 사용하여 Electron을 손쉽게 설치하고 프로젝트를 초기화합니다. yarn init -y yarn add electron --dev index.html의 기본 구조 설정 기본 HTML 구조를 설정하여 Electron 애플리케이션의 UI를 구성합니다. Welcome to My Electron App! main.js로 Electron 애플리케이션의 메인 프로세스 설정 Electron의 메인 프로세스를 정의하는 main.js 파일을 구성합니다. Electron 모듈 임포트: app과 BrowserWindow를 임포트합니다. BrowserWindow 인스턴스 생성: 애플리..
도커 캐싱으로 인한 이전 버전 JAR 파일 지속 사용 문제 해결하기 오늘은 Docker Compose를 이용해 네트워크를 구성하고 이미지 간 통신을 설정하는 과정에서 발생한 흥미로운 문제에 대해 이야기하고자 합니다. 프로젝트 설정에서 prod로 지정했음에도 불구하고, Spring 프로젝트의 변경 사항이 제대로 반영되지 않는 상황이 발생했습니다. 문제의 핵심은 Flask 서버 컨테이너로 요청을 보내는 과정에서, 서버가 계속 localhost로 인식되는 것이었습니다. 이는 도커 이미지를 생성하는 과정에서 발생한 문제라 추측 되었습니다 사전 지식 도커 캐싱 메커니즘 Docker는 이미지를 '레이어’라는 여러 개의 층으로 구성합니다. 각 레이어는 Dockerfile의 한 명령어에 해당하며, 이들이 순차적으로 쌓..
