Bleeding edge

이 글에서 이야기 하고 싶은 내용 일반적으로 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 ..

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

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

이 에러를 없애지 않는다고 해서 문제가 생기지 않는 경우도 있지만, 이런 메세지들 때문에 중요한 에러 메세지를 놓칠 수 있기 때문에 이 에러 메세지를 없애는 방법에 대해서 이야기하려고 한다. 보통 이 메세지는 배열을 맵으로 컴포넌트를 반복해서 넣는 경우에 생긴다. 이 때는 배열의 고유한 값을 이용하여 (고유한 값이 없다면 index라도 이용하여) key 값을 넣어주면 된다. 일반적인 htmlElement로 작성하는 경우에는 eslint에서 미리 알려주기 때문에 key 값이 안들어간 경우를 미리 알 수 있지만.. export function BreakSpan({ children, ...rest }: Props) { return ( {children.split(/\n|\\n/).map((text, index..

외부 이미지를 image src에 사용하는 경우에 종종 Invalidsrc prop에러가 나오는데 이 에러를 막는 방법이다. 외부의 이미지를 많이 사용하는 경우 혹은, 외부 이미지로 다른 프로젝트를 테스트 하는경우에 사용하면 편리하다.(방금도 새로운 프로젝트를 테스트하다가.. 윽..) const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "**", }, { protocol: "http", hostname: "**", }, ], }, }; module.exports = nextConfig;

고민한 이유 서버에서 데이터테이블을 받았지만, 그 데이터가 잘못되었다던가 삭제되었을 수도 있다. 이번 프로젝트에서 데이터가 삭제된 경우에 404페이지에 도달하는 경우가 있어서 404페이지를 만들필요가 생겼었다. 문제는.. 프로젝트의 디렉토리가 app이라 이전에 알고 있던 방법을 활용할 수 없었다 참고 : pages 디렉토리의 404 Nextjs pages 디렉토리에서는 404 페이지를 만드는 방법은 너무나 간단하고 Nextjs 공식홈에서 찾아볼 수 있다. https://nextjs.org/docs/pages/building-your-application/routing/custom-error Routing: Custom Errors | Next.js Override and extend the built-i..

글을 쓴 이유 사실 이 코드를 작성하는 방법이 어렵다, 이런건 아니지만 보통 이 코드를 사용하는 순간은 너무나도 분노가 많을 때여서 붙여넣기 용으로 하나 작성한 코드이다. Object.keys(window).forEach(key => { if(/./.test(key)){ window.addEventListener(key.slice(2), event => { console.log(key, event) }) } }) 언제 사용하는게 좋은가 이전에 웹만 만들 때는 잘 몰랐었는데, React native로 웹뷰를 개발하면서 pc가 아닌 다른 기기에 대한 이벤트를 다루면서 어떤 이벤트가 어떤 순서 혹은 언제 발생하나를 보기 위해서 사용하게 되었다. (정확히는.. iOS에서 원하지 않는 순간에 alert가 발생했는..