어제보다 더 나은 오늘

들어가기에 앞서 https://www.patterns.dev/vanilla/command-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 명령을 처리하는 객체를 통해 메소드와 실행되는 동작의 결합도를 낮출 수 있다. 특정 작업을 실행하는 객체과 메소드를 호출하는 객체를 분리할 수 있다. 주요 세 가지 클래스: invoker, receiver, command invoker : command를 생성하고 실행하는 역할 나중에 실행할 수 있도록 명령을 대기열(queue)에 넣거나 이미 실행된 명령을 실행 취소하는 데 사용할 수도 있다. receiver : 특정 command를 수신하고 처리 애플리케이션의 다른 클래스나 메소드에 ..

들어가기에 앞서 https://www.patterns.dev/vanilla/mediator-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 컴포넌트들이 서로 직접 통신하는 대신 중재자 역할을 하는 객체를 통해 서로 통신하도록 한다. 중재자 객체가 요청을 받아 이를 필요로 하는 객체들에게 전달한다. 중재자는 보통 객체나 함수로 구현된다. 사용 예제) 채팅 앱 - 채팅 앱에서 사용자는 메시지를 서로 직접 주고 받지 않는다. - 채팅 서버에 메시지를 전송하고, 서버가 각 사용자에게 메시지를 전달한다. class ChatRoom { logMessage(user, message) { const time = new Date().to..

들어가기에 앞서 https://www.patterns.dev/vanilla/observer-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. Observer 패턴에서는 특정 객체를 구독할 수 있는데, 구독하는 주체를 Observer라고 하고, 구독 가능한 객체를 Observable이라고 한다. 이벤트가 발생할 때마다 Observable은 모든 Observer에게 이벤트를 전파한다. Observable 객체는 보통 3가지 주요 특징을 포함한다. observers : 이벤트가 발생할 때마다 전파할 Observer들의 배열 subscribe() : Observer를 observers 배열에 추가한다. unsubscribe() :..

들어가기에 앞서 https://www.patterns.dev/vanilla/module-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다. 장점 코드를 재사용 가능하면서도 작게 나눌 수 있게 해주어 유지보수하기 쉽다. 명시적으로 export한 값들만 외부에 노출되기 때문에 명시적으로 export하지 않은 변수들은 모듈 내에서만 사용함으로써 전역 스코프의 변수들과 이름이 충돌하는 문제를 줄일 수 있다. 모듈 패턴을 사용하면 코드의 일부분을 캡슐화할 수 있다. 이는 의도치 않은 전역 변수 할당을 예방할 수 있어 여러 의존 모듈을 사용하거나 네임스페이스를 사용할 때 안전하다. 필요 조건 모든 자바스크립트 런타임에서 ES2015의 ..

들어가기에 앞서 https://www.patterns.dev/react/presentational-container-pattern 에 있는 내용을 바탕으로 정리한 포스팅임을 밝힙니다. 비지니스 로직과 뷰(view)를 분리하여 관심사 분리(SoC)를 강제한다. Presentational Componentpresentational 컴포넌트는 props를 통해 데이터를 받는다. 받은 데이터를 화면에 표현하는 것이 컴포넌트의 주요 기능이며, 이 목적을 위해 스타일시트를 포함한다. props를 통해 받은 데이터는 presentational 컴포넌트에 의해 수정되지 않는다. UI 변경을 위한 상태 외에는 상태를 갖지 않는다. presentational 컴포넌트에서는 html과 css, 다른 presentationa..

들어가기에 앞서 https://www.patterns.dev/posts/compound-pattern 에 있는 내용을 바탕으로 정리한 포스팅임을 밝힙니다. 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 한다. select, dropdown, menu 컴포넌트에서 사용할 수 있다. 예제 코드) 사진 목록에 버튼을 추가하여 각각의 사진을 수정하거나 삭제할 수 있게 한다. FlyOut 컴포넌트를 위해서 세 가지 구현이 필요하다. 토글 버튼과 메뉴 리스트를 포함한 Wrapper 메뉴를 토글할 수 있는 Toggle 버튼 메뉴를 포함한 List 컴포넌트 React의 Context API와 컴파운드 패턴을 활용해 예제를 구현해 보자. Step 1) FlyOut 컴포넌트 - 토글 여부에 대한 상태를 포함하고, 자식..

비슷한 객체를 대량으로 만들어야 할 때 메모리를 절약할 수 있게 해주는 유용한 패턴 동일한 객체 인스턴스를 여러 번 사용할 수 있도록 하는 패턴으로, 새 복사본을 생성하는 대신 flyweight factory 또는 캐시에서 실제 객체를 공유한다. 이렇게 하면 객체를 생성하는 동안 메모리와 시간을 절약할 수 있다. flyweight는 객체의 set에 대한 공유 인스턴스 역할을 하므로 중복 복사본을 만들지 않고도 해당 객체에 접근할 수 있다. flyweight 패턴은 반드시 고유해야 하는 객체가 아닌 객체를 생성할 수 있는 방법을 제공한다. 이러한 예시로는 문자열이나 이미지처럼 일반적으로 사용되는 항목이 있다. 예제 코드) 책을 추가할 수 있는 앱 - 모든 책은 title, author, isbn 속성을 가..

특정 기능을 구현한 객체나 함수를 다른 객체에 '혼합'하여 그 기능을 추가하는 패턴 다시 말해 특정 행동을 실행해주는 메소드를 제공하는데, 단독으로 쓰이지 않고 다른 클래스에 행동을 더해주는 용도로 사용된다. 상속을 사용하지 않고도 여러 객체나 클래스의 프로토타입에 동일한 기능을 제공할 수 있다. 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..

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..