따뜻한 베지밀

React, Vue 등 Virtual DOM을 채택한 경우가 많이 있습니다. DOM 이 아니라, Virtual DOM을 선택해야 하고, 사용해야 하는 이유에 대해서 알아봅시다. DOM (Document Object Model) Virtual DOM 을 알기 전에 실제 DOM에 대해서 간단하게만 알아봅시다. DOM 은 문서의 구조화된 표현을 제공하고 있으며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 담당을 합니다. 간단하게 얘기하면 개발자들은 DOM 을 만들어내고, DOM 은 웹페이지를 구성하면서 사용자들에게 보여지는 역할을 담당합니다. Browser Workflow (webkit) Webkit 에서 Browser가 작동하는 과정을 도식화한 모습입니다. 간단하게 내용을 살..

리액트 훅에서 종속에 관한 lint 경고 react-hooks/exahaustive-deps 가 있습니다. 개발을 하다가 보면 "이런 것도 넣어야 해?" 라는 생각에 의해서 넣지 않고 싶은데 노란 줄의 경고가 심히 거슬리는 경우가 종종 생깁니다. 경고가 거슬려서 배열에 종속을 추가했을 때, 무한 재렌더링 또는 원하지 않은 동작으로 끝나는 경우가 생깁니다. 그래서 이 종속을 안 넣는게 맞지 않나? 라는 생각을 할 수 있습니다. 그 외에도 자신이 생각했을 때 변하지 않는 정적인 값을 종속으로 넣지 않으려고 하거나, 아니면 생명주기 상으로 특정값일 때만 렌더링이 되는 것을 원해서, 혹은 다른 이유에 의해서 아래와 같이 사용하는 경우도 있습니다. useEffect(() => { setCount(count + 1..

z-index의 css 속성은 개발자들이 애용하는 속성이라고 생각합니다. 그러나, 많이 사용되는 개념이지만 정확하게 알고 있는 개발자는 생각보다 적은 것 같아서 해당 개념에 대해서 서술하려고 합니다. z-index 어떤 것일까? z-index CSS 속성은 위치 지정 요소와 해당 하위 항목 또는 플렉스 항목의 z 순서(높낮이)를 설정합니다. 더 큰 z-index 가 있는 겹치는 요소는 더 작은 z-인덱스 요소보다 높게 위치합니다. z-index 가 100과 99가 있으면 정확하게 100 레벨에, 99 레벨에 위치할까요? 정확하게는 상대적인 개념입니다. z-index에는 stacking-context(쌓임 맥락)이 존재 합니다. 쌓임 맥락에 대해서 알아봅시다. Stacking Context Stacking..

패턴에서는 세부 사항은 해당 글에서 자세하게 다루지 않을 예정입니다. 편의를 위해서 Container Presenter패턴은 PC라고 불러 얘기할 예정입니다. 추가적으로 리액트에서는 커스텀 훅이라는 마법이 있어 모든 단점을 보완할 수 있다고 생각하나, 두 패턴의 장단점을 비교하기 위해 커스텀 훅의 존재는 잠시 배제할 예정입니다. Container Presenter React의 대가인 Dan Abramov가 2015년에 제시했던 디자인 패턴입니다. Container에서 논리적인 연산, Presenter에서 렌더링되는 뷰를 담당하고 있습니다. Atomic 디자이너 Brad frost가 2013년 즈음에 창시해낸 방법으로 Atom -> Molecules -> Organisms -> Templates -> Pa..

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()로 받아들인 요소의 수가 이미 존재하는 객체보다 많..

TestCode란? 1. TestCode는 왜 작성해야 할까요? 1.1 신뢰성 측면 TestCode를 통해서 우리는 우리의 코드가 잘 작동하는지 확인할 수 있습니다. 자신의 코드가 신뢰할 수 있고, 다른사람들에게 어떤식으로 작동하고 사용할 수 있는지 알려주는 지표가 됩니다. 1.2 시간성 측면 TestCode를 작성하면 오히려 개발이 빠르게 진행될 수가 있습니다. “급할수록 돌아가라”라는 말은 Test를 진행할 때에도 마찬가지입니다. TestCode를 작성하지 않으면 초반에 더 빠르게 개발이 될 수 있겠지만, 나중에 디버깅하는 과정에서 더 시간이 잡아먹게 되고 더 오랜 시간이 걸릴 수 있습니다. TestCode 작성 전 테스트 과정은 다음과 같습니다. 코드를 수정합니다. 서버를 동작하고, 테스트 데이터를..

최근에 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이 사제폭탄을 만들다가 걸려서 아파트에 불이나고, 모든 재산을 압수 당한 시점부터 시작이 됩니다. 현재는 ..