What is a Pattern?

패턴은 재사용 가능한 솔루션으로, 자바 스크립트 웹 애플리케이션 작성과 같은 소프트웨어 디자인에서 일반적으로 발생하는 문제에 적용 할 수 있습니다. 패턴을 보는 또 다른 방법은 우리가 문제를 해결하는 방법에 대한 템플릿으로, 아주 다른 여러 상황에서 사용할 수 있습니다.

그렇다면 패턴을 이해하고 익숙해지는 것이 왜 중요한가? 디자인 패턴에는 세 가지 주요 이점이 있습니다.

• 패턴은 입증 된 솔루션입니다. 패턴을 정의하는 데 도움이되는 개발자의 경험과 통찰력을 반영한 입증 된 기술을 사용하여 소프트웨어 개발의 문제를 해결하는 견고한 접근 방식을 제공합니다.

• 패턴은 쉽게 재사용 할 수 있습니다. 패턴은 일반적으로 우리 자신의 필요에 맞게 적용 할 수있는 즉시 사용 가능한 솔루션을 반영합니다. 이 기능은 매우 강력합니다.

• 패턴을 표현할 수 있습니다. 패턴을 볼 때 일반적으로 제시된 솔루션의 구조와 어휘가 설정되어있어 상당히 큰 솔루션을 상당히 우아하게 표현할 수 있습니다.

패턴은 정확한 해결책이 아닙니다. 패턴의 역할이 단순히 우리에게 해결책을 제공하는 것임을 기억하는 것이 중요합니다. 패턴은 모든 디자인 문제를 해결하지 못하거나 우수한 소프트웨어 디자이너를 대체하지는 않지만 패턴을 지원합니다. 다음으로 우리는 패턴이 제공해야하는 몇 가지 다른 이점을 살펴볼 것입니다.

• 재사용 패턴은 응용 프로그램 개발 프로세스에서 중대한 문제를 일으킬 수있는 사소한 문제를 방지하는 데 도움이됩니다. 이것이 의미하는 바는 검증 된 패턴으로 코드를 작성하면 코드 구조에 대해 걱정할 시간을 줄이고 전체 솔루션의 품질에 주력 할 수 있습니다. 이는 패턴을 통해보다 정교하고 체계적인 방식으로 코드를 작성하여 장래에 청결한 목적으로 리팩토링 할 필요가 없기 때문입니다.

• 패턴은 특정 문제에 묶일 필요가없는 방식으로 문서화 된 일반화 된 솔루션을 제공 할 수 있습니다. 이러한 일반적인 접근 방식은 우리가 작업하고있는 응용 프로그램 (그리고 많은 경우 프로그래밍 언어)에 관계없이 디자인 패턴을 적용하여 코드 구조를 개선 할 수 있음을 의미합니다

• 특정 패턴은 실제로 반복을 피함으로써 코드의 전체 파일 크기 공간을 줄일 수 있습니다. 반복을 즉각적으로 줄일 수있는 영역에 대해 개발자가 솔루션을보다 면밀히 조사하도록 장려함으로써. 하나의 일반화 된 함수에 찬성하여 유사한 프로세스를 수행하는 함수의 수를 줄이면 코드베이스의 전체 크기가 줄어들 수 있습니다. 이것은 코드를 더 DRY하게 만드는 것으로도 알려져 있습니다.

• 패턴은 개발자의 어휘에 추가되므로 의사 소통이 빨라집니다.

• 공동 사용 경험을 활용하여 자주 사용되는 패턴을 시간이 지남에 따라 향상시킬 수 있습니다. 이러한 패턴을 사용하는 다른 개발자는 디자인 패턴 커뮤니티에 다시 기여합니다. 경우에 따라 완전히 새로운 디자인 패턴을 만드는 반면 특정 패턴을 가장 잘 사용할 수있는 방법에 대한 개선 된 가이드 라인을 제공 할 수도 있습니다. 이를 통해 패턴 기반 솔루션이 특별 솔루션보다 더 강력해질 수 있습니다.

We already use patterns everyday

유용한 패턴이 무엇인지 이해하려면 jQuery 라이브러리가 해결할 수있는 매우 간단한 요소 선택 문제를 검토해 보겠습니다.

클래스 "foo"가있는 페이지에서 발견 된 각 DOM 요소에 대해 카운터를 증가시키려는 스크립트가 있다고 상상해보십시오. 이 요소 컬렉션을 쿼리하는 가장 효율적인 방법은 무엇입니까? 음,이 문제가 해결 될 수있는 몇 가지 다른 방법이 있습니다.

• 페이지의 모든 요소를 선택하고 참조를 저장하십시오. 그런 다음이 컬렉션을 필터링하고 정규 표현식 (또는 다른 방법)을 사용하여 클래스 "foo"가있는 클래스 만 저장합니다.

• querySelectorAll()과 같은 현대적인 기본 브라우저 기능을 사용하여 클래스 "foo"가있는 모든 요소를 선택하십시오.

• getElementsByClassName()과 같은 기본 기능을 사용하여 원하는 컬렉션을 다시 가져옵니다.

그렇다면 이러한 옵션 중 가장 빠른 것은 무엇입니까? 실제로 옵션 3입니다. 대안의 8-10 배 요인. 그러나 실제 응용 프로그램에서는 Internet Explorer 9 이하 버전에서 3.가 작동하지 않으므로 1.과 2. 및 3. 모두 지원되지 않는 1을 사용해야합니다.

그러나 jQuery를 사용하는 개발자는 Facade 패턴을 사용하여 운 좋게 추상화되어 있으므로이 문제에 대해 걱정할 필요가 없습니다. 나중에 더 자세히 살펴보면이 패턴은 몇 가지 복잡한 기본 코드 본문에 대한 간단한 추상화 된 인터페이스 집합 (예 : $el.css(), $el.animate())을 제공합니다. 지금까지 보았 듯이, 구현 레벨 세부 사항에 대해 걱정할 시간이 줄어 듭니다.

뒤에서 라이브러리는 현재 브라우저가 지원하는 요소에 따라 요소를 선택하는 데 가장 최적의 방법을 선택하기 만하면 추상화 계층을 소비합니다.

아마도 우리 모두는 jQuery의 $("selector")에 익숙 할 것입니다. 이것은 페이지에서 HTML 요소를 선택하는 것보다 훨씬 쉽기 때문에 getElementById(), getElementsByClassName(), getElementsByTagName() 등을 수동으로 선택해야합니다.

querySelectorAll()이 이 문제를 해결하려고 시도하지만 jQuery의 Facade 인터페이스 사용과 비교하여 최선의 선택 경로를 스스로 선택하는 것과 비교하십시오. 경연은 없습니다! 패턴을 사용하는 추상화는 실제 가치를 제공 할 수 있습니다.

우리는 나중에이 책의 디자인 패턴을 보게 될 것입니다.