한빛출판네트워크

“좋은 코드는 후임 개발자에게 보내는 러브레터와도 같다!”

디자인 패턴은 코드 체계화에 필요한 공통적인 패턴을 통해 코드를 쉽게 이해하고, 다른 개발자와의 의사소통이 원활하도록 해줍니다. 이전에 비슷한 문제를 마주하여 최적화된 방법으로 풀이해 낸 사람들의 경험에 기대는 방법도 있습니다. 디자인 패턴은 유지보수가 쉬운 코드를 작성하거나 리팩터링할 수 있는 길을 열어준다는 점에서 굉장히 중요합니다.

자바스크립트는 서버와 클라이언트, 모든 곳에서 활용되는 최신 웹 개발의 중심입니다. 모듈 ^modules , 클래스^class , 화살표 함수^{arrow function} , 템플릿 리터럴 ^{template literal} 등 다양한 기능을 지원할 뿐 아니라 리액트와 같은 최신 라이브러리나 프레임워크로 웹 개발자를 편하게 만들어 주기도 합니다. 그렇다면 현재의 자바스크립트 생태계에서 디자인 패턴은 과연 어떤 의미일까요?

기본적으로 디자인 패턴은 어딘가에 얽매이거나, 어느 한 언어에 국한되지 않는다는 점이 중요합니다. 사용하기 적합한 상황이라고 해서 반드시 적용할 필요는 없습니다. 자료구조나 알고리즘처럼, 최신 프로그래밍 언어에 고전적인 디자인 패턴을 적용할 수도 있죠. 물론 자바스크립트도 예외는 아닙니다. 어쩌면 최신 프레임워크나 라이브러리는 이미 잘 작성되어 이러한 디자인 패턴이 필요하지 않을 수도 있습니다. 반대로 어떤 프레임워크에서는 특정 패턴을 사용해야만 할 수도 있습니다.

오늘은 본격적으로 자바스크립트와 리액트 활용에 필요한 디자인 패턴을 살펴보기 이전에, 디자인 패턴이란 무엇이며 어떤 유형이 있는지 알아보고자 합니다.

1️⃣ 패턴이란 무엇인가?

패턴이란 소프트웨어 설계에서 반복되는 문제와 주제에 적용할 수 있는 재사용 가능한 템플릿을 뜻합니다. 다른 프로그래밍 언어와 마찬가지로, 자바스크립트로 웹 애플리케이션을 개발할 때 여러 상황에서 유용하게 사용할 수 있습니다.

디자인 패턴이 개발자들에게 유용한 이유는 다음과 같습니다.

검증되었다

패턴은 앞서간 개발자들의 경험과 통찰의 산물입니다. 또한 소프트웨어 개발의 특정 문제를 해결하기 위해 오랜 시간 검증된 효과적 접근 방식이죠.

쉽게 재사용할 수 있다

패턴은 독창적인 솔루션을 제공하며 사용자의 요구에 맞춰 적용할 수도 있습니다. 이는 매우 강력한 특징입니다.

알아보기 쉽다

패턴은 정해진 구조와 공통 표현^vocabulary 을 사용하여 광범위한 문제에 대해 정교한 솔루션을 제공할 수 있습니다.

개발 과정에서 사소한 실수로 인해 생길 수 있는 큰 문제를 방지한다

정해진 패턴을 사용하여 코드를 작성하면 코드 구조가 잘못될 염려를 덜고, 개발에 집중할 수 있습니다. 패턴을 사용하면 보다 구조적이고 체계적인 코드를 자연스럽게 작성할 수 있으므로 나중에 다시 리팩터링하는 상황을 피할 수 있습니다.

특정 문제에 국한되지 않은 종합적인 해결책을 제시한다

애플리케이션의 형태 또는 언어에 상관없이 적용해 코드 구조를 개선할 수 있습니다.

반복을 피함으로써 전체 코드의 양을 줄일 수 있다

