어제보다 더 나은 오늘

특정 기능을 구현한 객체나 함수를 다른 객체에 '혼합'하여 그 기능을 추가하는 패턴 다시 말해 특정 행동을 실행해주는 메소드를 제공하는데, 단독으로 쓰이지 않고 다른 클래스에 행동을 더해주는 용도로 사용된다. 상속을 사용하지 않고도 여러 객체나 클래스의 프로토타입에 동일한 기능을 제공할 수 있다. class Dog { constructor(name) { this.name = name } } const dogFunctionality = { bark: () => console.log('Woof!'), wagTail: () => console.log('Wagging my tail!'), play: () => console.log('Playing!'), } // 메소드 복사 Object.assign(Dog.pr..

키워드 super는 다음과 같을 때 사용한다. - super.method(...)는 부모 클래스에 정의된 메소드를 호출한다. - super(...)는 부모 생성자를 호출하는데, 자식 생성자 내부에서만 사용할 수 있다. 1. 메소드 오버라이딩 class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; alert(`${this.name}가 속도 ${this.speed}로 달립니다.`); } stop() { this.speed = 0; alert(`${this.name}가 멈췄습니다.`); } } class Rabbit extends Animal { hide() { alert(`${t..

Object.assign() 메소드는 하나 혹은 그 이상의 source 객체의 열거 가능한 모든 속성을 복사해서 target 객체에 붙여넣은 후 target 객체를 return 한다. const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // Expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget === target); // Expected output: true 복수의 source 객체도 가능하다. // syntax Object.assign(..

Proxy는 다른 사람의 '대리인'이라는 의미 Proxy 패턴은 해당 객체를 직접 다루는 것이 아니라 Proxy 객체와 인터렉션하는 것이다. Proxy 클래스의 두 번째 인자는 핸들러이다. 핸들러 객체에서 인터렉션의 종류에 따른 특정 동작들을 정의할 수 있다. const person = { name: "John Doe", age: 42, nationality: "American" }; const personProxy = new Proxy(person, { get: (obj, prop) => { console.log(`The value of ${prop} is ${obj[prop]}`); }, set: (obj, prop, value) => { console.log(`Changed ${prop} from ..

props drilling에 의존하지 않고 컴포넌트가 직접 데이터에 접근할 수 있는 방법 데이터를 사용할 컴포넌트를 Provider로 감싼다. Provider는 HOC(고차 컴포넌트)로 Context라는 객체를 제공한다. React가 제공하는 createContext 메소드를 활용해 Context 객체를 만들어낼 수 있다. Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다. Provider 컴포넌트는 value라는 prop으로 하위 컴포넌트들에 내려줄 데이터를 받는다. 이 컴포넌트의 모든 자식 컴포넌트들은 해당 provider를 통해 value props에 접근할 수 있다. const DataConte..

팩토리 패턴을 사용하면 함수를 호출하는 것으로 객체를 만들 수 있다. new 키워드를 사용하는 대신 함수 호출의 결과로 객체를 만들 수 있는 것이다. 장점 동일한 프로퍼티를 가진 여러 작은 객체를 만들어낼 때 유용하다. 유사한 반복 작업을 하는 객체를 만드는 것이 팩토리 패턴의 주요 목적이다. 단점 대부분의 상황에서 객체를 일일히 만드는 것보다 클래스를 활용하는 편이 메모리를 절약하는 데 더 효과적이다. 예제 코드) chart import React from 'react'; // Chart Factory function createChart(chartType, data) { switch (chartType) { case 'bar': return new BarChart(data); case 'line': ..

2. Prototype Pattern 동일한 타입의 여러 객체들이 프로퍼티를 공유할 때 유용하게 사용할 수 있다. 생성자의 prototype 프로퍼티와 생성된 인스턴스의 __proto__ 프로퍼티는 동일하며, 이들을 통해 Prototype 객체를 확인할 수 있다. class Dog { constructor(name) { this.name = name } bark() { return `Woof!` } } const dog1 = new Dog('Daisy') const dog2 = new Dog('Max') const dog3 = new Dog('Spot') console.log(Dog.prototype) // constructor: ƒ Dog(name, breed) bark: ƒ bark() console..

서론에 이어 이제 본격적으로 개별 패턴의 특징을 하나씩 살펴보자. 1. Singleton Pattern 애플리케이션 전체에서 단일 인스턴스를 공유 클래스를 한 번만 인스턴스화하고, 이 인스턴스를 전역적으로 접근해서 사용한다. Object.freeze() 메소드를 사용해 객체를 사용하는 쪽에서 직접 객체를 수정할 수 없도록 한다. 장점 메모리 공간 절약 단점 자바스크립트에서는 전역 변수를 생성하는 것을 흔히 안티 패턴으로 여긴다. 만약 전역 변수가 잘못된 판단으로 올바르지 않게 만들어진 경우 잘못된 값으로 덮어쓰여질 수 있으며, 이 변수를 참조하는 구현들이 모두 예외를 발생시킬 수 있기 때문이다. 그러나 Singleton 패턴은 일반적으로 앱에 전역 상태를 위해 사용한다. 코드의 여러 부분에서 수정 가능한..

지난 한 달 간 디자인 패턴에 대해 주1회 스터디를 진행했다. 매주 patterns.dev의 디자인 패턴 중 4~6개 아티클을 순서대로 정해 스터디 전에 읽어온 후에 스터디 시간에는 서로 궁금한 점이나 잘 이해가 되지 않는 부분을 논의하고, 각자 프로젝트에서 작성한 코드베이스 중에서 유사한 패턴이 있는 경우 공유하기도 했다. 다른 사람의 코드를 보는 경험은 늘 흥미롭기 마련인데 디자인 패턴이라는 틀 안에서 볼 수 있다는 점이 좋았고, 꼭 디자인 패턴이 아니라더라도 현재 고민하고 있는 부분들을 나누면 스터디 파트너 분이 같이 고민해주셔서 감사했다. 한 달 간의 스터디를 마무리하고 다음 주제로 넘어가기로 해서 디자인 패턴에 대해 공부한 내용을 간략하게나마 나의 언어로 정리해두려고 한다. patterns.de..

1. innerText 해당 요소 내에서 사용자에게 ‘보여지는’ 텍스트 값 display: none 으로 정의된 숨겨진 텍스트는 가져오지 않는다. 사용자가 브라우저에서 ctrl + c 해서 클립보드에 복사한 내용을 가져오는 것과 마찬가지이다. innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. 2. textContent Node의 속성 innerText와 달리 나 태그와 상관없이 해당 노드가 가지고 있는 텍스트 값을 그대로 읽는다. textContent로 가져온 것은 모두 string 이다. HTML로 분석할 필요가 없기 때문에 innerHTML보다 textContent의 성능이 더 좋다. 세 가지 중에 권장하는 속성이다. 3. inn..