메바동 서식지

소프트웨어 개발에서 특정 연산이나 알고리즘이 많은 자원(CPU 시간, 메모리 등)을 소비하여 실행 시간이 오래 걸리는 것을 "계산이 비싸다"라고 표현을 한다.개발자들은 캐싱이나 최적화 기법을 통해 이를 효율적으로 관리하려고 노력하는데, 일상에서 가성비를 따지는 삶을 사는 나로서는 계산이 비싼 코드를 작성하는 것도 괜찮은 것 같다는 생각을 한다. 아무튼, 종종 JavaScript에서 특정 함수가 얼마나 오랜 시간 걸리는지 측정을 해야 하는 때가 있는데, 이를 간단하게 측정하는 방법을 알아보자.  정말 간단하다. console.time()과 console.timeEnd() 사이에 측정하고 싶은 코드를 두면 실행 시간을 알 수 있다.  그럼 이렇게 실행 시간을 알 수 있다.React 공식 문서에서는 1ms 이..

러닝 리액트(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)로 불리는 객체가 옵저버라고 하는 종속 객체의 목록을 유지 관리하고, 일반적으로 메서드 중 하나를 호출하여 상태 변경을 자동으로 알리는 디자인 패턴이다. 옵저버 패턴은 객체 간의 느슨한 결합을 허용하여 서로의 구현에 대해 세부 사항을 알 필요 없이 상호 작용할 수 있다. 옵저버 패턴은 주체와 주체의 옵저버 간의 일대다 관계를 정의한다. 주체가 변경되면 모든 옵저버에게 알림이 전달되고..

"JavaScript Design Pattern" 포스팅은 ChatGPT에게 "Essential design patterns for JavaScript developers to learn"로 질문한 뒤 나온 내용에 대해 정리하는 포스팅입니다. 1. 팩토리 패턴(Factory Pattern) 팩토리 패턴은 생성할 객체의 정확한 클래스나 생성자 함수를 지정하지 않고도 객체를 생성할 수 있는 방법을 제공하는 생성 패턴이다. 팩토리 패턴은 객체를 생성하기 위한 일반 인터페이스를 제공하고 하위 클래스가 생성될 객체의 유형을 변경할 수 있도록 한다. 팩토리 패턴은 다음과 같은 이점을 제공한다. 캡슐화: 객체 생성이 애플리케이션의 로직과 분리되어 보다 모듈화 되고 유지 관리가 용이한 아키텍처를 제공한다. 유연성: 팩..