Hyun's_Devlog

코드는 유지보수 및 수정이 용이하도록 작성해야 하는데, MVC 아키텍쳐는 그러한 여러가지 방법들 중 하나이다.

What is MVC?

Model, View, Controller의 약자이다. 즉 하나의 프로젝트를 크게 모델, 뷰, 컨트롤러로 나누어서 작업하는 것을 의미한다. 

Model - what your app is

View - contoller's minons

Controller - how model is presented

모델에는 해당 앱이 무엇인지를, 컨트롤러는 해당 모델이 어떻게 보여지는지를 기술하는 것이다. 그렇다면 뷰는? 컨트롤러가 지시하는대로 유저에게 모습을 보여주는 부분이라고 생각하면 된다. 

전반적인 통신은 모델과 컨트롤러, 그리고 컨트롤러와 뷰 이렇게 통신을 하게된다. 즉 모델과 뷰는 직접적으로 통신을 할 수 없다는 얘기. 

모델은 자신에게 변경사항이 일어나면 컨트롤러에게 신호를 보낸다. 그렇게 되면 컨트롤러는 모델을 재탐색하여 변경사항을 알아내고 이를 뷰에 반영하게 된다. 해당 통신을 ios 에서는 KVO(key-value observing)이라고 한다. 

뷰는 사용자의 이벤트를 감지하고 이를 action을 통해 컨트롤러에게 알린다. 반대로 컨트롤러는 outlet을 통해 자신의 지시를 전달하게 된다. MVC모델은 컨트롤러(controller)가 무엇을(model) 어떻게 표현(view)할것인지 구분하여 코드를 작성하는 방법이라고 생각하면 된다.

 그렇다면 화면이 여러개인 앱들이 있을텐데 그러한 앱들은 MVC를 어떻게 적용하느냐? 라는 질문이 생기게 된다. 이 경우, 여러개의 MVC가 만들어 지는데 각 MVC는 나머지 MVC들을 하나의 뷰로 여기게 된다.

Demo

해당 데모는 지난번 카드뒤집기 데모에 MVC를 적용하여 카드 짝맞추기 게임으로 만든 것이다. 

Model

import Foundation

struct Card{
    //카드가 앞면인지 나타내는 속성
    var isFaceUp = false
    //카드의 짝이 맞는지 나타내는 속성
    var isMatchedUp = false
    //카드의 짝을 확인하기 위한 속성
    var identifier: Int
    
    //정적 선언. 즉 card타입 자체에 부여되는 속성이다.
    static var identifierFactory = 0
    
    //정적 선언. card타입 자체에 부여되는 함수. id를 하나씩 증가시켜 반환한다.
    static func getUniqueIdentifier() -> Int{
        identifierFactory += 1
        return identifierFactory
    }
    
    //카드의 초기화가 일어날 때 마다 고유의 id를 생성한다.
    init(){
        self.identifier = Card.getUniqueIdentifier()
    }

}

import Foundation

class Concentration{
    //card타입의 배열 생성
    var cards = [Card]()
    
    //유일하게 앞면 상태의 카드를 나타내는 속성 이후에 두번째로 오픈되는 카드와 id를 비교하기위해 사용된다.
    var indexOfOneAndOnlyFaceupCard:Int?
    
    //카드를 선택할 때 수행할 함수이다. 유저가 선택한 카드가 몇번째 배열인지 배개변수로 받는다.
    func chooseCard(at index: Int){
        print("card's id:",cards[index].identifier)
        print("card's index:",index)
        
        if !cards[index].isMatchedUp{
            //유저가 선택한 카드가 만약 쌍을 이루지 못한 상태라면,
            if let matchIndex = indexOfOneAndOnlyFaceupCard, matchIndex != index{
                //만약 유저가 선택한 카드 제외, 앞면인 상태의 카드가 한장이 존재한다면, 해당카드와 id를 비교
                if cards[matchIndex].identifier == cards[index].identifier{
                    //서로의 id가 같다면, 두 카드는 쌍을 이룬 상태로 전환
                    cards[matchIndex].isMatchedUp = true
                    cards[index].isMatchedUp = true
                }
                //그렇지 않다면 유저가 선택한 카드는 앞면을 향하게 한다.
                cards[index].isFaceUp = true
                //더이상 유일하게 앞면을 보고있는 카드는 없다.
                indexOfOneAndOnlyFaceupCard = nil
            } else{
                //indexOfOneAndOnlyFaceupCard값이 nil이라면, 즉 유저가 선택한 카드 이외 앞면인 카드가 한장보다 많으면,
                for flipDownIndex in cards.indices{
                    //모든 카드를 뒷면으로 바꾼다.
                    cards[flipDownIndex].isFaceUp = false
                }
                //유저가 선택한 카드는 앞면으로 바꾼다.
                cards[index].isFaceUp = true
                //유저가 선택한 카드는 앞면을 바라보는 유일한 한장이다.
                indexOfOneAndOnlyFaceupCard = index
            }
        }
    }
    
