디자인 패턴의 역사

디자인 패턴 이란?

코드를 체계화하기 위한 공통적인 패턴을 제공해 코드를 쉽게 이해하도록 돕고, 다른 개발자와의 의사소통을 원활하게 해줍니다. 디자인 패턴은 유지보수가 쉬운 코드를 작성하거나 리팩터링할 수 있는 길을 열어준다는 점에서 굉장히 중요합니다.

자바스크립트는 서버와 클라이언트, 모든 곳에서 활용되는 최신 웹 개발의 중심입니다. 이제 자바스크립트는 모듈, 클래스, 화살표 함수, 템플릿 리터럴 등 이전에는 없던 기능을 지원하고 웹 개발자를 편하게 만들어주는 최신 라이브러리와 프레임워크도 많이 생겼습니다.  
그렇다면 현재의 자바스크립트 생태계에서 디자인 패턴은 어떤 의미일까요?
어쩌면 최신 프레임워크나 라이브러리는 이미 잘 작성되어 이러한 디자인 패턴이 필요하지 않을 수도 있습니다. 반대로 어떤 프레임워크에서는 특정 패턴을 사용해야만 할 수도 있습니다.

자바스크립트 애플리케이션이 점점 더 자연스러운 상호작용을 지원하기 위해 많은 양의 코드가 필요하게 되면서, 자바스크립트는 성능에서 뒤떨어진다는 비판을 계속 받아왔습니다.  이에 개발자들은 자바스크립트를 최적화할 수 있는 새로운 디자인 패턴을 꾸준히 찾아왔습니다.  예로 React  에서 Hooks와 고차 컴포넌트 (HOC)처럼 프레임워크에 특화된 디자인 패턴이 있습니다.

디자인 패턴의 역사

크리스토퍼 알렉산더 라는 건축가의 초창기 작품으로 올라갑니다. 알렉산더는 특정 디자인 구조를 반복해서 사용하면 최적의 효과를 얻을 수 있다는 사실을 깨닫고  이시카와와 머레이 실버스타인 이라는 두명의 건축가와 협력하여 패턴 언어를 탄생시켰습니다.  이 패턴 언어는 규모에 상관없이 설계와 구현을 원하는 모두에게 도움이 될 발명품이었습니다.
(1977년 A Pattern Language 논문 발표 후 책으로 출간됨)

1990년 무렵, 에리히 감마, 리차드 헬름, 랄프 존슨, 존 블리시드 가 저술한 GoF의 디자인 패턴 은 1995년 출간된 디자인 패턴에 대한 책으로, 소프트웨어 엔지니어링 분야에서 최초이자 가장 상징적인 저서로 현재까지 GoF 라고 불리고 있습니다. 저서는 개발 분야에서 디자인 패턴에 대한 개념을 발전시키는 데 지대한 공헌을 했고 오늘날 전 세계적으로 자주 사용되는 23가지의 핵심 객체 지향 디자인 패턴이 있습니다.

패턴이란 무엇인가?

검증되었다
패턴은 앞서간 개발자들의 경험과 통찰의 산물
소프트웨어 개발의 특정 문제를 해결하기 위해 오랜 시간 동안 검증된 효과적인 접근 방식

쉽게 재사용할 수 있다
패턴은 독창적인 솔루션을 제공하며 사용자의 요구에 맞춰 적용할 수 있음

알아보기 쉽다
패턴은 정해진 구조와 공통 표현을 사용하여 광범위한 문제에 대해 정교한 솔루션을 제공

개발 과정에서 사소한 실수로 인해 생길 수 있는 큰 문제를 방지한다
정해진 패턴을 사용하여 코드를 작성하면 코드 구조가 잘못될 염려를 덜고, 개발에 집중 할 수 있음
패턴을 사용하면 보다 구조적이고 체계적인 코드를 자연스럽게 작성할 수 있으므로 나중에 다시 리팩터링하는 상황을 피할 수 있음

특정 문제에 국한되지 않은 종합적인 해결책을 제시한다
애플리케이션의 형태 또는 언어에 상관없이 적용해 코드 구조를 개선할 수 있음

반복을 피함으로써 전체 코드의 양을 줄일 수 있다
일반화된 함수를 사용하여 비슷한 작업을 수행하는 여러 함수를 줄이고 코드의 양도 줄일 수 있으며 불필요한 코드의 반복을 피할 수 있음

공통된 어휘를 사용하여 의사소통이 원활해진다
팀원과 소통할 때, 디자인 패턴 커뮤니티에서 토론할 때, 나중에 유지보수할 때 패턴을 참고하여 이야기 할 수 있음

인기 있는 디자인 패턴은 커뮤니티의 선순환을 유발한다
어떤 경우에는 완전히 새로운 디자인 패턴이 만들어지기도 하고, 기존의 패턴을 개선하는 방법으로 이어지기도 하며 이런 선순환 구조를 통해 패턴 기반 솔루션들은 더 견고해질 수 있음

디자인 패턴의 일상 활용 사례

웹 애플리케이션의 컴포넌트 트리는 사용자 정보나 접근 권한 같은 인증 혹은 권한과 관련 데이터를 공유해야 하는 경우가 많습니다. 기존 자바스크립트에서는 루트 컴포넌트에 이러한 데이터를 저장한 뒤에 상위에서 하위로 컴포넌트를 전달하곤 했습니다. 컴포넌트의 계층이 깊어지고, 중첩이 많아지면 데이터는 프롭 트딜링을 초래하게 됩니다. 이렇게 되면 해당 데이터를 사용하는 모든 하위 컴포넌트에 프로퍼티 설정과 전달이 반복되어 유지보수가 어려운 코드가 만들어지게 됩니다.

리액트와 다른 여러 프레임워크는 공급자 패턴을 사용해 이런 프롭 드릴링 문제를 해결합니다.
리액트의 Context API 를 사용하면 컨텍스트 공급자(context provider)를 통해 상태나 데이터를 여러 컴포넌트로 한 번에 전달 할 수 있습니다. 공유되는 데이터가 필요한 하위 컴포넌트는 Context consumer 나 useContext Hook 을 사용하여 쉽게 공급자의 데이터에 접근 할 수 있습니다. 

 

참고자료
<자바스크립트+리액트 디자인 패턴> 애디 오스마니 지음