라이브러리&프레임워크, 디자인패턴

김민지·2024년 6월 25일

CS 스터디

목록 보기

1/7

🚩 라이브러리&프레임워크

공통점 : 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것

🟢 라이브러리

개발자들이 자주 사용하는 코드 집합이다.
여러 가지 기능을 제공한다.
개발자들은 복잡한 기능을 좀 더 쉽게 구현할 수 있다.
폴더명, 파일명 등에 대한 규칙이 없고, 프레임워크에 비해 자유롭다.
비유: 라이브러리는 자동차다. 핸들 사용법만 익히면 목적지와 경로는 내 맘대로 설정할 수 있다.
대표적인 라이브러리 : react, jQuery, axios, pandas, matplotlib, beautifulsoup

** React는 UI 컴포넌트를 만드는 데 필요한 기능을 제공한다. 라우팅(ex. React Router), 상태관리(ex. Redux, Recoil, Zustand), 폼 처리(ex. Formik, React Hook Form) 등의 기능을 사용하기 위해서는 추가 라이브러리를 도입해야 한다.

🔵 프레임워크

개발자들이 애플리케이션을 개발하는 데에 사용되는 구조를 제공한다.
일련의 규칙과 구조를 정의한다.
보통 여러 컴포넌트와 라이브러리를 포함하고 있다.
폴더명, 파일명 등에 대한 규칙이 있으며, 라이브러리에 비해 엄격하다.
비유 : 프레임워크는 비행기다. 경로 변경 못하고 심지어 창문도 열지 못한다.
대표적인 프레임워크 : vue.js, angular, django, spring

🚩 디자인패턴

1. 생성 패턴 : 객체의 생성에 관련된 패턴. 특정 객체가 생성되어도 프로그램의 구조에 큰 영향을 받지 않음.

ex. 싱글턴 (Singleton), 팩토리 메서드 (Factory Method), 추상 팩토리 (Abstract Factory), 빌더 (Builder), 프로토타입 (Prototype)

2. 구조 패턴 : 클래스나 객체를 조합해서 더 큰 구조를 만드는 패턴

ex. 어댑터 (Adapter), 데코레이터 (Decorator), 컴포지트 (Composite), 프록시 (Proxy), 퍼사드 (Facade), 브리지 (Bridge), 플라이웨이트 (Flyweight)

3. 행위 패턴 : 클래스나 객체 간의 알고리즘이나 책임 분배에 관련된 패턴. 한 객체

ex. 옵저버 (Observer), 스트래티지 (Strategy), 커맨드 (Command), 스테이트 (State), 템플릿 메서드 (Template Method), 이터레이터 (Iterator), 미디에이터 (Mediator), 비지터 (Visitor), 체인 오브 리스폰서빌리티 (Chain of Responsibility), 메멘토 (Memento), 인터프리터 (Interpreter)

🟢 MVC(Model-View-Controller)

Model : 애플리케이션이 ‘무엇＇을 할지 정의
애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 의미.
사용자가 편집하려는 데이터를 모두 알고 있어야 한다.
뷰나 컨트롤러에 대해 어떤 정보도 알지 말아야 함. 변경이 일어나면 변경 통지에 대한 처리 방법을 구현.
View : 정보를 화면으로 보여주는 역할
화면에 ‘무엇＇인가를 ‘보여주기 위한 역할‘. 사용자 인터페이스 요소 ex. Checkbox, textarea
M이나 C가 보여주려 하는 모든 필요한 것들을 보여줌
모델이나 컨트롤러와 같이 다른 구성요소를 몰라야 함.
Controller : 모델이 ‘어떻게‘ 처리할지 알려주는 역할.
하나 이상의 모델과 하나 이상의 뷰를 이어주는 다리 역할. 이벤트 등 메인 로직 담당.
모델과 뷰의 생명주기 관리.
모델과 뷰의 변경 모니터링
사용자가 View와 상호작용하면, 이벤트가 Controller로 전달된다.
Controller는 해당 이벤트를 처리하고, 필요한 로직을 실행하여 Model을 업데이트한다.
Model이 변경되면 View에 통보하고 View를 업데이트한다.

🟣 MVP(Model-View-Presenter) : MVC에서 파생. C가 P로 바뀐 것.

Model: 애플리케이션이 ‘무엇＇을 할지 정의
애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 의미.
사용자가 편집하려는 데이터를 모두 알고 있어야 한다.
뷰나 컨트롤러에 대해 어떤 정보도 알지 말아야 함. 변경이 일어나면 변경 통지에 대한 처리 방법을 구현.
View : 정보를 화면으로 보여주는 역할
화면에 ‘무엇＇인가를 ‘보여주기 위한 역할‘. 사용자 인터페이스 요소 ex. Checkbox, textarea
M이나 C가 보여주려 하는 모든 필요한 것들을 보여줌
모델이나 컨트롤러와 같이 다른 구성요소를 몰라야 함.
Presenter : Model을 조작할 뿐만 아니라 View를 업데이트한다.
View는 사용자 이벤트를 Presenter에 전달한다.
Presenter는 이벤트를 처리하고, 필요한 로직을 실행하여 Model을 업데이트한다.
Presenter는 Model의 변화를 감지하고, 그에 따라 View를 업데이트한다.

🔵 MVVM(Model-View-ViewModel)

Model : 데이터와 비즈니스 로직을 관리
View : 사용자 인터페이스를 관리
ViewModel : Model과 View 사이의 데이터 바인딩과 로직을 처리. View Model은 View가 필요로 하는 데이터를 제공한다. 일반적으로 뷰의 특정 부분에 대한 데이터와 상태를 관리한다. Like 리액트 state
MVC와 다르게 커멘드와 데이터 바인딩을 가진다.(useEffect에 의존성 배열 값을 넣으면 데이터 바인딩과 유사한 효과를 볼 수 있다.)