20210628 Quizzler project - 4 (with MVC design pattern)

https://dmsitter.tistory.com/112

MVC Design pattern

 

 

Quizzler 어플의 이해와 수정을 쉽게 하기위해

MVC design pattern 을 이용할 것이다.

 

 

먼저, quiz array를 Viewcontroller.swift가 아닌 다른 곳으로 옮겨줄 건데,

Question.swift - 우클릭 - New Group from Selection 을 선택해준다.

새로운 폴더가 Question.swift 를 포함하도록 생성한다. 이 폴더의 이름은 'Model'로 수정한다.

 

위의 방법으로

Main.storyboard를 포함하는 새로운 폴더를 생성하고, 폴더의 이름을 'View'로 한다.

ViewController.swift를 포함하는 새로운 폴더를 생성, 이름을 'Controller'로 한다.

 

 

 

여기까지 MVC 구조를 만들어준 것이고,

이제 코드를 MVC design pattern으로 변환하는 작업을 실제로 수행할 것이다.

 

 

 

1. ViewController(Controller)를 분리해야 한다.

 

컨트롤러는 수행할 작업을 다른 구성요소에 알리고, 다른 구성요소의 변경사항에 대응하는 역할만 해야한다.

 

즉, View에서 사용자 상호작용으로 수행할 작업을 처리하고, 뷰에 표시해야 하는 내용을 알려야한다.

또한 Model에서 관련 데이터를 가져와 화면으로 보내고, Model이 스스로 업데이트하도록 지시해야 한다.

 

 

현재(작업전) viewController는 모든 퀴즈 데이터와 로직을 처리하고 있다.

이 부분을 먼저 분리해줄 것이다.

 

Model - new file - 'QuizBrain.swift' 생성하여 퀴즈 로직을 처리하도록 한다.

'QuizBrain' structure를 만들어서, viewController.swift에 있던 quiz array를 옮겨주었다.

이 때 init은 필요없다.

이미 값이 주어져있고 constant이기 때문에 변경될 일이 없기도 하고,

어플이 실행되는 도중에 새로 question을 추가하거나 삭제할 일도 없기 때문이다.

 

 

마찬가지로

questionNumber variable도 QuizBrain.swift로 옮겨준다.

 

 

viewController.swift에 남아있는 코드 중 

answerButtonPressed function을 살펴보면 두 가지 역할을 담당하는 것을 확인할 수 있다.

(에러는 일단 무시)

 

1) answer checking

2) quiz progression (다음 question으로 넘어가도록 함)

 

 

이 함수를 정상적으로 작동하도록 하기 위해

QuizBrain.swift을 viewController.swift로 불러오는 코드를 상단에 입력할 것이다.

->

변수를 하나 생성해준다. ***변수의 이름은 소문자로 시작하도록 한다.

var quizBrain = QuizBrain() 

 

 

 

 

https://dmsitter.tistory.com/113

swift - Functions with Output

 

 

 

userAnswer와 actualAnswer를 비교해서 버튼의 backgroundColor를 변경했던 부분을 

다시 사용하기 위해 checkAnswer 함수가 output을 가지도록 수정할 것이다.

 

이전까지는 함수에 아무런 input이 없거나, input을 넣어주는 경우만 있었는데,

output을 갖는 함수를 정의하고 사용하는 법을 위 링크에 정리해두었다.

 

 

 

QuizBrain.swift 에서 checkAnswer 함수 부분을 위와 같이 수정했고

 

 

 

 

 

ViewController.swift에서 해당되는 부분을 위와 같이 수정했다.

 

***위의 코드들을 단 3줄로 줄일 수도 있다.

if quizBrain.checkAnswer(sender.currentTitle!) {
	sender.backgroundColor = UIcolor.green
} else {
    sender.backgroundColor = UIcolor.red
}
    

이렇게 짧게 코드를 작성할 수도 있지만,

직관적으로 코드를 이해하기가 어렵다.

 

 

 

 

 

Challenge )

 

updateUI function을 QuizBrain.swift로 옮길 것

 

 

QuizBrain.swift의 구조체 안에 위와 같은 메소드를 넣어주고

 

 

 

ViewController.swift의 해당 부분의 코드블럭을 위와 같이 수정해줬다.

 

 

---

 

 

그리고,

questionNumber를 증가시키고, 마지막 문제 다음에 다시 첫문제로 돌아가도록 하는 부분을 

QuizBrain.swift로 옮겨주었다.

 

마찬가지로 구조체 안에 새로운 메소드 nextQuestion()를 만들어주고,

viewController.swift의 원래 자리에는

quizBrain.nextQuestion() 코드를 작성해줬다.

 

 

 

 

 

이러한 에러메시지가 뜨는데,

 

immutabillity 에 관한 내용을 정리한 뒤에 다시 수정할 것이다.