메바동 서식지

react-beautiful-dnd 라이브러리를 이용하여 Droppable 요소 내의 정렬을 지원하지 않고, 위치시킨 순서대로 정렬하도록 구현을 하니 아래와 같은 문제가 굉장히 신경 쓰였다. Draggable 요소를 드래그했을 때, transform: translate(x, y) 스타일을 이용하여 해당 요소를 움직이도록 하고 있기 때문에 요소가 있던 부분이 사라지는 것이 신경 쓰였다. 다른 공간에 드롭을 했을 때는 문제없었지만, 위와 같이 동일한 공간에 드롭을 시켰을 경우 기능상으로는 문제가 없지만 보기 좋지 않았다. import { Card } from 'antd'; import { Draggable } from 'react-beautiful-dnd'; function ItemCard({ id, ind..

지금 하고 있는 프로젝트에서 Drag and Drop 기능을 구현하기 위해 react-beautiful-dnd 라이브러리를 사용하고 있다. react-beautiful-dnd를 사용하면 요소 간의 순서를 변경하기 용이하지만, 요소 간의 순서 변경이 필요 없고 단순히 이동만 구현하려고 하는데 draggable 요소가 움직이는 것이 거슬렸다. 단순 이동만 구현하려는데 위와 같이 정렬 애니메이션이 들어가는 것은 사용자에게 혼란을 줄 수도 있기에 요소가 움직이는 것을 막기로 하였다. import { Card } from 'antd'; import { Draggable } from 'react-beautiful-dnd'; function ItemCard({ id, index, title, content }) { ..

러닝 리액트(Learning React)를 따라 하던 중 XMLHttpRequest를 사용하려니 ReferenceError: XMLHttpRequest is not defined 에러가 발생하였다. XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용하는 객체로, XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. 하지만 XHR은 브라우저에서만 제공되기 때문에 NodeJS 환경에서는 사용할 수 없는 것이 당연하다. axios나 fetch를 사용하여 NodeJS 환경에서 http 요청을 사용할 수 있는데, 책에서 나온 내용을 그대로 따라 하기 위해 XMLHttpRequest를 사용하려면 다음과 같이 하면 된다. // npm npm install xhr2 // ..

Do not access Object.prototype method 'hasOwnProperty' from target object. 대상 오브젝트에서 Object.prototype 메서드 'hasOwnProperty'에 액세스 하지 마세요. eslint를 사용할 경우 no-prototype-builtins라는 규칙에 위배되어 오류가 나타나게 된다. 해당 항목을 읽어보니 ECMAScript 5.1에서 지정된 [[Prototype]]을 가진 객체를 생성할 수 있는 Object.create 함수가 추가되었는데, Object.create(null)을 사용하여 객체를 생성할 경우 Object.prototype을 상속받지 않아 오류를 일으킬 수 있기 때문에 Object.prototype 메서드를 직접 호출하지 못..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 전략 패턴(Strategy Pattern) 전략 패턴은 객체 지향 디자인 패턴 중 하나로, 유사한 동작을 수행하는 알고리즘 집합을 정의하고, 이를 동적으로 선택하여 사용하는 방식으로 구현된다. 이 패턴을 사용하면, 알고리즘이 사용하는 행동들을 인터페이스를 통해 분리함으로써, 런타임에 객체가 다른 알고리즘을 선택할 수 있다. 전략 패턴은 대게 한 객체에서 알고리즘을 다른 객체로 전환하는 것이다. Strategy 객체는 다른 객체에서 호출될 수 있는 동일한 메서드..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 커맨드 패턴(Command Pattern) 커맨드 패턴은 요청이나 동작을 객체로 캡슐화하여 전달하고 조작하기 쉽게 만드는 행동 디자인 패턴이다. JavaScript에서 커맨드 패턴은 동작 요청자와 동작을 수행하는 객체를 분리하는 데 사용되어 코드의 유연성과 재사용성을 향상한다. JavaScript에서 커맨드 패턴은 다음 컴포넌트를 사용하여 구현할 수 있다. Command: 모든 명령에 대한 계약을 정의하는 인터페이스이다. 일반적으로 단일 실행 메서드를 포함한다..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 퍼사드 패턴(Facade Pattern) 퍼사드 패턴은 클래스, 인터페이스 및 하위 시스템으로 구성된 복잡한 시스템에 단순화된 인터페이스를 제공하는 구조 디자인 패턴이다. 클라이언트는 단일 인터페이스를 통해 시스템과 상호 작용할 수 있으며, 시스템 내 개별 구성 요소의 복잡성과 상호 작용을 숨길 수 있다. JavaScript에서 퍼사드 패턴은 일반적으로 복잡한 API, 라이브러리 또는 프레임워크와의 상호작용을 단순화하는 데 사용된다. 이 패턴은 컴포넌트 간의 ..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 어댑터 패턴(Adapter Pattern) 어댑터 패턴은 호환되지 않는 두 인터페이스가 함께 작동할 수 있도록 하는 디자인 패턴이다. 호환되지 않는 두 클래스 사이의 다리 역할을 하며 두 클래스의 소스 코드를 수정하지 않고도 함께 작업할 수 있도록 한다. 어댑터 패턴은 기존 클래스가 새로운 클래스 또는 인터페이스와 함께 작동해야 하지만 두 클래스의 인터페이스가 호환되지 않을 때 유용하다. JavaScritp에서 어댑터 패턴은 일반적으로 타사 라이브러리 또는 A..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 데코레이터 패턴(Decorator Pattern) 데코레이터 패턴은 개발자가 객체를 데코레이터 클래스의 객체로 감싸서 런타임에 새로운 기능을 동적으로 추가할 수 있도록 하는 구조 패턴이다. 데코레이터 패턴을 사용하면 개발자는 객체의 원래 구현을 변경하지 않고도 새로운 동작을 추가하여 객체의 기능을 확장할 수 있다. 데코레이터 패턴은 Component interface, Concrete component, Decorator abstract class, Concr..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 옵저버 패턴(Observer Pattern) 옵저버 패턴은 주체(Subject)로 불리는 객체가 옵저버라고 하는 종속 객체의 목록을 유지 관리하고, 일반적으로 메서드 중 하나를 호출하여 상태 변경을 자동으로 알리는 디자인 패턴이다. 옵저버 패턴은 객체 간의 느슨한 결합을 허용하여 서로의 구현에 대해 세부 사항을 알 필요 없이 상호 작용할 수 있다. 옵저버 패턴은 주체와 주체의 옵저버 간의 일대다 관계를 정의한다. 주체가 변경되면 모든 옵저버에게 알림이 전달되고..