    //생성할 카드쌍의 수를 입력받는다. 즉 입력받는 수의 두배만큼 카드를 만든다.
    init(numberOfPairsOfCards:Int){
        for _ in 0..<numberOfPairsOfCards{
            //동일카드 한쌍을 배열에 추가한다.
            let card = Card()
            cards += [card,card]
        }
        
        //TODO: 카드섞기
        for index in 0..<numberOfPairsOfCards{
            let randomIndex = Int(arc4random_uniform(UInt32(numberOfPairsOfCards)))
            let swpidentifier = cards[index].identifier
            cards[index].identifier = cards[randomIndex].identifier
            cards[randomIndex].identifier = swpidentifier
        }
    }
}

View

Controller

import UIKit

class ViewController: UIViewController {
    //게임 생성. 카드 쌍의 수는 카드버튼 갯수의 절반이다.
    lazy var game = Concentration(numberOfPairsOfCards: cardButtons.count+1/2)
    
    //카드를 뒤집은 수를 나타내는 레이블.
    @IBOutlet weak var flipCountLabel: UILabel!
    
    //flipCountLabel에 표시할 변수. 당연하게도 0부터 시작한다.
    var flipCount = 0 {
        //변수의 값 변동이 일어날 때마다 수행되는 메소드. flipCountLabel에 변경된 값을 전달하고 표시한다.
        didSet{
            flipCountLabel.text = "flipCount: \(flipCount)"
        }
    }
    
    //UIButton을 카드모양으로 배치하였다. 해당 카드버튼들을 배열로 담았다.
    @IBOutlet var cardButtons : [UIButton]!
    
    //사용자가 카드를 터치할 때의 이벤트 함수. 어떤 카드가 터치된건지 UIButton을 매개변수로 넘긴다.
    @IBAction func touchCard(_ sender: UIButton) {
        if let cardNumber = cardButtons.firstIndex(of: sender){
            //sender 즉 사용자가 터치한 카드가 cards배열에서 몇번째 카드인지 넘겨준다.
            game.chooseCard(at: cardNumber)
            //뷰에 모델의 변경사항을 반영한다.
            updateViewFromModel()
        } else{
            //만약 카드가 cards배열에 없다면 오류문 출력
            print("card is not in cardsArray")
        }
    }
    
    //모델의 변경사항을 뷰에 알려준다.
    func updateViewFromModel() {
        for index in cardButtons.indices{
            //카드버튼과 카드는 배열 속 번호가 동일하다.
            let button = cardButtons[index]
            let card = game.cards[index]
            
            if card.isFaceUp{
                //앞면인 카드가 있다면, 카드에 해당하는 카드버튼에 이모지를 삽입
                button.setTitle(emoji(for: card), for: UIControl.State.normal)
                button.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
                
                if !card.isMatchedUp{
                    //아직 짝이 없는 상태의 카드라면 flipCount증가.
                    flipCount += 1
                }
            } else{
                //카드가 뒷면인 상태라면 해당 카드버튼은 이모지를 지우고 뒷면으로 바꾼다.
                button.setTitle("", for: UIControl.State.normal)
                //카드가 만약 짝이 맞는 상태라면 투명하게 그렇지 않다면 주황색으로 바꾼다.
                button.backgroundColor = card.isMatchedUp ? #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0) : #colorLiteral(red: 1, green: 0.5763723254, blue: 0, alpha: 1)
            }
        }
    }
    
