말로만 들어봤던 디자인패턴.

디자인 패턴이라고 디자이너들을 위한 것이 아니다. 디자인 패턴은 개발자를 위한 방법론이다.

그럼 오늘은 디자인 패턴에 대해서 알아보자!

 

Chap 10-1. 디자인패턴 기초

대표적으로 MVC, MVVM 이 있다.

어떤 분야, 목적을 달성하려고, 효율적으로 만든 것이다. 예) 운동패턴, 공부패턴 등..

 

예전에는 개발을 마구잡이로 했었다. -> 유지보수 비용 매우 부담됐었다.

따라서, 정리를 잘 하고 특정 패턴을 만들어서 유지 보수 비용을 줄이기로 했다.

그래서 고안된 것들이 MVC, MVVM 등이 있다.

 

디자인패턴의 목표는 두 가지가 있다.

1. 기술부채 최소화

2. 재사용 및 지속 가능

 

정리하자면, 

코드 구조에 대한 전략을 "디자인 패턴" 또는 "클린 아키텍쳐" 라고 부른다.

 

Chap 10-2. 디자인 패턴 기초 2

최근에는 대부분 MVVM 을 사용한다.

 

예전에는 MVC 를 많이 사용했다. 

우선, MVC (Model - View - Controller)를 살펴보자.

MVC 패턴 구조

MVC 패턴은 위와 같은데, Model 과 View의 중개자 역할을 하는 ViewController 의 역할이 너무 너무 많았다. 그래서 Massive View Controller 라는 별명까지 얻게 되었다고 한다. 이 문제를 해결하기 위해서, MVVM이 개발되었다.

MVVM 패턴 구조는 다음과 같다.

MVVM 패턴 구조

 

MVC vs. MVVM

MVVM은, 

1. ViewController 가 모델에 직접 접근 못함.

2. ViewController가 ViewModel 이라는 클래스를 새로 가짐

3. ViewModel이 ViewLayout에 위치한다.

4. 많은 일들을 ViewModel에게 위임함.

-> ViewController가 할 일이 적어져서, 할 일이 명확해졌다.

-> 할 일이 명확해지므로, 수정이 용이하고 유지보수에 적은 비용이 든다.

 

MVVM 패턴을 실제 구현해봤을 떄 구조를 살펴보자.

MVVM 실제 구현

 

기술 부채를 줄이고, 재사용 가능 및 비용을 줄이기 위해 코드를 수정하는 과정을 리팩터링이라고 한다.

사용자 입장에서는 작동이 똑같아 보일 수 밖에 없다. 내부 코드만 바꾼 것이기 때문이다.

 

리팩터링 목표는,

1. 중복제거

2. 단일 책임 갖기(하나에 한 가지 기능)

 

특히, 단일 책임 갖기 전략으로는

"10, 200 rule" 이 있다. 메소드는 10줄 안에, 클래스는 200줄 안에 코드를 짜라는 전략이다.

초보자라면, "30, 400 rule" 훈련을 강추한다.

 

Chap 10-3. MVVM으로 리팩터링 하기 1

원피스 앱 짰던 거를 리팩터링 해보자.

우선 전략을 짜보았다. 

 

1. DetailViewController화면   

DetailViewController 화면

<DetailViewController MVVM 패턴 적용 전략>

MVVM 디자인패턴을 적용해보자. 일단, Model View ViewModel 을 찾자    

 

Model

    -BountyInfo(현상금과 이름 하나로 해서 만들자)

    

View

    -imgview, nameLabel, bountyLabel

    View 들은 viewModel을 통해서 구성되기

    

ViewModel

    -DetailViewModel

    Viewcontroller가 직접 Model에 직접 엑세스 안되므로, ViewModel을 만들어야한다.

    BountyViewModel을 만들고, ViewLayer에서 필요한 메서드 만들기.

    

2. BountyViewController 화면    

BountyViewController 화면

<BountyViewController MVVM 패턴 적용 전략>

MVVM 디자인패턴을 적용해보자. 일단, model view viewmodel 을 찾자

 

Model

    -BountyInfo(현상금과 이름 하나로 해서 만들자)

       

View

    -imgview, nameLabel, bountyLabel

    View 들은 viewModel을 통해서 구성되기

    

ViewModel

    -DetailViewModel

    Viewcontroller가 직접 Model에 직접 엑세스 안되므로, ViewModel을 만들어야한다.

    BountyViewModel을 만들고, ViewLayer에서 필요한 메서드 만들기.

    

BountyViewController 부터 하나씩 리팩토링 해보자. 

1. BountyInfo 만들기.

BountyViewController.swift

우선 struct를 만들었다. 그 다음 기존의 것들을 대체해보는 작업을 해주었다.

BountyViewController.swfit

이렇게 nameList와 BountyList가 따로따로 있어서, 이름과 현상금이 함께 있지 않아서, 이름이나 현상금 정보를 업데이트 할 때 어려움이 있다. 이 부분을, 다음과 같이 변경해주었다. 

BountyViewController.swift

bounty는 내맘대로 그냥 새로 지정해주었다.

 

이렇게 짝 맞춰서 변경하면, 다음과 같이 오류가 뜬다. 오류를 하나씩 고쳐보자. 

BountyViewController.swift - BountyInfoList 설정 직후 화면

47~48부분, 64부분, 74~77부분 총 세 부분이다.

 

 

먼저, 47~48 부분 수정.

BountyViewController.swift

 

 

64부분 수정.

BountyViewController.swift

 

 

74~77부분 수정.

BountyViewController.swift

 

 

실행을 해보자! 결과는 예상하다시피 같다.

실행화면

 

 

그 다음으로는 DetailViewController을 리팩토링해보자.

일단, bountyInfo를 만들어주고, name과 bounty 부분을 지워주자.

DetailViewController.swift

 

그러면, bountyViewController에서 아래와 같이 문제가 생길거다. (name 이랑 bounty를 지워서).

bountyView.swfit

 

수정해주자.

bountyViewController.swift

 

다시 돌아와서, DetailViewController도 마저 수정해주자. 

방금 name, bounty를 지워서 아래와 같이 오류가 나는 거다.

DetailViewController

 

이거를 아래와 같이 수정해준다.

DetailViewController.swfit

빌드해보면 여전히 결과는 같다! 1차 리팩토링 끝!

 

 

Chap 10-4. MVVM으로 리팩터링하기 2

Chap 10-3 에서는 Model 만 리팩터링했었는데, 이번에는 View 와 ViewModel까지 리팩터링해보자.

 

우선 ViewModel을 만들어주자. ViewModel은 data를 가지고 있어야 한다고 했었다.

+ Recent posts