디자인 패턴을 사용하면 개발자들은 더 꼼꼼하게 중복을 줄일 수 있습니다. 예를 들어, 일반화된 함수를 사용하여 비슷한 작업을 수행하는 여러 함수를 줄이고 코드의 양도 줄일 수 있습니다. 이를 통해 불필요한 코드의 반복을 피할 수 있습니다(DRY, Don’t Repeat Yourself).

공통된 어휘를 사용하여 의사소통이 원활해진다

팀원과 소통할 때, 디자인 패턴 커뮤니티에서 토론할 때, 나중에 유지보수할 때 패턴을 참고하여 이야기할 수 있습니다.

인기 있는 디자인 패턴은 커뮤니티의 선순환을 유발한다

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

물론 패턴이 완벽한 해결책은 아닙니다. 패턴은 단지 체계화된 방법을 제시하기 때문이죠. 패턴은 설계에 관한 모든 문제를 해결해주지 않으며, 뛰어난 소프트웨어 설계자를 대체할 수도 없습니다. 따라서 좋은 패턴을 선택하려면 좋은 설계자가 필요합니다.

2️⃣ 디자인 패턴의 유형

GoF의 멤버인 감마, 헬름, 존슨, 블리시드는 『GoF의 디자인 패턴』(프로텍미디어, 2015 )에서 디자인 패턴을 다음과 같이 설명합니다.

디자인 패턴은 공통 설계 구조의 핵심 요소를 이름 짓고 추상화하여 재사용할 수 있는 객체 지향 설계를 만드는 데 유용한 역할을 합니다. 또한 유용한 클래스와 인스턴스를 제공하여 각각의 역할과 협업, 책임의 분배를 실현합니다.

모든 디자인 패턴은 특정 객체 지향 설계의 문제나 이슈에 초점을 맞춥니다. 또한 어디에 적용될 수 있는지, 다른 설계 조건에도 부합하는지, 사용함으로써 얻는 장단점과 결과를 설명합 니다. 결국에는 구현이 중요하기에 구현을 위한 예시 코드도 제공합니다.

디자인 패턴이 객체 지향 설계를 다루기는 하지만, 결국 주요 객체 지향 프로그래밍 언어에서 구현되었던 실용적인 솔루션을 기반으로 합니다.

디자인 패턴은 어떤 문제를 해결하느냐에 따라 세 가지 유형으로 분류할 수 있습니다. 각 패턴의 정의와 주요 패턴을 살펴보겠습니다.

(각 패턴 하단의 테이블에는 GoF의 디자인 패턴 23개를 요약한 ‘분류표’를 기반으로 디자인 패턴 입문자에게 필요할 부분만 정리하였습니다. 

표에서 언급되지 않은 패턴은 책『자바스크립트+리액트 디자인 패턴』에서 확인할 수 있습니다.)

➀ 생성 패턴

생성 패턴^{Creational Pattern} 은 주어진 상황에 적합한 객체를 생성하는 방법에 중점을 둡니다. 기본적인 객체 생성 방식은 프로젝트의 복잡성을 증가시킬 수도 있기에, 생성 패턴은 이 과정을 제어하여 문제를 해결하는 것을 목표로 합니다.

② 구조 패턴

구조 패턴^{Structural Pattern} 은 객체의 구성과 각 객체 간의 관계를 인식하는 방법에 중점을 둡니다. 그리고 시스템의 어느 한 부분이 변경되더라도 다른 부분에는 영향이 가지 않도록 도와주며, 설계 목적에 맞지 않는 부분을 개선하는 데에도 도움이 됩니다.

③ 행위 패턴

행위 패턴^{Behavioral Pattern} 은 시스템 내의 객체 간 커뮤니케이션을 개선하거나 간소화하는 방법에 중점을 둡니다. 그리고 객체 간의 공통적인 커뮤니케이션 패턴을 감지하고 책임을 분배함 으로써 커뮤니케이션의 유연성을 높이고, 객체의 행위를 추상화합니다.

위 콘텐츠는 『자바스크립트 + 리액트 디자인 패턴』에서 내용을 발췌하여 작성하였습니다.