Bleeding edge

파일을 빌드한 후 -> 빌드한 파일의 위치 이동시 에러 발생 이전까지 사용하였던 electron 프로젝트에서는 ts의 컴파일러에서 사용하는 파일들만 사용하는 경우에는 생기지 않기 않는다 파일을 빌드한 위치에서 똑같이 사용하면 문제가 없지만 파일의 위치를 옮기는 경우나 폴더 이름을 바꾸는 경우에 dll 과 같은 파일들의 경로를 찾지 못하는 문제가 생긴다. 리소스 파일 추가하는 방법 엑스트라 리소스 파일 추가하기 우선 electron에서는 extra resources를 이용하여 패키지에 패키지를 할 때 특정 폴더나 파일을 포함시켜야 한다. 우선 리소스 추가에 앞서, 필자는 electron-packager를 이용하여 파일을 빌드할 예정이다. package.json { scripts:{ "package-win"..

이 글에서 이야기 하고 싶은 내용 일반적으로 chrome 하나만 사용할 때는 잘 볼 수 없는 에러이다. 이 글에서는 이 에러를 해결하는 방법보다는 일렉트론을 이용하여 프로그래밍을 할 때 어떻게 에러를 처리할 것인가에 대한 이야기를 하려고한다. 이 에러를 처음 만났을 때 이 에러를 처음 만난 것은 일렉트론으로 프로그램으로 빌드를 한 후에 패키지를 마친 새로운 프로그램이 완전히 꺼지지 않은 상태에서 같은 프로그램이 2개가 켜지고 그 프로그램이 각각 카메라를 킨 경우에 발생했다. 이 에러는 정확히 언제 생길까? 이 에러를 만나기 이전에는 electron의 웹뷰에서 보이는 카메라 1개와, 보이지는 않지만 qr 리딩을 위한 카메라 1개 총 2개를 띄울 예정이었다.(사실, 웹뷰에서만 카메라를 1개를 띄워도 됬었지만..

Node.js에서 dll파일을 사용하기 위하여 외부함수 인터페이스(Foreign function interface, FFI) 라이브러리로 koffi를 선택하였다. koffi 소개 페이지에 들어가면 빠르고 사용하기 쉽다( Koffi is a fast and easy-to-use C FFI module for Node.js ) 라는 표현이 되어있다. 개인적으로 빠른 것에는 동의하지만 쉽다에는 것에는.. 레퍼런스나 커뮤니티도 적고, Node.js와 타 언어에서 차이가 나는 타입의 경우에는 그 라이브러리의 사용법을 따로 익혀야해서 약간 불편했다. 그 중 하나가 포인터였는데 알기만 하면 사용하기 쉬워서 나중에 내가 다시 보기 위해 글을 남긴다. # 1. 필요한 사전 지식 # 1-1 dll파일 불러오기 const ..

최근에 데스크탑 어플리케이션을 만들면서 새로 알게된 것이 있다. 1. Serial port 연결은 브라우저에서도 가능하다 nodejs에서는 serialport 라이브러리를 이용할 수 있다는 것은 알고 있었지만, 브라우저에서 이렇게 다른 시리얼 포트로 연결하는 기능이 있는 줄은 몰랐다. const port = await navigator.serial.requestPort(); await port.open({ baudRate: 9600 }); const reader = port.readable.getReader(); const readReader = await reader.read(); if (readReader.done) reader.releaseLock(); const writer = port.writa..

요번 프로젝트에 필요한 electron에서 어떤 패키지와 build를 할 것인지 고민을 하다가, 장단점을 보는 방법 말고 다른 기준치로 사용할 수 있을까를 고민하면서 검색하다가 이런 사이트를 보게 되었다. https://npmtrends.com/ npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner. npmtrends.com 뭐든 가시적인게 좋으니까~ 그리고 많이 사용하는데는 사용하는 이유가 있기에 이런 플렛폼을 참조해서 선택하는 것도 괜찮아보인다.

React-native와 Webview 혹은, Electron과 Webview와 같이 여러 Port를 사용하는 작업을 해야하는 경우가 있다. 이 경우에 버전 관리나 코드 분리를 위하여 레포를 분리하는 경우가 많고, 그대로 사용하면 실행을 터미널로 여러번 실행해야해서 불편한 경우가 많다. 다른 방법을 하는 방법이 있지만, React-native와 Electron 같은 경우에는 project-app[folder] project-client[folder] package.json 다음과 같은 경로에 package.json을 만들고 prefix flag를 사용하였다. { "scripts": { "client": "npm run --prefix ./project-client dev", "electron": "npm..

Webview를 이용하여 Electron에서 권한을 맞게 주어도 [카메라가 권한이 없어서] DOM에서 그릴 수 없는 경우가 있다. 오전에 2시간을 삽질하다가 우연히 plist에 대한 글(이 글이 해결책이 되지는 않았지만, 이 글을 보고 맥북에서만 생기는 문제일 수도 있다라고 생각했다). Solution 해결책 1번 출처 : https://support.apple.com/ko-kr/guide/mac-help/mchlf6d108da/mac Apple 메뉴 > 시스템 설정을 선택한 다음, 사이드바에서 개인정보 보호 및 보안을 클릭하십시오. (아래로 스크롤해야 할 수도 있습니다.) Visual Studio Code를 켭니다. The End... 아오.. 담부터 권한 문제가 맥북에 있는 경우 설정부터 우선 찾아봐..

브라우저에서 일반적으로 인쇄버튼을 누르면 프린터 앱이 나오면서, 인쇄 설정에 대한 옵션을 확인하도록 되어있다. 이번에 만드는 앱은 이러한 옵션이 나오면 안되는 앱이기 때문에(web 혹은 데스크탑 앱) 이 플로우를 변경할 필요가 있었다. 우선, 윈도우에서는 크롬에 다음과 같은 flag를 붙여주면 된다. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk-printing

https://rinthel.github.io/rust-lang-book-ko/ch03-00-common-programming-concepts.html