Bleeding edge

요번 프로젝트에 필요한 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

오늘 점심을 먹고 있었는데 다음과 같은 질문을 같은 회사 동료에게 들었다. 지금 렌딩 페이지 배포 준비하고 있는 와중에 랜딩 페이지 하단에 pdf 다운로드가 안되는데(로컬에선 작동), 도메인에서 해당 정적 파일이 없어서 그런 것 같은데 해결할 수 있는 방법이 있을까요? # 문제 해결을 위한 고민 보통 ts나 js와 같이 컴파일을 하거나 압축을 진행해서 새로운 파일이 빌드에서 생성되는 것이 아닌 경우에는 public에 파일을 넣어서 관리하고 주소를 public을 기준으로 root를 잡으면 문제가 생기지 않는다. 그래서 파일의 위치를 먼저 확인해봤다. public/[pdffilename].pdf 그래서 위치는 맞다는게 확인이 되어서 파일을 git clone을 진행한 후 다운받았다. 파일을 열어보니.. 파일이..

Intro 이번에 카메라 앱에서 이미지를 crop하는 기능을 만들려고 canvas를 사용했다. canvas에서 이미지를 사용하려고 하니 input에서 받은 파일의 데이터 형식으로는 canvas에서 이미지를 바로 그릴 수 없다는 것을 알게 되었다. 우리가 웹을 만들면서 바로 받는 타입은 [URL, File] 두 가지이다. 이 두타입에 대해 간략하게 이야기하자면.. URL : 일반적으로 우리가 이미 알고 있거나 외부의 엔드포인트로부터 받은 이미지의 주소의 값을 말한다. File : Input type file을 사용하면 Input의 event.target.value로 들어오는 값이다. Image data map canvas의 이미지에 대해서 이해를 잘하기 위하여 구글링을 해보았더니 다음과 같은 관계도가 있었..

https://www.youtube.com/watch?v=-wgyxfuv0hU OCR tesseract

Vercel을 사용하다보면, 종종 로컬에서는 실행이 문제없이 되지만, Vercel에서는 컴파일에 실패하는 경우가 있다. 사실 천천히 파일의 문제를 읽어보면서 접근하면 아주 간단하게 문제는 찾을 수 있는데, 대충 읽다보면.. 컴파일 에러를 쉽게 찾지 못하게 된다... 원인 파일을 import 할 때 대소문자에서 나온 문제이다. import는 colLayoutFilled20로 하였지만, 실제파일은 ColLayoutFilled20이라 생긴 문제였다. nextjs에서는 build error가 없었지만 vercel에서 compile failed가 발생한 것을 보면, vercel이 대소문자에 좀 더 엄격하다는 것을 알 수 있다. 또 다른 문제 처음에는 파일 이름을 수정하고 코드를 push 하려고 했는데 문제는.. ..