따뜻한 베지밀

최근에 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와는..

Context API로 상태관리를 해보자 😁 이번 글은 전역적으로 상태를 관리하는 방법 중 리액트 자체에서 제공하는 Context API를 사용해서 다루어 보는 법을 알려드리려고 합니다. Context API가 뭔데요? 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달됩니다(props drilling). 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다. Context API를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 쉽게 풀어서 얘기하자면, 위에서 아래로 주면서 props가 너무 많이 전달되는 현상을 없애기 위해서..

When do we use React LifeCycle? 먼저, 리액트의 생명주기가 어떤 점에서 필요하고, 무엇인지에 대해 알아봅시다 😁 사용자와 함께하는 동적인 페이지를 만들기 위해 state와 props는 사용자에 어떤 특정 행동에 의해 값이 변합니다. 사용자가 사이트에 들어오기 전에는 특정한 API를 호출해서 데이터를 가져와야 하는 경우가 필요할 수도 있습니다. 리액트에서는 DOM(Document Object Model)에서 특정한 시간에 특정한 행동을 일어나게 할 수 있도록 생명주기를 만들었다고 생각합니다. 즉, 리액트에서 말하는 생명주기는 내가 원하는 것과 화면에 렌더링하는 구성 요소들을 일치시킬 수 있도록 DOM을 관리하는 일종의 수단이 됩니다👍 What is React Life Cycle? ..

코로나 시국에는 42서울 체크인 서비스로 출석명부를 관리했던 때가 있었습니다. 기존에 있던 체크인 사이트 코드를 분석해보면서, 혼자 새로운 데이터베이스를 설계할 때 제가 생각했던 것을 글로 남겨보고자 작성합니다. ERD가 뭔데 그래요? Entity Relationship Diagram의 약자로서 시스템의 엔티티들이 무엇이 있는지, 어떤 관계가 있는지를 나타내는 다이어그램입니다. 쉽게 설명하자면 하나의 클래스를 만든다고 생각하면 됩니다. 예를 들면 운동하는 공을 정의하기 위해서는 Ball이라는 클래스를 만들고 speed, location 등을 통해서 공의 위치와 속도를 나타낼 수 있는 것처럼 하나의 객체를 정의하고 어떤 속성을 가지고 있는지를 정의하면 되는 것입니다. Ball말고 ! 서비스에서는 어떻게 만..