1-1. 디자인 패턴(2)

2022.09.19 - [소소한 CS 지식/면접을 위한 CS 전공지식 노트] - 1-1. 디자인 패턴(1)

디자인 패턴
프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용해 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것

디자인 패턴을 사용하면 상황에 맞는 올바른 설계를 더 빠르게 적용할 수 있고, 각 패턴의 장단점을 통해서 설계를 선택하는데 도움을 얻을 수 있다. 또한, 설계 패턴에 이름을 붙임으로써 시스템의 유지 보수에 도움을 얻을 수 있다.

싱글톤 패턴	팩토리 패턴	전략 패턴	옵저버 패턴	프록시 패턴
이터레이터 패턴	노출모듈 패턴	MVC 패턴	MVP 패턴	MVVM 패턴

 

---

6. 이터레이터 패턴(Iterator pattern)

이터레이터 패턴: 이터레이터(Iterator)를 사용해 컬렉션(collection)의 요소들에 접근하는 디자인 패턴

• 모든 항목에 일일이 접근하는 작업을 컬렉션 객체가 아닌 반복자 객체에서 맡게 되서 집합체의 인터페이스 및 구현이 간단해질 뿐 아니라, 집합체에서는 반복작업에서 손을 떼고 원래 자신이 할 일(객체 컬렉션 관리)에만 전념할 수 있다.  

이터레이터 패턴의 구조

Iterator	집합체의 요소들을 순서대로 검색하기 위한 인터페이스 정의
ConcreateIterator	Iterator 인터페이스를 구현
Aggregate	여러 요소들로 이루어져 있는 집합체
ConcreteAggregate	Aggregate 인터페이스를 구현하는 클래스

ex) 스터디 그룹에 참여하는 학생들에 대한 정보를 가지는 Study_Group 객체에 대한 접근을 Iterator 패턴을 적용하여 순차적으로 검색하는 예제

// Iterator와 Aggregate 인터페이스
interface Iterator {
	public abstract boolean hasNext();
	public abstract Object next();
}
interface Aggregate {
	public abstract Iterator iterator();
}

// 복합클래스가 가지는 학생 정보를 가지고 있는 데이터 객체 Student
class Student {
	private String name = "";
	private int age;
	
	public Student(String name, int age) {
		this.name = name;
		this.age = age;
	}
	
	public String getName() {
		return name;
	}
	
	public int getAge() {
		return age;
	}
}

// 실제 다수의 Student 객체를 포함하는 복합 클래스
// iterator()메서드를 통해 iterator 객체를 생성한 후 반환
class Study_Group implements Aggregate {
	private Student[] students;
	private int num = 0;
	
	public Study_Group(int num) {
		this.students = new Student[num];
	}
	public Student getStudent(int index) {
		return students[index];
	}
	public void AddStudent(Student student) {
		this.students[num] = student; 
		num++;
	}
	public int getLength() {
		return num;
	}
	public StudyGroupIterator iterator() {
		return new StudyGroupIterator(this);
	}
}

// Study_Group 객체에 접근하기 위한 Iterator 클래스
// Study_Group의 인스턴스를 가지고 있으며 해당 인스턴스를 통해
// Study_Group이 포함하는 Student 객체에 접근한다. 
// 복합 객체와는 분리되면서 복합 객체에 순차적으로 접근하기 위한 iterator
class StudyGroupIterator implements Iterator {
	private Study_Group study_group;
	private int index;
	
	public StudyGroupIterator(Study_Group study_group) {
		this.study_group = study_group;
		this.index = 0;
	}
	public boolean hasNext() {
		if(index<study_group.getLength()) {
			return true;
		}else {
			return false;
		}
	}
	public Object next() {
		Student student = study_group.getStudent(index);
		index++;
		return student;
	}
}

// main 클래스
public class TestIterator {

	public static void main(String args[]) {
		Study_Group study_group = new Study_Group(4);
		study_group.AddStudent(new Student("이자바", 25));
		study_group.AddStudent(new Student("김자바", 26));
		study_group.AddStudent(new Student("박자바", 27));
		study_group.AddStudent(new Student("나자바", 28));
		
		StudyGroupIterator iterator = study_group.iterator();
		
		while(iterator.hasNext()) {
			Student student = (Student)iterator.next();
			System.out.println("이름: " + student.getName());
			System.out.println("나이: " + student.getAge() + "\n");
		}
	}
}

