패턴이란 소프트웨어 디자인에 있어 반복해서 발생하는 문제에 적용할 수 있으며, 재사용할 수 있는솔루션입니다. 우리의 경우에는 자바스크립트로 어플리케이션을 만들 때에 해당합니다. 패턴은 이렇게 이해할 수도 있습니다. 패턴이 문제를 해결하는 방법에 대한 템플릿이라고 이해하는 것입니다. 여러가지 서로 다른 상황에서 사용할 수 있는 템플릿 말입니다. 디자인 패턴을 이해하는 것은 왜 중요할까요? 디자인 패턴과 왜 친숙해져야 할까요? 디자인 패턴을 사용하면 세 가지 이점이 있습니다. :
- 패턴은 검증된 솔루션입니다 : 디자인 패턴은 소프트웨어 개발과정에서 발생하는 이슈를 해결하는데에 있어 검증된 솔루션을 사용해서 믿을만한 접근법을 제공합니다. 검증된 솔루션에는 패턴을 정의하고 개선한 개발자들의 경험과 통찰력이 녹아 있습니다.
- 패턴은 쉽게 재사용할 수 있습니다 : 패턴에는 보통 독창적인 솔루션이 들어 있습니다. 그리고 여러분의 필요에 맞게 조정할 수 있습니다. 이러한 특징 때문에 패턴은 매우 강력합니다.
- 패턴은 좋은 표현수단을 제공합니다 : 어떤 패턴을 보면, 그 안에는 구조가 있고, 솔루션에 관한 '어휘'가 있습니다. 이 구조와 어휘를 사용하면, 좀 더 크고 복잡한 솔루션에 대해서도 명확하게 표현하는데 도움이 됩니다.
패턴은 문제상황에 딱 들어맞는 솔루션은 아닙니다. 패턴이 하는 역할은 솔루션의 틀(scheme) 같은 것을 제공하는 것입니다. 패턴을 쓴다고 해서 디자인 문제가 모두 해결되는 것도 아니고, 패턴이 있다고 해서 능력있는 소프트웨어 디자이너를 대신해주는 것도 아니다. 패턴은 능력있는 소프트웨어 디자이너를 도와줍니다. 다음 부분에서는 패턴을 쓸 때의 다른 이점에 대해 몇 가지 살펴 보겠습니다.
-
패턴을 재사용하면 어플리케이션 개발과정에서 발생하는 주요 문제를 발생시키는 작은 이슈들을 예방할 수 있습니다. 검증된 패턴에 따라서 코드를 작성하면, 코드의 구조에 대해서 시간을 덜 써도 되기 때문에, 솔루션 전반적인 품질에 더 많은 시간을 할애할 수 있습니다. 이게 가능한 이유는, 패턴을 사용하면 더 구조적이고 잘 조직된 방식으로 코딩할 수 있기 때문에, 리팩토링할 필요성 자체가 줄어들기 때문입니다.
-
패턴은 일반화된 해결책을 제공해준다. 이 해결책은 특정 문제에 얽매이지 않는 방식으로 문서화됩니다. 이런 일반화된 접근이라 함은 여러분이 어떤 어플리케이션을 개발하든 관계없이 그리고 많은 경우 어떤 언어로 작업하든지 간에, 디자인패턴으로 여러분의 코드 구조를 향상시킬 수 있다는 것을 뜻합니다.
-
몇몇 패턴을 사용하면 실제 코드 파일 크기를 줄일 수도 있다. 반복을 피할 수 있기 때문이다. 이런 패턴을 사용하면 개발자들은 자신의 솔루션에서 반복을 바로 줄일 수 있을 만한 부분을 보다 꼼꼼히 찾아 코드의 전체 분량을 줄일 수 있다. 예를 들면 비슷한 작업을 수행하는 함수의 수를 줄여 하나의 일반화된 함수로 만드는 것이다.
- 자주 사용하는 패턴은 지속적으로 개선됩니다. 왜냐하면 그 패턴을 사용하는 개발자들이 패턴 커뮤니티로 환원하는 집단 경험이 쌓이기 때문입니다. 그 결과 완전히 새로운 디자인 패턴을 만들어내기도 하고, 기존 패턴을 잘 이용하는 방법을 안내하는 가이드라인을 개선하기도 합니다. 매번 신뢰할 만한 솔루션을 즉석에서 만들 수도 있겠지만, 이런 지속적인 개선 가능성을 고려한다면, 결국은 패턴에 기반한 솔루션이 일회성 솔루션에 비해 더욱 신뢰할 수 있게 됩니다.
우리는 이미 패턴을 매일매일 사용하고 있습니다. 패턴이 얼마나 유용한지 이해하기 위해, jQuery 라이브러리가 풀어내는 간단한 selection 문제를 통해 간단히 살펴봅시다. foo라는 class속성을 가진 DOM요소마다 카운터를 증가시키는 스크립트를 만든다고 합시다. 필요한 DOM 요소 리스트를 구할 때, 가장 단순하고 효과적인 방법은 무엇일까요?
여러가지 방법이 있습니다.
- 이 페이지내 모든 요소를 조회(select)한 후 그것들을 저장합니다. 그 다음 이 list를 정규표현식을 이용하여 foo라는 class를 가진것들만 걸러냅니다.
- foo라는 class속성을 가진 요소들을 조회(select)하는 querySelectorAll()같은 기능을 가진 요즘의 브라우저를 사용합니다.
- getElementsByClassName()같은 원래 가지고 있는 기능을 이용해 원하는 list를 가져옵니다.
이들 중 몇 번 방법이 가장 빠를까요? 3번째 방법이 다른 방법에 비해 8~10배 빠른데요, 흥미롭지요? 그러나 현실에서, 3번째 방법은 인터넷 익스플로러9에서 동작하지 않습니다. 그래서 1번 방법을 사용해야 합니다.
jQuery를 사용하는 개발자들은 이 문제에 답할 필요가 없습니다. 왜냐하면 jQuery 내부에서 처리해주기 때문입니다. jQuery에서는 브라우저가 지원해 주는 것에 따라서 요소를 선택(select)하는 최적의 방법을 알아서 채택합니다.
jQuery에서는 내부적으로 수많은 다른 디자인 패턴을 사용합니다. 그 중 가장 많이 사용하는 패턴은 복잡한 내부코드에 대한 간단한 인터페이스 집합을 제공하는 퍼사드패턴입니다. 아마 $(elem) 형태의 코드에 익숙할 것입니다. (맞습니다. 그것은 크로스브라우저간의 차이를 수동으로 해결하는것보다 훨씬 쉽게 해주는 퍼사드입니다. )
이것과 더불어 다른 디자인 패턴을 이 책에서 많이 살펴볼 것입니다.
