Input의 onChange에 setState를 할당해서 값이 바뀔때마다 상태값이 변경되도록 설정했더니, 매번 Input에 입력한 값이 변경될 때마다 렌더링이 다시 되는 기염을 토했다. 당연한 얘긴 줄 알고 있었는데 주리님이 보시고 ‘이럴때는 이런 식으로 최적화가 가능해요’라고 말씀해주셔서, react-hook-form, react-final-form, formic같은 애들에 대해 알게됐다. 조금 고민해보다가 ‘엥? 얘는 일단 간단하니까 useRef만 써도 되는거 아닐까?’라는 결론에 도달, Input에 ref를 냅다 꽂아버렸더니 LegacyRef에 MutableRefObject를 할당할 수 없다는 에러가 발생했다. 우선 Input의 ref를 보면 요 녀석은 LegacyRef|undefined를 받게 되..

꽤 예전에 FirebaseMessaging을 사용해서 전달받은 클라우드 메시지를, FlutterLocalNotifications를 사용해서 푸시 메시지로 띄우는 작업을 했었습니다. 이번에 맞닥뜨린 문제는 FlutterLocalNotifications를 사용해서 화면에 띄운 푸시메시지를 터치해서 앱이 실행됐을 때, FirebaseMassaging에서 제공하는 getInitialMessage()의 실행 결과값이 null로 반환되는 상황입니다. 물론 onMessageOpenedApp() 역시 기대한대로 동작하지 않습니다. private Task getInitialMessage(Map arguments) { return Tasks.call( cachedThreadPool, () -> { if (initialMe..

Onvif 라이브러리 크로스 컴파일 방법 정리 이번에는 libOnvif.so 라이브러리 파일을 생성하는 방법에 대해 정리해보고자 합니다. 현대사회를 살아가는 여러분들에게 이미 WSDL이나 SOAP은 거의 잊혀진 기술이다보니, 마치 로스트 테크놀로지같은 느낌일텐데요. 그나마 다행인 점은 검색하면 위키피디아 등에 어떤 기술인지 잘 설명이 되어있다는 점입니다. 물론 크게 도움은 안된다는게 문제지만 말이죠. 이 글에서는 SOAP 프로토콜을 통해 제공되는 Onvif WSDL을 기반으로 C/C++ 코드를 생성해내는 방법과, 오류 대처 요령에 대해 살펴봅니다. 만약 여러분이 Onvif 라이브러리를 빌드해야 할 일이 생겨서 컨플루언스 등에 남겨진 고문서를 찾아본다면 생각보다 쉽게 해결될수도 있지만, 의외로 난항에 부딪..

Remix에 Pico.css를 적용해보자 React 기반 풀 스택 프레임워크라고 소개된 Remix. 대충 Blog tutorial를 따라서 해봤는데, CSS와 관련된 내용이 하나도 없더라구요. 기왕 마크다운을 읽고 쓰는 것 까지 됐는데말이죠. 그래서 좀 꾸며볼까하다가 얼마전에 건너건너로 들은 10Kb미만의 CSS 프레임워크, Pico.css를 적용해보기로 합니다. 당연히 삽질에 삽질을 했지만 검색해봐도 뾰족한 답이 없었기에, 나중에 까먹으면 찾아보려고 작성합니다. Pico.css를 설치하자 Pico.css의 Getting Started 페이지를 보면 Pico.css를 설치하기 위한 세 가지 방법이 나와있습니다. Pico.css 다운로드 후 {/* ... */} ); } 이렇게 간단한 걸 못해서 삽질을 하..

OpenResty, NGINX Cross-compile에 대하여 임베디드 시스템에 OpenResty를 사용한 이후로, 칩셋이 변경될 때마다 크로스 컴파일을 다시 해줘야했다. 문제는 기반지식이 전혀 없는 상태인데다, 인수인계 문서의 거의 내용도 없었다. NGINX 자체를 크로스컴파일 하는 경우는 종종 있지만 OpenResty를 크로스컴파일하는 글은 찾기 어려웠다. 이전에도 작성했듯이 scratchbox2, qemu와 같은 툴로 환경을 설정해주면 간단하게 끝나는 일이다. 문제는 toolchain 형태로 제공되는 컴파일러의 경우, scratchbox2를 사용해서 환경설정을 하게되면 에러가 발생한다. 예를 들면 심볼릭 링크를 인식하지 못해서 컴파일러가 동작하지 않는다던가. 애석하게도 작년에 크로스컴파일을 마지막..

최근 트위터에서 이런저런 계정이나 토픽을 구독할 수 있다는 걸 알게되서, 여기저기 기웃거리던 도중 JavaScript Quiz이라는 글을 발견했다. JsBin과 같은 사이트에서 동일하게 코드를 입력한 후 콘솔창에 출력되는 결과를 보면, 다음과 같다. [object Object] { isDeveloper: true, name: "Faheem" } 잘 보면 키값을 명시하지 않았는데, Object에 변수명이 키값으로 들어있는 것을 볼 수 있다. 이는 ES6에서 추가된 문법적 설탕으로, 다음의 글(ECMAScript 6 and Object Literal Property Value Shorthand)에 잘 설명되어 있다. ES5에서 아래와 같은 방식으로 작성해야했던 것을 생각해보면, 꽤나 간소해진 셈이다. 같은 ..