프론트엔드 개발에서의 디자인 패턴

HSKwon·2023년 6월 12일
0

프론트엔드에서 사용 가능한 전역 상태관리 라이브러리는 정말 다양하다. Redux, Recoil, MobX, Zustand, Jotai 등. 이중 Zustand에 관해 찾아보던 중, 각각의 상태관리에 대한 접근 방식이 다르다는 것을 알게 되었고 이에 대해 정리하고, 개념을 명확히 정립하기 위해서 글을 작성하게 되었다.

소프트웨어 아키텍처와 디자인 패턴의 차이

모호하기만 한 이 둘의 개념은 무엇이고 어떤 차이가 있을까?
소프트웨어 아키텍처 : 유연성, 확장성, 실현가능성, 재사용성, 보안성과 같은 소프트웨어의 특성들을 기술적, 사업적 기대사항에 맞는 구조화된 솔루션으로 만들어가는 과정으로 아키텍처 특성, 아키텍처 결정, 설계 원칙이 결합된 시스템의 구조이다.

  • 아키텍처 특성 : 시스템의 기능과 직교하는 시스템의 성공 기준 (성능, 확장성, 신뢰성, 활용성, 유지보수성, 접근성, 보안성, 사용성 등)

  • 아키텍처 결정 : 시스템 구축에 필요한 규칙들을 정하는 것. 시스템의 제약 조건을 형성

  • 설계 원칙 : 시스템 구축에 필요한 가이드라인을 정하는 것.

디자인 패턴 : 코드 레벨의 디자인 (각각의 모듈이 어떤 역할을 수행하는지, 클래스 범위, 함수의 목적 등). 소프트웨어의 특정 구현을 직접 제공하지는 않지만, 반복되는 문제 상황들을 최적화된 방법으로 해결하도록 돕는 역할.

각각의 정의를 살펴보면 디자인 패턴은 소프트웨어 아키텍처의 하위 범주, 부분집합에 속한다는 느낌을 받을 수 있고, 어떠한 방식으로 코드를 작성할 것인가에 대한 방법론이라고 볼 수 있을 것 같다.

디자인 패턴들

MVC 패턴

MVC 패턴은 Model - View - Controller로 역할을 구분지어 분류해놓은 것이다. 각각의 역할은 다음과 같다.

  • Model : 데이터와 비즈니스 로직 영역
  • View : UI 즉 유저가 직접 마주하는 화면
  • Controller : Model과 View의 조율자 역할. View로부터 유저의 입력이 들어오면, Model의 데이터를 핸들링하여 결과를 다시 View로 보내는 역할

MVC 패턴은 유명한 디자인 패턴이고, 소프트웨어 개발에서 활발히 사용되고 있는 개념이다.

profile
공부한 내용이나 관심 있는 정보를 글로 정리하며 익숙하게 만들고자 합니다.

0개의 댓글