    //이모티콘 후보들이다. 배열로 담아놓았다.
    var emojiChoices = ["🦇", "😱", "🙀", "👿", "🎃", "👻", "🍭", "🍬", "🍎"]
    
    //emojiChoices에서 이모지를 뽑아 [카드의 id: 이모지] 쌍으로 딕셔너리를 생성한다.
    var emoji = [Int:String]()
    
    //카드에 이모지를 그려넣는 함수. 카드를 매개변수로 받는다. 이모지를 반환한다.
    func emoji(for card: Card) -> String{
        if emoji[card.identifier] == nil, emojiChoices.count > 0{
            //만약 매개변수 카드의 id가 emoji딕셔너리의 키로 존재하지 않는다면, 이모지 후보에서 랜덤하게 뽑아온뒤 [카드id:이모지] 딕셔너리에 추가한다.
            let randomIndex = Int(arc4random_uniform(UInt32(emojiChoices.count)))
            emoji[card.identifier] = emojiChoices.remove(at: randomIndex)
        }
        
        //카드 id를 키값으로 이모지 반환
        return emoji[card.identifier] ?? "?"
    }
}

lazy var

Cannot use instance member 'cardButtons' within property initializer;

property initializers run before 'self' is available

컨트롤러를 작성하면서 새롭게 배운것은 lazy이다.  game을 생성할 때 카드쌍의 수를 입력해야 하는데, 카드의 갯수를 늘리거나 줄이는 경우에, 이에 대응하여 game이 유연하게 동작하는 게 하기 위해 cardButtons 배열의 갯수를 읽어오도록 했다. 우선 스위프트는 효율적인 메모리관리를 위해 변수의 초기화가 이루어져야만 사용을 할 수 있다. 하지만 game변수를 초기화하기 위해 속성을 초기화하려다보니 속성을 초기화하려면 변수가 초기화 되어있어야 한다고 오류가 뜨고 말았다. 이러한 꼬인 부분을 해결하기 위해 사용한 것이 lazy였다. lazy로 선언된 변수는 일단 초기화가 완료된 것으로 취급이 되고, 해당 변수가 필요하게 되면 초기화가 시작된다. 이렇게 해서 상호간에 일으키는 오류를 해결했던 점이 흥미로웠다. 

optional ?? unwrap

emoji(for: card) 함수를 보면 마지막에 return emoji[card.identifier] ?? "?"  부분이 있다. 이러한 표현방법을 다른곳에서도 자주 봤지만 뜻을 잘 몰랐고 이번 강의를 통해서 이해하게 되었다. 해당 코드는 본래 아래와 같은 표현이다. 

if emoji[card.identifier] != nil {
    return emoji[card.identifier]!
} esle {
    return "?"
}

emoji딕셔너리가 카드의 id로 key를 가지고 있으면 해당하는 value를 unwrap하여 반환하고, 해당 키를 가지고 있지 않으면 "?"를 반환하는 코드를 return emoji[card.identifier] ?? "?"라는 한줄로 대치한 것이다. 

edwith를 통해 스탠포드대학의 ios강의를 번역자막을 보면서 시청할수있다. 해당 강의를 시청하며 정리한 내용을 적어보려고 한다. 

what's in ios?

ios에 대한 간략한 설명을 해보자면 초기의 os X for iphone에서 3버전에는 iphone os, 2010년 4버전이 나오면서 ios라는 이름으로 정착되었다. ios는 크게 cocoa touch, media, core service, 

core OS로 구분되어 사용자와 하드웨어간의 의사소통을 담당한다.

사용자

cocoa touch

media

core service

core OS

하드웨어

cocoa touch는 전반적인 ui를 담당한다. 버튼, 슬라이더, 맵킷, 카메라 등 사용자와 가장 가까운 부분의 처리를 수행한다.

media는 말 그대로 비디오, 오디오, 이미지 등 ios의 미디어 부분을 할당한다. 

core service는 core location, network와 같은 핵심적인 서비스를 담당한다. 

core OS는 BSD계열 unix로 구성되어있으며, 당연하게도 c언어 베이스이다. 

해당 강의에서는 cocoa touch와 core service에 대해 다룰 예정이다.

Demo

이번 강의에 대한 카드뒤집기 데모를 만들었다. 

