자바스크립트 + 리액트 디자인 패턴 (1)

September 17, 2024

01. 디자인 패턴 소개

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

1.1 디자인 패턴의 역사

  • GoF의 디자인 패턴

1.2 패턴이란 무엇인가

  • 패턴이란?
    • 소프트웨어 설계에서 반복되는 문제와 주제에 적용할 수 있는 재사용 가능한 템플릿을 뜻한다.
  • 디자인 패턴이 개발자들에게 유용한 이유
    • 검증되었다.
      • 오랜 시간 동안 검증된 효과적인 접근 방식
    • 쉽게 재사용할 수 있다.
      • 패턴은 독창적인 솔루션을 제공하며 사용자의 요구에 맞춰 적용할 수도 있다.
    • 알아보기 쉽다.
      • 패턴은 정해진 구조와 공통 표현을 사용하여 광범위한 문제에 대해 정교한 솔루션을 제공할 수 있다.
    • 이 외 패턴의 이점
      • 개발 과정에서 사소한 실수로 인해 생길 수 있는 큰 문제를 방지한다.
      • 특정 문제에 국한되지 않은 종합적인 해결책을 제시한다.
      • 반복을 피함으로써 전체 코드의 양을 줄일 수 있다.
      • 공통된 어휘를 사용하여 의사소통이 원활해진다.
      • 인기 있는 디자인 패턴은 커뮤니티의 선순환을 유발한다.

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

  • 리액트와 다른 여러 프레임워크는 공급자 패턴 을 사용해 프롭 드릴링 문제를 해결한다.

02. 패턴성 검증, 프로토 패턴 그리고 세 가지 법칙

  • 프로토 패턴이 패턴성 검증을 거치고 세 가지 법칙을 충족해 디자인 패턴으로서 인정받기까지의 과정

2.1 프로토 패턴이란?

알렉산더의 말을 다시 되짚어 보자면, 패턴은 ‘과정’인 동시에 ‘결과’라고 했다.

2.2 패턴성 검증

  • 프로토 패턴이란?
    • 아직 패턴성 검증을 모두 통과하지 않은 미숙한 패턴
    • 간단한 설명을 덧붙여 공개하는 경우도 있는데 이러한 설명이나 코드 조각들을 패틀릿이라고 한다.
  • 좋은 패턴의 특징
    • 특정 문제를 해결할 수 있다.
    • 명쾌한 해결책이 없다.
    • 확실한 기능만을 말한다.
    • 관계를 설명한다.

2.3 세 가지 법칙

  • 좋은 패턴이 되기 위해서는 반복되는 현상, 또는 문제에서 지속적으로 사용되어야 한다.

  • 반복성을 입증하려면 세 가지 법칙이라고 불리는 다음 질문에 답할 수 있어야 한다.

    • 목적 적합성

      • 좋은 패턴은 어떻게 판단하나요?

    • 유용성

      • 좋은 패턴이라고 할 수 있는 이유가 무엇인가요?

    • 적용 가능성

      • 넓은 적용 범위를 가지고 있어 패턴이 될 가치가 있나요?

03. 패턴 구조화 및 작성

3.1 디자인 패턴의 구조

  • 패턴의 작성자는 패턴의 설계, 구현 방법 및 목적을 설명해야 한다.
  • 먼저 다음의 관계성을 생각해 규칙의 형태로 패턴을 제시한다.
    • 컨텍스트 : 패턴이 적용되는 상황
    • 집중 목표 : 패턴을 적용할 때 고려해야 하는 목표
    • 구성 : 제시된 상황과 고려해야 하는 점들을 해결하는 구성
  • 디자인 패턴의 구성 요소
    • 이름 : 패턴의 목적을 드러내는 이름이어야 한다.
    • 설명 : 패턴이 무엇을 해결할 수 있는지에 대한 간단한 설명이 있어야 한다.
    • 컨텍스트 개요 : 패턴이 사용자의 요구에 부합하는지에 대한 설명이 있어야 한다.
    • 문제 제시 : 패턴을 만든 의도를 알 수 있도록 문제를 제시해야 한다.
    • 해결방법 : 이해하기 쉬운 단계와 개념을 통해 문제가 어떻게 해결되는지에 대한 설명이 있어야 한다.
    • 설계 내용 : 패턴의 설계와 사용자가 어떻게 사용할 수 있는지에 대한 설명이 있어야 한다.
    • 구현 방법 : 패턴을 구현하는 방법에 대한 지침이 있어야 한다.
    • 시각적 설명 : 다이어그램처럼 패턴을 나타내는 시각적 설명이 있어야 한다.
    • 예제 : 패턴을 구현한 예시가 있어야 한다.
    • 필수 연계 : 해당 패턴과 함께 사용하면 좋은 패턴에 대한 내용이 있어야 한다.
    • 관계성 : 다른 패턴과의 관계 및 유사점에 대한 내용이 있어야 한다.
    • 알려진 용도 : 업계에서 이미 쓰이던 패턴인지에 대한 설명이 있어야 한다.
    • 토론 : 해당 패턴의 이점에 대한 사람들의 의견이 있어야 한다.

3.2 모범 패턴

  • 디자인 패턴의 구조와 만들어진 목적을 이해하면 해당 패턴이 필요한 이유에 대해 더 깊게 이해할 수 있다.
  • 좋은 패턴은 사용자에게 충분한 참고 자료를 제공해야 한다. 아울러 왜 이 패턴이 필요한지에 대한 근거를 제공해야 한다.

3.3 패턴 작성하기

  • 패턴을 작성하거나 개선하고 싶을 때 이미 존재하는 패턴을 활용할 수 있다.
  • 새로운 디자인 패턴을 만들거나 기존 디자인 패턴을 적용하려 할 때 참고해야 할 체크 리스트
    • 얼마나 실용적인가?
    • 모범 사례를 염두에 두세요.
    • 사용자에게 솔직해야 한다.
    • 독창성은 패턴 설계의 핵심이 아닙니다.
    • 훌륭한 예시가 필요합니다.