Bleeding edge

augmentedDevice 리팩토링이 어느 정도 끝나간다. 최근에 리팩토링을 하면서 뭔가 새로운 것을 공부한다기 보다는 이전에 typescript나 bundler에 대해 다시 한 번 더 복습할 수 있는 시간이 되었던 것 같고, 이전에 진행하던 프로젝트에서 적용을 못하던 autoUpdater와, desktop application에서 필요한 간단한 어플리케이션 소개 사이트를 모노 레포를 추가할까 고민중이다. 아마 이 작업이 끝나면 이전부터 계속 고민하던 rust server with rust wasm을 진행할 것 같다. 이전에 elixir와 phoenix framework vs rust server with rust wasm에 대해 고민을 했었는데, 내가 다음으로 갈 회사가 liveview를 사용할 것 ..

영상 초반부에 나오는 State에 대한 이야기가 프론트엔드의 시점에서 보기 좋다고 생각해서 올림 https://www.youtube.com/watch?v=lAaD-6OQSHE

이번에 노마드 코더 슬랙채널에서 티스토리 성능 개선하는 방법에 대한 질문의 글이 올라와서 그냥 스레드에 글을 남기기엔 긴 것 같아서 블로그에 정리를 하게 되었다. 우선 슬랙채널에 올라온 스킨은 #1 였고, 나는 #2 였다. 스킨이 다르더라도 공통되는 진단사항을 수정하는 것이 좋을 것 같아서 그 사항을 수정하려고 한다. # 2스킨에서 진단하였을 때 나온 문제점은 요렇게 5가지가 있었고 공통되는 사항은 4가지였다.이 중에서 차세대 형식이미지 제공은 jpeg를 webp로 바꾸는 것을 의미하고, 효율적으로 이미지 인코딩 역시 이미지 사이즈를 변경하는 것이니, 코드로 해결할 수 있는 것에 한계가 있음으로 생략하겠다 # 0 스킨 편집하는 페이지로 이동 1번을 시작하기에 앞서 우선 스킨을 편집하는 페이지로 이동하는 ..

간만에 Notion Prettier를 업데이트 하였다. 이번에 새로운 기능을 추가를 위하여 테스팅을 하면서 나도 모르는 버그를 찾았고 이 버그도 같이 수정하였다. (이번 기회에 텍스트 노드에 대해서도 공부할 수 있었다, 이것도 나중에 정리를 해야겠다) 이번에 신규 기능은 백준 에드온이나 다른 사이드에서 사용하지 않았던 contextMenu를 사용하는 부분이 있었고, contextMenu는 내가 생각하던 것과 다른 아키텍쳐를 가지고 있어서 내가 생각했던 시간보다 2시간 정도 더 소모하였다. #1 권한 설정 우선 contextMenu을 사용하기 위해서는 우선 extension의 manifest에서 권한을 열어야한다. { //manifest.json "permissions": ["contextMenus"], ..

이번에 구현야할 리스트 Margin 없이 Silent printing 우선 2번 같은 경우에는 아래와 같은 방법을 이용하여 silent printing을 아주 쉽게 구현할 수 있다. const win = new BrowserWindow() win.webContents.print({silent: true}); 주의 : webContents의 pageSize의 경우 올바르게 사이즈가 작동을 안하는 경우가 있으니 참고를 하고, silent true 옵션은 24.8.x 버전까지는 잘 작동하지만 그 의상의 버전에서는 이상하게 작동하니 이 역시 참고하자 Margin 없애기 1. MarginType 3번에서 사용한 silent:true을 사용한 오브젝트에 MarginType을 사용하면 가능해보여서 이리저리 노력을 해..

파일을 빌드한 후 -> 빌드한 파일의 위치 이동시 에러 발생 이전까지 사용하였던 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..