{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/design-pattern.2/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"cc626b94-4762-5feb-94fa-9fc9b0e5749f","excerpt":"…","html":"\n \n \n
\n💎 목차
\n\n💠 디자인패턴
\n\n- 프로그래밍을 하다보면 유사한 상황을 자주 만나게 됩니다.
\n- 특정 상황에 사용되는 패턴을
정형화를 통해 유연하게 대처할 수 있습니다. \n
\n
\n⬆ 목차
\n
\n😳 코드를 보며
\n▸ 싱글톤 패턴
\n\n- 싱글톤 패턴은
특정 클래스의 객체를 한개만 유지하는 패턴이다. \n- 자바스크립트에서는 이미 객체 리터럴을 이요한 객체 생성 방법이 싱글톤 패턴과 동일하다.
\n
\n\n \n \n \n
\n
\n▸ 팩토리 패턴
\n\n- 비슷한 객체를 공장에서 찍어내듯이 반복적으로 생성할 수 있게 하는 패턴
\n- 컴파일 시점에 구체적인 타입(클래스)을 몰라도 객체 생성이 가능하다.
\n- 팩토리 패턴의 가장 흔한 사례는
Object()를 이용한 객체 생성시, \n- 주어지는 값의 타입에 따라
String, Number, Boolean 등 객체가 생성되는 것이다. \n
\n\n \n \n \n
\n\n- 위의 agg 객체 구현방법은 아래와 같다
\n
\n\n \n \n \n
\n
\n▸ Decorator 패턴
\n\n- 런타임시 객체에 동적으로 부가기능을 추가할 수 있는 패턴
\n
\n\n \n \n \n
\n\n- 위
decorators()를 아래와 같이 구현할 수 있다. \n
\n\n \n \n \n
\n\n- 위와 같이 클릭 이벤트에 대해서 이벤트 핸들링이 가능하다.
\n- 아래는 Proxy를 이용하여 HTTP 라운드 트립을 줄일 수 있는 코드다.
\n
\n\n \n \n \n
\n\n- HTTP 요청이 50 밀리세컨이내로 일어난다면, 각각 보낼 것이 아닌
setTimeout()을 이용하여 요청을 잠시 보류한 후 한번에 보낸다. \n- 그렇게 되면, HTTP 라운드 트립 횟수가 줄어들기 때문에 전체적으로 성능이 향상될 수 있다.
\n
\n
\n
\n\n\n- 객체 간의 영향도 (결합도)가 높은 상태에서는 어플리케이션의 리팩토링이 예기치 않은 결과를 나을 수 있다.
\n- 따라서, 결합도를 낮추기 위해 객체의 상태가 변경되면 Mediator에게 먼저 전달하고,
\n- 이를 Mdeiator가 다른 객체에 전달하는 방식의 코딩이 가능하다.
\n
\n\n