'현상금 랭킹 앱'을 제작하면서 배운 점 회고

현상금 랭킹 앱은 3단계의 과정을 거쳐서 최종 결과물이 되었습니다.

 

1. MVC 패턴을 가지고 테이블 뷰 (UITableView) 와 디테일 뷰 (UIView) 로 구성된 앱 작성하기

2. MVC 패턴을 MVVM 패턴으로 리팩터링하기

3. 테이블 뷰를 컬렉션 뷰로 변경하고, 디테일 뷰에 애니메이션 추가하기

 

위 단계의 순서대로 새로 배우거나 복습할 점을 글로 남기려고 합니다.

 

---

 

1단계가 완료시점의 현상금 랭킹 앱

 

1단계: MVC 패턴을 가지고 테이블 뷰 와 디테일 뷰로 구성된 앱 작성하기

a. MVC

이전 글에서 한 번 다룬 내용입니다.

 

MVC 패턴의 특징은 앱 내의 오브젝트를 3개의 큰 역할 (레이어) 로 나누고, 역할 간 이상적으로 소통하는 방식이 있다는 것입니다.

Model, View, Contoller : View 와 Model 에는 직접적인 연결성이 없다. Controller 가 두 레이어의 중재자이다.

 

그리고 Controller 레이어에 속하는 UIViewController 의 역할이 너무 비대해져 'Massive View Controller' 가 된다는 단점이 있습니다.

이렇게 되면 SOLID 중 하나인 단일 책임의 원칙에 어긋나기 때문에 유지보수와 코드의 재사용, 테스트가 어려워집니다.

---

 

b.  테이블 뷰

테이블 뷰는 리스트 자료구조를 화면에 표현할때 적합한 View 입니다.

 

테이블 뷰의 형태적 특징은 반드시 하나의 행에 하나의 cell 만을 표시할 수 있다는 것 입니다.

 

또한 Delegation 을 통해

1. 테이블 뷰에 표시할 데이터와 - UITableViewDataSource

 

2. 테이블 뷰에서 이벤트가 발생했을 때 처리할 메소드를 요구합니다. - UITableViewDelegate

 

Delegation 은 객체가 소통하는 방식 중 하나 입니다.

 

객체가 소통하는 방식은 크게 3가지가 있으며, Delegation, Notification, KVO 방식이 있습니다.

Notification, KVO 방식은 추후 글을 통해 다룰 생각입니다.

 

또 다른 특징으로는 cell 을 재활용 한다는 점이 있습니다.

 

즉 화면에 cell 을 표시할 때마다 새로운 인스턴스를 만드는 것이 아니라, 한 번 사용한 cell 을 버퍼에 따로 저장해놓고 재활용할 cell 이 있으면 재활용하는 방식입니다.

 

인스턴스 메소드인 dequeReusableCell(withIdentifier:for:) 등의 메소드로 cell을 얻을 수 있습니다.

재활용할 cell 이 없을 경우에는 새로운 인스턴스를 만들어서 반환합니다.

 

이 프로젝트에서는 커스텀 셀을 사용하였기 때문에 아래 코드와 같은 방식으로 타입 캐스팅 (as?) 하여 사용하였습니다.

왜 타입 캐스팅? 이 메서드가 반환하는 타입은 UITableViewCell 이기 때문입니다.

guard let cell = tableView.dequeueReusableCell(withReuseIdentifier: "ListCell", for: indexPath) as? ListCell else { return UITableViewCell() }

---

 

c. 디테일 뷰

 

 

이 앱에서는 Bounty List View Controller 와 Detail View Controller가 Segue (세그웨이) 로 연결되어 있습니다.

Presentation 방식은 'Present Modally' 입니다.

 

보통 컨트롤과 View Controller 를 세그웨이로 연결하면

컨트롤에서 지정한 유저 인풋이 발생하면 자동으로 세그웨이가 실행 됩니다.

컨트롤은 User Interaction 을 Default 로 받는 UIVIew 들을 말합니다.

 

하지만 VC와 VC 간의 세그웨이 연결은 말 그대로 VC 간의 연결성만 나타낼 뿐, Segue는 자동으로 실행되지 않습니다.

 

따라서 원하는 시점에 performSegue(withIdentifier:sender:) 와 같은 메서드를 호출하여 세그웨이를 수동으로 실행시켜야 합니다.

 

세그웨이의 Attribute Inspector

 

그리고 VC와 VC 간에는 여러 세그웨이가 존재할 수 있기 때문에, 세그웨이마다 identifier 를 지정해 줍니다.

 

예를 들어 performSegue(withIdentifier:sender:) 메서드는 첫번째 파라미터로 이 identifier 를 요구합니다.

 

perfromSegue(withIdentifier:sender) 메서드가 실행되면 연결되어있는 다음 VC 가 화면에 나타나기 직전에

 

prepare(for:sender:) 메서드가 호출 됩니다.

 

prepare(for:sender:) 메서드의 원형에는 아무런 코드가 들어있지 않습니다.

 

따라서 오버라이드 해서 원하는 대로 구현 합니다.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  guard segue.identifier == "detailView", let sender = sender as? Int else {
    return
  }

  guard let vc = segue.destination as? DetailViewController else {
    return
  }

  vc.name = nameList[sender]
  vc.bounty = bountyList[sender]

}

 

첫번째 파라미터로 전달된 segue 는 실행된 세그웨이의 참조를 가지고 있습니다.

 

identifier, source, destination 속성을 적절하게 사용하여 두 객체 (VC) 간의 데이터 전달을 할 수 있습니다.

여기서 source 와 destination 은 UIViewController 타입이므로 맞는 클래스로 타입 캐스팅해주어야 합니다.

 

두번째 파라미터로 전달된 sender 는 perfromSegue(withIdentifier:sender) 을 호출할때 전달한 sender 와 같은 데이터 입니다.

 

위 코드에서는 indexPath.row 를 전달하였고, Any? 타입으로 받았기 때문에 사용하기 위해 Int 로 타입캐스팅해주었습니다.

 

 

 

끝!

---

다음 글: