Bleeding edge

영상 초반부에 나오는 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..

요번 프로젝트에 필요한 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 뭐든 가시적인게 좋으니까~ 그리고 많이 사용하는데는 사용하는 이유가 있기에 이런 플렛폼을 참조해서 선택하는 것도 괜찮아보인다.