따뜻한 베지밀

Konva를 Next에서 사용하려니까 다음과 같은 이슈가 발생했습니다. Error: Must use import to load ES Module: C:\Users\??\dev\atomic\node_modules\konva\lib\Core.js require() of ES modules is not supported. require() of C:\Users\??\dev\atomic\node_modules\konva\lib\Core.js from C:\Users\??\dev\atomic\node_modules\react-konva\lib\ReactKonvaCore.js is an ES module file as it is a .js file whose nearest parent package.json con..

Konva를 Next에 도입하던 도중 해당 에러가 발생했습니다. 깃허브 konva 레포에 들어가서 Issue에 해당 부분을 검색한 결과 m1 이슈입니다. M1 네이티브는 node15에서 캔버스의 바이너리 버전을 릴리스하지 않습니다. 따라서 캔버스를 설치하면 소스코드에서 자동으로 컴파일이 되지만 해당 종속성을 설치하지 않으면 오류를 보고하게 됩니다. 그래서 종속성을 설치해주어야 합니다. arch -arm64 brew install pkg-config cairo pango jpeg giflib librsvg 를 실행해줍니다. 해당 명령어는 CPU에 대한 정보를 업데이트할 때 사용합니다. node-canvas에서 컴파일링 관련해서 제공하는 커맨드입니다. https://github.com/Automattic/n..

데이터 시각화 라이브러리 D3를 다루어 봅시다. 해당 라이브러리는 리액트에 사용하기에는 어쩌면 어려울 수 있는 저수준 라이브러리입니다. 그러나 시각적으로 재미있는 기능이 많고, 자주 쓰는 라이브러리이므로 간단한 명령어를 알아봅시다. Enter, Update, Exit Enter, Exit라는 명령어를 보았을 때 생각났던 것은, 객체에 마우스가 들어오고 나갔을 때 시점을 생각했습니다. 그러나 이는 아예 달랐습니다. Update라는 것은 선택한 요소들의 attr값을 바꿔주는 것 뿐입니다. 요소들을 다시 선택해서 재활용을 시도합니다. 막대의 너비로 데이터를 표시했다면, 높이나 x,y 좌표 등은 그대로 놔두고 너비의 값만 바꾸어 줍니다. Enter는 data()로 받아들인 요소의 수가 이미 존재하는 객체보다 많..

최근에 npm 라이브러리에서 악성코드에 대한 이슈가 많아지고 있습니다. https://jfrog.com/blog/malware-civil-war-malicious-npm-packages-targeting-malware-authors/ 25 Malicious Packages Discovered in npm Repository JFrog discovers 25 open-source npm malicious packages, including one that targets malware authors to hijack stolen Discord tokens. Find out more > jfrog.com 최근에 jfrog에서 npm 저장소에 있는 25개의 악성 패키지를 공개했으며, 이 패키지는 자동화된 검색 ..

Marak Squires라는 개발자가 직접 만든 faker.js, color.js를 고의로 손상시키는 사태가 발생했습니다. faker.js의 경우는 파일 자체를 모두 날려버리는 업데이트를 하면서 기존 코드가 무용지물이 되게 했지만, color.js에는 인피니티 루프를 넣는 패치인 1.4.0버전에서 1.4.1 버전으로 업데이트하면서 많은 개발자를 괴롭혔습니다. 더구나, 두 라이브러리 모두 다운로드 수가 상당했던 라이브러리였기 때문에 많은 개발자들이 해당 사태를 겪었어야 합니다. color.js faker.js 어쩌다가 이런 사태가 벌어지게 되었을까요? 경위를 간단하게 알아봅시다. 해당 사건은 marak이 사제폭탄을 만들다가 걸려서 아파트에 불이나고, 모든 재산을 압수 당한 시점부터 시작이 됩니다. 현재는 ..

해당 글은 Recoil Github 페이지를 직접 돌아다니면서 확인했던 부분을 다루고 있습니다. Recoil 라이브러리는 이슈를 꾸준히 관리하고 있고, 정식버전을 내기 위해서 활발하게 업데이트되고 있는 라이브러리임으로 글을 읽는 시점과 아래 글은 다를 수 있음을 미리 밝힙니다. Recoil은 어떤건가요? Recoil은 React에서 상태 관리를 위해 만들어진 라이브러리입니다. Atom이라는 독립적인 Store로 전역으로 관리하고 싶은 상태가 있으면 언제든지 사용하면 됩니다. 전역 상태를 사용할 수 있는 Context API, Redux, Mobx 등의 라이브러리에 비해서 러닝커브가 낮은 편이고, 코드가 간단해서 아직 첫 정식버전이 출시되지도 않았지만 많은 사람들이 사용 중입니다. Context API와는..