아키텍처 와 디자인 패턴

[young-02]

아키텍처?

하나의 시스템(혹은 서비스)의 구성과 동작 원리

디자인 패턴?

옛날 부터 소프트웨어 개발 과정에서 사용되고 발견한 설계 패턴들을 정의한것

아키텍처와 디자인패턴을 사용 해야 하는 이유?

폴더와 파일들을 더욱 효과적으로 관리하기 위해서 정리한 파일들은 재사용성과 유지보수에 큰 효율을 준다.

아키텍처 종류

• Model : 모델은 데이터를 의미한다. 모델의 범주는 아키텍처에 따라 달라진다. JS의 Object일 수 있고 서버 API 데이터 일 수도 있고 서버의 DB 일 수도 있다.
• View: HTML CSS로 만들어지는 결과물
• Controller: model의 데이터를 받아서 화면에 그리고, 화면으로 부터 사용자의 동작을 받아서 Model을 변경한다. model과 view의 중간 역할을 하는 것을 controller라 한다.

1. MVC 아키텍처 - jquery

• ajax로 부터 받은 데이터를 Model로 취급
• HTML과 CSS로 만들어지는 화면을 View로 취급
• js가 중간에서 서버의 데이터를 받아서 화면을 바꾸고 이벤트를 처리해서 서버에 데이터를 전달하는 Controller의 역할을 수행하게 된다.

2. MVVM - angular, react, vue

• 컨트롤러의 반복적인 기능이 선언적인 방식으로 개선이 되었다.
• Model과 View의 관점을 분리하려 하지 않고 하나의 템플릿으로 관리하려는 방식으로 발전했다. (기존에는 class, id등으로 간접적으로 HTML에 접근하려고 했다면 이제는 직접적으로 HTML에 접근하는 방법으로 확장되었다.)

3. 컴포넌트 그리고 Container-Presenter 패턴

웹서비스가 발전하게 되면서 page단위가 아니라 page안에 여러가지 모듈이 있고 여러화면들이 하나의 화면에 구성이 될수 있도록 발전 했다.

점점더 발전하여 화면단위가 아니라 조금 더 작게 재사용할수 있는 단위인 컴포넌터 패턴이 발전 하게 되었다.

• container 컴포넌트 : 비지니스 로직을 관장하고 있는 컴포넌트
• presenter 컴포넌트 : 데이터만 뿌려주는 형태의 컴포넌트
• 최상단 혹은 1depth에 container를 두고 비지니스로직을 관리하는 container-present 아키텍처가 만들어짐.

4. FlUX 패턴과 Redux

컴포넌트 구조가 복잡해짐에 따라 하위 특정 값을 전달하기 우해서 중간 레벨에 있는 컴포넌터들은 전부 그 props를 가지고 있어야 하는 문제가 발생하고 그문제를 해결하기 위해 flux 패턴이 생겼다.

• 단방향 아키텍처 (단일 흐름)

View를 각각의 MVC 컴포넌트 관점으로 보는 것이 아니라 하나의 큰 View로 이해하고 View에서는 Dispatch를 통해 Action을 전달하면 Actiondms Reducer을 통해서 Data가 Store에 보관되고 Store에 들어있는 데이터는 다시 View로 연결 되는 방식

5. Atomic 패턴 - Recoil, svelt Store, Vue Composition, jotai

리덕스의 보일러플레이트 코드에 대한 단점을 피해 만들어진 방법이다

• view와 mode을 분리한다.
• 중간의 과정은 자율에 맡기고 간단하게 model에 접근하는 법만 제공하자
• 동기화, 동시성 처리가 중요