import UIKit


class ViewController: UIViewController {
    //카드를 뒤집은 수를 나타내는 레이블.
    @IBOutlet weak var flipCountLabel: UILabel!
    
    //flipCountLabel에 표시할 변수. 당연하게도 0부터 시작한다.
    var flipCount = 0 {
        //변수의 값 변동이 일어날 때마다 수행되는 메소드. flipCountLabel에 변경된 값을 전달하고 표시한다.
        didSet{
            flipCountLabel.text = "flipCount: \(flipCount)"
        }
    }
    
    //카드를 뒤집는 함수. 카드에 그려질 이모티콘(문자열)과 어떤 카드에 그릴지 UIButton을 매개변수로 받는다.
    func flipCard(withEmoji emoji:String, on button:UIButton) {
        if button.currentTitle == emoji{
            //카드가 앞면일 경우. 카드의 현재 문양(currentTitle)과 배개변수로 받은 이모티콘이 같다.
            button.setTitle("", for: UIControl.State.normal)
            button.backgroundColor =  colorLiteral(red: 1, green: 0.5763723254, blue: 0, alpha: 1)
        } else{
            //카드가 뒷면일 경우. 카드에 배개변수로 받은 이모티콘을 그리고(setTitle) 배경을 흰색으로, flipCount를 증가시킨다.
            button.setTitle(emoji, for: UIControl.State.normal)
            button.backgroundColor =  colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
            //flipCount가 증가되면 didSet이 수행된다.
            flipCount += 1
        }
    }
    
    //UIButton을 카드모양으로 배치하였다. 해당 카드들을 배열로 담았다.
    @IBOutlet var cards: [UIButton]!
    
    //카드에 그려넣을 그림을 이모티콘으로 표현한다. 배열로 담았다.
    let emojis = ["🐶","🦊","🐶","🦊"]
    
    //사용자가 카드를 터치할 때의 이벤트 함수. 어떤 카드가 터치된건지 UIButton을 매개변수로 넘긴다.
    @IBAction func touchCard(_ sender: UIButton) {
        if let cardNumber = cards.firstIndex(of: sender){
            //sender 즉 사용자가 터치한 카드가 cards배열에 몇번째 배열인지 반환한다.
            //해당 카드와 같은 배열번호의 이모지를 배개변수로 넘겨 flipCard()함수 수행.
            flipCard(withEmoji: emojis[cardNumber], on: sender)
        } else{
            //만약 카드가 cards배열에 없다면 오류문 출력
            print("card is not in cardsArray")
        }
    }
}

여기서 인상깊었던 부분은 함수부분이다. 처음 스위프트를 배울 때 함수선언부분에서 왜 매개변수명을 굳이 두개나 적을까 궁금했는데, 새touchCard()의 flipCard() 호출부분을 보면 스위프트가 어째서 매개변수명을 두개로 적는지 알 수 있었다. 애플은 코드를 읽을 때 최대한 사람의 입장에서 자연스럽게 코드를 읽을 수 있기를 바랬고, 그러한 의도가 호출부에서 잘 나타났다.

flipCard(withEmoji: emojis[cardNumber], on : sender) -> 전달자에 들어있는 이모지가 그려진 카드를 뒤집어라. 

반대로 선언부에서는 withemoji와 on이라는 변수명이 부자연스러우니 emoji와 button이라는 변수명으로 사용이 된다. 이러한 변수명의 선택은 코드의 유지보수면에서 큰 도움이 된다고 생각한다. 강의를 많이 찾아본 것은 아니지만 적어도 학원강의에서는 이러한 부분을 전혀 알려주지 않았던 것을 보면 확실히 본토 대학강의가 훨씬 더 영양가있다고 생각한다.

이번에 didSet{ }에 대해서도 처음 배웠다. 속성감시자라고 번역이 되어있는데, 우리가 알고있는 변수는 스위프트에서 속성이라 부른다고 한다. 속성(변수)값이 변경될 경우 항상 수행되는 작업을 명시해줄 수 있다. 해당 데모에서 flipCount를 증가할 때 마다 레이블 수정작업을 따로 적을 필요없이 didSet{ }에 레이블 수정작업을 적어주어 코드라인을 줄일 수 있게 되었다.