목차 render props pattern 이란? 왜 사용할까? 구현해보자! 비교해보자! render props pattern 이란? 이 패턴은 props로 다른 components를 랜터링하는 패턴입니다. 간단한 예제를 한번 볼까요? import { useState } from 'react' const Title = ({ render }) => render(); const Title2 = ({ children }) => { const [name, setName] = useState('Eddie'); return children(name); } function App() { return ( Hello Title!} /> {(name) => Hello {name} } ); } 이렇게 사용 하면 이제 Hel..
📌 목록 HOC 란? 간단한 HOC 구현 JSON Placeholder 데이터로 withLoader 만들기 HOC의 장점과 단점 📌 HOC 란? High Order Component는 공통 로직을 재사용 해서 사용하게 끔 만들어 줍니다. 마치 mixin과 같이요. 하지만 어떤 컴포넌트를 한번 감싸서 컴포넌트를 만들게 합니다. 그럼 한번 어떤 녀석인지 볼까요? 📌 간단한 HOC 구현 먼저 이런 withStyle 함수를 한번 정의해볼게요. const withStyle = (Component) => { return props => { return } } 그리고 버튼과 Text를 만들어 보겠습니다. import withStyle from "./hoc/withStyles"; const Button = ({ sty..
📌 목차 믹스인 패턴이란? 믹스인 패턴 믹스인 패턴 심화 결론 📌 믹스인 패턴이란? 재사용 가능한 함수들을 객체나 클래스에 추가하는 패턴입니다. Vue와 React에서도 비슷한 예제를 찾아볼수 있는데 Vue의 예시는 아래와 같습니다. // mixin.js export default { method: { greet() { console.log("Hello World!"); } } } import mixin from './mixin' export default { mixins: [mixin], created() { console.log(this.greet()); } } 그럼 자바스크립트에서 이걸 어떻게 표현할 수 있는지 한번 볼까요? 📌 믹스인 패턴 class Dog { constructor(name) { ..
📌 목차 Introduction What's Mediator Pattern? Implementation Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 중재자 패턴에 대해 배워보겠습니다. 📌 What's Mediator Pattern? 중재자 패턴으로 Messenger Class를 구현 해볼 텐데요. 중재자 패턴은 다음 도형과 같습니다. Message를 각각의 participants에게 뿌려주게 됩니다. 여기에선 일단 두명만 등록을 하는 것으로 가정을 하고 어떻게 구현이 되는지를 보여드리곘습니다. 📌 Implementation 일단 중재자 패턴으로 쓴 Messenger는 이렇게 생겼습니다. class Messenger { constructor(..
📌 목차 Introduction What is Observer Pattern? Implementation Conclusion Reference 📌 Introduction 안녕하세요. 이번 포스팅에서는 Observer Pattern에 대해 알아보겠습니다. 📌 What is Observer Pattern? 옵저버 패턴은 객체의 상태 변화를 관찰 하는 관찰자를 등록하여 상태 변화가 있을때 noti를 주는 디자인 패턴입니다. 📌 Implementation 먼저 subject클래스를 정의 해보겠습니다. class Subject { constructor() { this.observers = []; return this; } addObserver(observer) { this.observers.push(observe..
📌 목차 Introduction Module Pattern 이란? Moudle Pattern 구현 Module Pattern의 장단점 Conclusion Reference 📌 Introduction 안녕하세요! 이번 포스팅에서는 자바스크립트에서 module pattern에 대해서 공부해보겠습니다.🎉 Singleton 패턴과는 비슷하지만 Singleton처럼 하나의 instance만 만드는것이 아닌 다수의 instance를 만드는 것이 module pattern 입니다! 📌 Module Pattern 이란? Module pattern이란 전체 어플리케이션 일부를 독립된 코드로 분리하여 만드는 것 입니다. 다른 여타 프로그래밍 언어처럼 자바스크립트는 접근 제한자(public, private,...)가 없기 ..
📌 목차 Introduction Singleton 패턴이란? Singleton 패턴 구현 Conclusion Reference 📌 Introduction 안녕하세요 이번 포스팅에서는 design pattern중 singleton 패턴에 대해서 배워보겠습니다! 📌 Singleton 패턴이란? 이름에서 single이 들어가는 것으로 유추할 수 있듯이 전체 시스템에서의 하나의 인스턴스를 존재하도록 보장하는 객체 생성패턴입니다. 따라서, 객체 리터럴도 모두 싱글톤 패턴이라고 할 수 있습니다. 하지만 모든 속성이 다 공개가 되어있기에 비공개를 만들때 제대로 된 singleton 패턴 입니다. 📌 Singleton 패턴 구현 Singleton은 객체 리터럴 + 클로저로 구현할 수 있습니다. 다음 코드를 봐주세요. ..
📌 목차 Object Creation Constructor in es5 fucntion Constructor in prototype Constructor in Class 📌 Object Creation 빈 Object를 생성하는 3가지 방법 // 1. const object1 = {}; // 2. const object2 = Object.create(Object.prototype); // 3. const object3 = new Object(); Object에 key와 value를 할당하는 4가지 방법 Dot Syntax newObject.key = "value"; Square Syntax newObject["key"] = "value"; Object.defineProperty Syntax Object...
