어제보다 더 나은 오늘

들어가기에 앞서 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의 ..

타입스크립트에서 type alias와 interface는 여러 차이가 있지만 코드 에디터에서 미리보기로 타입의 형태를 표기하는 방식에 있어 차이가 있다. type과 interface 각각을 살펴보자. 이때 VS Code에서 User 타입에 마우스를 올리면 다음과 같이 User 객체의 모든 프로퍼티를 볼 수 있다. 그렇다면 이번에는 똑같은 형태의 객체를 interface로 정의해 보자. interface로 정의한 객체에 마우스를 올리면 데이터의 형태를 보여주지 않고 interface의 명칭만 보여준다. 한 파일 안에 타입이 정의되어 있지 않은 경우에는 데이터의 구체적인 형태를 파악하기 위해 해당 파일로 이동해야 하는 경우가 많다. 따라서 변수에 연결된 타입이 구체적으로 어떤 모양인지 파악할 때는 타입 별칭..

들어가기에 앞서 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 컴포넌트 - 토글 여부에 대한 상태를 포함하고, 자식..

📍 문제가 발생한 상황 ant design 라이브러리를 사용한 프로젝트에서 Modal 컴포넌트의 modal open 관련 로직을 별도의 ui 컴포넌트로 작성해 사용하는 쪽에서는 관련 로직에 대한 상태 없이도 사용할 수 있게 설계하고자 했다. 처음에 생각한 코드는 다음과 같다. import { Modal as AntdModal } from 'antd'; function Modal({ title, children, ...rest }) { const [isOpen, setIsOpen] = useState(false); return ( setIsOpen(false)} {...rest}> {children} ); } 이렇게 선언한 컴포넌트를 사용부에서는 다음과 같이 호출한다. centered나 width 같은 스..

비슷한 객체를 대량으로 만들어야 할 때 메모리를 절약할 수 있게 해주는 유용한 패턴 동일한 객체 인스턴스를 여러 번 사용할 수 있도록 하는 패턴으로, 새 복사본을 생성하는 대신 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..