이름: 이자바 나이: 25
이름: 김자바 나이: 26
이름: 박자바 나이: 27
이름: 나자바 나이: 28

---

7. 노출모듈 패턴(Revealing module pattern)

노출모듈 패턴: 즉시 실행 함수를 통해 private. public 같은 접근 제어자를 만드는 패턴

• JS는 private는 public 같은 접근 제어자가 존재하지 않고 전역 범위에서 스크립트가 실행되는데 그래서 노출모듈 패턴을 통해 private public 접근 제어자를 구현하기도 한다. 

 

장점		단점
개발자에게 깔끔한 접근 방법을 제공	private 데이터 제공	private 메서드 접근할 방법이 없음
전역 변수를 덜 더럽힘	클로저를 통해 함수와 변수를 지역화	private 메서드에 대해 함수 확장하는데 어려움이 있음
스크립트 문법이 더 일관성 있음	명시적으로 public 메서드와 변수를 제공해 명시성을 높임	private 메서드를 참조하는 public 메서드를 수정하기 어려움

ex)  JS 예시

const pukuba = (() => {
    const a = 1
    const b = () => 2
    const public = {
        c: 2,
        d: () => 3
    }
    return public
})()

console.log(pukuba)
console.log(pukuba.a)
// { c: 2, d: [Function: d] }
// undefined

• a와 b는 다른 모듈에서 사용할 수 없는 변수나 함수이고 private 범위를 가진다.
• c와 d는 다른 모듈에서 사용할 수 있는 변수나 함수이며 public 범위를 가진다.

---

8. MVC 패턴(Model, View, Controller)

MVC 패턴: Model, View, Controller로 이루어진 디자인 패턴으로, 애플리케이션의 구성 요소를 세 가지 역할로 구분해 개발 프로세스에서 각각의 구성요소에 집중해서 개발한다.

• 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어해 사용자에게 전달한다.

 

장점	단점
재사용성과 확장성이 용이하다.	애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다.

8-1. 모델(Model)

• 애플리케이션의 데이터인 데이터베이스, 상수, 변수
• 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다.
• ex) 사각형 모양의 박스안에 글자가 들어있다. => 사각형 모양의 박스 위치 정보, 글자 내용, 글자 위치, 글자 포맷(utf-8등)에 관한 정보를 모두 가지고 있어야 한다.

8-2. 뷰(View)

• inputbox, checkbox, textarea 등 사용자 인터페이스 요소를 나타낸다. 즉 모델을 기반으로 사용자가 볼 수 있는 화면
• 모델이 가지고 있는 정보를 따로 저장하지 않아야 하며 단순히 사각형 모양 등 화면에 표시하는 정보만 가지고 있어야 한다.
• 변경이 일어나면 컨트롤러에 이를 전달해야 한다.

8-3. 컨트롤러(Controller)

• 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당
• 모델과 뷰의 생명주기도 관리
• 모델이나 뷰의 변경 통지를 받으면  이를 해석해 각각의 구성요소에 해당 내용에 대해 알려준다.

 

1. 사용자가 웹 사이트에 접속(Users) 
2. Controller는 사용자가 요청한 웹페이지를 서비스하기 위해서 모델을 추출(Manipulates)
3. Model은 데이터베이스나 파일과 같은 데이터 소스를 제어한 후 그 결과를 Return
4. Controller는 Model이 리턴한 결과를 View에 반영(Updates)
5. 데이터가 반영된 View는 사용자에게 보여짐(Set)

8-4. MVC패턴 방식

모델1 방식: JSP에서 출력과 로직을 전부 처리

모델2 방식: JSP에서 출력만 처리

Model 1 

모델1 방식

모델 1 방식은 Controller 영역에 View 영역을 같이 구현하는 방식이고, 사용자의 요청을 JSP가 전부 처리한다. 

요청을 받은 JSP는 JavaBean Service Class를 사용해 웹 브라우저 사용자가 요청한 작업을 처리하고 그 결과를 출력한다.

Model 2 

모델 2 방식은 웹 브라우저 사용자의 요청을 서블릿이 받고 서블릿은 해당 요청으로 View로 보여줄 것인지 Model로 보낼 것인지 판단해 전송한다.

HTML 소스와 JAVA 소스를 분리해놓아서 모델 1 방식에 비해 확장시키기도 쉽고 유지보수 또한 쉽다.

Model1 vs Model2

	장점	단점
Model1	빠르고 쉽게 개발이 가능하다.	JSP 파일이 너무 커지고 Controller와 View가 혼재해져서 향후 유지보수에 어렵다.
Model2	디자이너와 개발자의 분업이 가능하고, 유지보수 및 확장이 쉽다.	설계가 어렵고 개발 난이도가 높다.
Model1 방식으로 개발하는 사례는 백, 프론트엔드의 역할 분담이 모호해져 협업이 쉽지 않아서 거의 없다.

---

9. MVP 패턴(Model, View, Presenter)

MVP 패턴: Model, View, Presenter로 이루어진 디자인 패턴으로, 애플리케이션의 구성 요소를 세 가지 역할로 구분해 개발 프로세스에서 각각의 구성요소에 집중해서 개발한다.

• View와 Presenter는 일대일 관계(MVC에서는 View와 Model이 일대다 관계)이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 패턴이라고 볼 수 있다. 
• MVC는 Model과 View가 서로 연결되어 있어서 의존관계를 갖게 되지만 MVP는 Model과 View가 분리되어 있고 오직 Presenter를 통해서 상태나 변화를 알려줄 수 있다.
• Presenter는 사용자로부터 받는 모든 입력값을 수집해 모델로 바로바로 보내고, 결과를 뷰로 전달한다(View에서 요청한 정보로 Model을 가공해 View에 전달해준다.)

 

장점	단점
View와 Model의 의존성이 없다.(View와 비즈니스 로직이 완전히 분리가 되어 테스트가 용이해진다.)	애플리케이션이 복잡해질수록 View와 Presenter 사이의 의존성이 강해진다.

 

1. View에 사용자의 인터렉션이 들어오면 View는 Presenter에 액션이 들어왔다고 전달한다.
2. Presenter는 View 액션대로 Model을 구성한다.
3. 업데이트된 Presenter의 데이터를 View에 업데이트한다.

---

10. MVVM 패턴(Model, View, View Model )

MVVM 패턴: Model, View, View Model로 이루어진 디자인 패턴으로, 애플리케이션의 구성 요소를 세 가지 역할로 구분해 개발 프로세스에서 각각의 구성요소에 집중해서 개발한다.

• MVC에서 파생된, Model과 View간의 의존성뿐만 아니라 Controller과 View간의 의존성도 고려해 각 구성 요소가 독립적으로 작성되고 테스트될 수 있도록 설계된 아키텍처 패턴이다. 
• View Model은 View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분이다.

 

장점	단점
View와 Model 사이의 의존성이 없다. (View와 View Model 사이의 의존성 또한 없어 각각의 부분은 독립적이이 때문에 모듈화해 개발할 수 있다.)	View Model의 설계가 쉽지 않다.

 

1. View에 입력이 들어오면 ViewModel에게 명령을 한다.
2. ViewModel은 필요한 데이터를 Model에게 요청한다.
3. Model은 ViewModel에게 요청된 데이터를 응답한다.
4. ViewModel은 응답받은 데이털르 가공해서 저당한다.
5. View는 ViewModel과의 Data Binding으로 인해 자동으로 갱신된다. 

데이터바인딩: 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다. 

---

http://www.yes24.com/Product/Goods/108887922

면접을 위한 CS 전공지식 노트 - YES24

https://lktprogrammer.tistory.com/40

08 반복자 패턴 (Iterator Pattern)

https://edykim.com/ko/post/revealing-module-pattern/

노출식 모듈 패턴 Revealing Module Pattern

https://cocoon1787.tistory.com/733

[개발상식] MVC 패턴이란? (Model-View-Controller)

https://beomy.tistory.com/43

[디자인패턴] MVC, MVP, MVVM 비교

https://fomaios.tistory.com/entry/Design-Pattern-MVP-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80

[Design Pattern] MVP 패턴이란?

https://devowen.com/457

MVC, MVP 그리고 MVVM 패턴에 대하여