[iOS] - Stanford CS193p iOS 강의 2강 정리 by Paul Hegarty

🎯 MVC(Model - View - Controller)?

💬 what is MVC?

• 기본적으로 시스템 안의 모든 객체는 세가지의 카테고리로 나눌 수 있습니다.

  

  • Model: What your application is about (but not how it is displayed)
    앱에서 UI와 독립적인 객체들로 '무엇'에 해당하는 요소들을 가지고 있습니다. 예를 들어, Concentration Game에서는 게임 자체를 할 줄 아는 부분에 해당합니다. 카드가 매치되는지, 카드를 제거해야하는지, 언제 카드를 뒤집어야하는지 같은 부분입니다. (Knowledge of the game)

  • Controller: How your Model is presented to the user (UI Logic)

    컨트롤러는 위에 정의된 모델이 어떻게 화면에 나타나는지에 관한 것입니다.

  • View: Controller's minions

    일반적인 UI 요소들입니다. 예를 들면, UIButton, UIViewController, UILabel 같은 것들이 있습니다. Controller가 Model과 연동하여 앱에 필요한 무언가를 가져와 UI에 보여줄 때 필요합니다.

    
    

  • 세 요소의 통신은 아래와 같습니다.

    

  
  

• Controller는 Model, View와 직접적으로 통신할 수 있으며 거의 동시에 양쪽 모두와 통신 가능합니다. 하지만 Model은 UI Independent 하므로 View와 통신이 불가합니다. 특히 View는 버튼 등 UI 요소들의 집합인데 UI버튼이 이 앱이 어떤 기능을 하는지 아는 것은 말이되지 않습니다.

  
  

  ☎️ View와 Controller의 커뮤니케이션

  
  

  여기서 자세히 살펴보아야 하는 것은 View가 Controller에 통신하는 방식입니다. 1강에서 만든 Concentration game을 예로 들면, 화면에서 카드 버튼을 클릭했을 경우 Controller가 이를 알아야 하기 때문에 정보를 넘겨줍니다. 하지만 여기서 View 객체는 일반적인 뷰 객체로 Controller에 대한 정보가 없는 블라인드 상태여야 합니다(Communication is "blind" and structured). 다시 말하면, View가 Controller와 통신할 때, 상대 Controller가 집중력 게임 Controller라는 사실을 알지 못합니다. 또한 structured의 의미는 View는 일반적인 객체(generic object)로 특정 컨트롤러와 어떻게 대화를 할지 미리 정해져 있어야 하므로 구조화 되어있다는 뜻입니다. 이렇게 통신을 위해 필요한 것이 target-action 입니다.

  
  
  

  일반 객체(게임에 대한 정보를 담고 있는 Controller와 다르게 특정되어있지 않은)인 View가 Controller와 대화하기 위해서는 target이 있어야 합니다. 집중력 게임에서 카드에서 Ctrl + 드래그로 touchCard라는 메소드를 만들었는데 이것이 target이 됩니다. Controller가 해야하는 일은 자신에게 타겟을 만드는 것입니다. 즉, touchCard 같은 메소드를 Controller에서 만들어두면 UIButton 등에서 호출을 받을 때마다 Action을 해당 target에 전달하는 방식입니다. 문제는 저 Action이 복잡해질 수 있습니다.

  
  
  

  예를 들어 ScrollView를 생각해보겠습니다. 사용자가 UI에서 스크롤을 사용했을 때(e.g. 끝까지 스크롤 했는지, 여기를 스크롤 해도 되는지 등) 필요한 개념이 Delegate입니다.

  
  

  델리게이트는 ScrollView 안에 있는 var입니다. 이 var는 객체를 가지고 있습니다. 이 객체는 특정 메세지들에 반응합니다. 일반적으로 이런 메세지들은 will, should, did로 시작합니다(I will scroll to here etc.). 컨트롤러는 프로토콜을 사용해서 ScrollView에게 자신이 ScrollView의 Delegate라고 알려줍니다. 이를 통해, Scroll View가 아는 것은 컨트롤러가 will, should, did를 구현한다는 사실 밖에 없습니다. 그 외에 게임과 관련된 다른 정보(e.g. 컨트롤러의 클래스)는 일절 알지 못합니다.

  View는 자기가 보여줄 내용을 가지고 있지 못합니다. 즉, 화면에 나타낼 정보를 인스턴스 변수로 가지고 있지 않다는 뜻입니다. iPod에서 음악이 50,000 곡이 있을 때 그 리스트를 ListView에서 가지고 있을 이유가 없습니다. 그래서 Controller에서 이러한 데이터 소스를 받아올 필요가 있고 그 때 필요한 것이 data source라는 델리게이트입니다.

  

  data source와 delegate는 비슷하지만 서로 다른 메소드들을 가지고 있을 뿐입니다. 이렇게 View가 Controller와 할 수 있는 Communication은 구조적(structured)이고 미리 정의(predefined)되어 있습니다.

  위의 이야기를 종합하면 MVC에서 Controller의 역할은 모델의 정보를 해석하고 구성해서 뷰에게 주는 것입니다.

  
  

  ☎️ Model과 Controller의 커뮤니케이션

  
  

  모델 역시 Controller와 직접적으로 대화할 수 없습니다. 하지만 View와 마찬가지로 Model도 Controller와 통신해야할 상황이 있을 수 있습니다. 예를 들어 어떤 데이터가 변경되서 관련된 UI들이 그걸 업데이트해야할 때가 있습니다. 이때 통신하는 방법을 교수님은 Radio Station Model(라디오 방송국 모델)이라고 표현하십니다.

  
  
  

  이렇게 Model에 라디오 송신기처럼 모델이 변경되었을 때 정보를 전달해야할 매체가 있고, Controller는 그 주파수를 Model의 송신기에 맞춰놓습니다. 그리고 변경이 생겼을 때 Controller는 초록색 화살표를 통해 바뀐 데이터를 직접 가져옵니다. 이 라디오 송신기를 iOS에서는 Notification이나 KVO(Key Value Observing)이라고 합니다.

  
  

  📱 multiple MVCs in iPhone or iPad

  
  

  • 아이폰의 앱 하나는 일반적으로 많은 화면들을 가지고 있습니다. 그래서 하나의 앱을 하나의 MVC에서 관리하는 경우는 많지 않습니다. 이를 도식화하면 아래와 같습니다.

    

    어떤 Controller가 다른 Controller와 통신할 때에는 그 대상이 Controller지만 View처럼 취급합니다. 그래서 이것들은 일반적(generic)이고 재사용 가능한(reusable) 컴포넌트처럼 행동합니다. 만약 아래와 같은 구조로 프로그램이 동작한다면

    

    UI에서 무언가가 바뀌었을 때 어떤 컨트롤러가 하고 있는 것인지, 어떤 모델이 데이터를 주었는지 등을 알 수 없기 때문에 디버그, 유지 보수하기가 어렵습니다.

    
    

    📝 Concentration Game에 MVC 적용해보기

    
    

    • MVC 중 V, C는 이미 구현이 되있기 때문에 Model을 구현하기 위해서 우선 swift파일을 하나 생성해줍니다. 이 때, Swift파일명은 그 파일의 클래스 중 가장 대표될 수 있는 것의 이름으로 합니다. 여기서는 Concentration이라고 명명했습니다.

      새로운 클래스를 만들 때에는 항상 이것의 공개 API가 무엇인지 생각해야 합니다. 여기서 API란 Application Programming Interface로 클래스 안의 모든 메소드와 인스턴스 변수의 리스트입니다. 그리고 Public API란 다른 클래스들의 사용을 허락한 메소드와 인스턴스 변수들입니다. 결국 이 클래스를 어떻게 사용할지를 결정하는 것입니다.

      Concentration 게임에서 필요한 공개 API는 아래와 같습니다.

      import Foundation
      
      class Concentration {
      
          var cards: Array<Card>
      
          func chooseCard(at index: Int) {
      
          }
      }

      여기서 cards는 Card라는 아직 생성되지 않은 객체의 배열이고, chooseCard는 카드를 고르는 메소드인데 Card로 직접 접근하는 것이 아니라 index를 통해 cards에서 꺼내오는 방식으로 구현합니다.

    • 이제 Card를 정의해 보겠습니다. Card.swift를 생성한 후 Card를 만드는데 이번에는 구조체를 사용합니다. 구조체와 클래스의 차이는 다음과 같습니다.

      1. 구조체(struct)는 상속성이 없습니다.
      2. 구조체는 값타입이고 클래스는 참조타입입니다.

      값타입은 인자로 보내거나, 배열에 넣거나, 다른 변수에 할당할 때에도 복사가 됩니다. 이렇게 생각하면 구조체를 통해 프로그램을 짜면 매번 복사가 일어나서 비효율적이라고 생각할 수 있지만, Swift는 값타입을 생성할 때마다 바로 복사하지 않습니다. 참조의 형태로 가지고 있다가 값의 변경이 일어날 때 실제로 복사를 진행합니다. 이를 "Copy on write semantics"라고 합니다.

      struct Card {
          var isFaceUp = false
          var isMatched = false
          var identifier: Int
      }

      Card는 위와 같은 요소를 필요로 합니다. 우선 모든 값은 변경 가능해야하므로 변수(var)로 선언되고, 카드가 뒤집혀있는지 여부를 확인하기 위해 isFaceUp, 다른 카드와 매칭이 되는지 확인하기 위해 isMatched가 필요한데 이 때 매치가 되는 카드인지 여부를 확인하기 위해 식별자가 필요합니다. 사용하기 간편한 Int형으로 설정했습니다.

      구현한 카드에 이미지로 이모티콘이 들어있으므로 String 프로퍼티가 필요하다고 생각할 수 있습니다. 하지만 지금 만드는 Card는 모델이고 모델은 UI independent하므로 이모티콘이나 jpeg 이미지 같은 파일은 여기 존재해서는 안됩니다. 그것들은 "How do u display the cards"와 관련된 것입니다.

    • 이제 Card가 생성되었기 때문에 다시 Concentration 클래스로 돌아가서 확인합니다.

      class Concentration {
      
          var cards = Array<Card>()
      
          func chooseCard(at index: Int) {
      
          }
      }

      아까와 다른 점은 Card라는 타입이 생성되었기 때문에 cards의 선언에서 문제가 없고, 초기화가 안되었기 때문에 타입 명시가 아니라 cards를 초기화 해줍니다. 이 때, Array라는 메소드는 파라미터가 없는 init을 가지고 있어서 ()를 붙여 empty Array를 추가해줍니다.

      Array의 init에는 다양한 것들이 있는데, 예를 들어 사용할 사이즈가 정해져 있다면 Array의 크기를 정해주는 init, 다른 배열에서 배열을 만들어서 그 항목을 복사해오는 init 등이 있습니다.

    • 이제 View Controller에서 Model과 통신을 위해 초록색 화살표를 만드는 작업을 해보겠습니다.

      class ViewController: UIViewController {
      
          var game: Concentration
      
          var flipCount = 0 {
              didSet {
          ...

      game이라는 Concentration 인스턴스를 생성해주어 이제 Concentration 있는 요소들을 사용할 수 있습니다. game을 위와 같이 선언해주면 역시나 초기화 문제가 발생합니다. 그럼 초기화를 해보겠습니다.

      var game = Concentration()

      Concentration 클래스를 선언할 때 init을 정의해주지 않았기 때문에 에러가 나야하지만 실제로는 잘 작동합니다. 왜 그럴까요?

      Swift는 기본적으로 class를 선언할 때, parameter가 비어있는 init을 자동으로 가지게 됩니다.

    • 이 게임을 완성했을 때 얼마나 많은 카드가 있는지 생각해야 합니다. 그래서 자동화 된 init이 아닌 커스텀한 init을 만들어줄 필요가 있습니다. init안에 카드 하나를 생성해보겠습니다.

      init(numberOfPairsOfCards: Int) {
              let card = Card() // 에러 발생
          }

      Concentration에서는 잘 되었던 초기화가 왜 Card에서는 안될까요? 그 이유는 Card가 struct이기 때문입니다. struct 역시 free initializer를 갖지만 class와는 다릅니다. struct가 받는 공짜 이니셜라이저는 모든 변수를 초기화합니다. 이미 초기화 되어 있는 값도 다시 초기화 해줍니다. 아래는 Xcode의 자동완성 기능을 이용한 코드입니다.

      init(numberOfPairsOfCards: Int) {
              let card = Card(isFaceUp: <#T##Bool#>, isMatched: <#T##Bool#>, identifier: <#T##Int#>)
          }

      위의 코드를 보면 이미 초기화 되어있는 isMatched 등의 메소드 역시 초기화합니다. Card의 identifier를 초기화하기 위해 init을 추가합니다.

      init(identifier: Int) {
              identifier = identifier // 에러 발생
          }

      왜 에러가 발생할까요? 우선 init의 인자인 indentifier는 external name이 존재하지 않습니다. 그래서 identifier가 정확히 어떤 의미인지 알 수 없습니다. 해결 방법은 아래와 같습니다.

      init(identifier i: Int) {
              identifier = i // 에러 발생
          }

      하지만 i는 매우 안좋은 네이밍입니다. 아무 의미를 담고 있지 않습니다. 그래서 아래와 같은 방법을 사용합니다.

      init(identifier: Int) {
              self.identifier = identifier 
          }

      self.identifier는 객체 자신이 가지고있는 identifier, 여기서는 프로퍼티를 의미합니다.

    • 이번엔 Concentration에 코드를 작성해보겠습니다. Swift의 for문은 시퀀스를 사용합니다. sequence란 어딘가에서 시작해서 다음으로, 그 다음으로 넘어가면서 돌 수 있는 것을 의미합니다. Array, String 등이 Sequence의 예시입니다. Concentration의 init을 작성해보겠습니다.

      init(numberOfPairsOfCards: Int) {
              for identifier in 1...numberOfPairsOfCards {
                  let card = Card(identifier: identifier)
                  let matchingCard = card
                  cards.append(card)
                  cards.append(matchingCard)
              }
          }

      cards 배열에 생성된 인스턴스를 넣어줍니다. 하지만 위에처럼 할 필요가 없습니다.

      init(numberOfPairsOfCards: Int) {
              for identifier in 1...numberOfPairsOfCards {
                  let card = Card(identifier: identifier)
                  cards.append(card)
                  cards.append(card)
              }
          }

      matchingCard라는 상수는 필요하지 않습니다. 배열에 넣거나 뺄 때에도 카드를 복사합니다. 참조가 아니라 복사이므로 위의 두 코드는 완전이 같은 역할을 합니다. 그래서 현재 init의 for문 안에는 총 3개의 card가 생성됩니다. 3개의 카드는 처음 상수로 선언된 card, 첫번째 cards에 append될 때 복사되는 card, 두번째 cards에 append될 때 복사되는 카드입니다. 이는 구조체가 값타입이기 때문입니다. 그래서 똑같은 코드를 2번 썼다고 하더라도 cards에 들어간 두 card는 두개의 다른 카드입니다. 하지만 두 줄의 같은 코드는 보기 좋지 않습니다. 그래서 아래와 같이 사용 가능합니다.

      cards += [card, card]

      이것은 파이썬의 extend와 같은 역할이며, 실제로 파이썬에서 리스트가 동작하는 것과 같은 형식으로 Array를 extend 해줍니다.

    • 위의 코드는 온전히 작동하지만 identifier = identifier라는 구문이 마음에 걸립니다. 이렇게 되면 집중력 게임이 직접 카드의 식별자를 지정하게 됩니다. 하지만 집중력 게임은 식별자가 무엇인지 신경쓰지 않습니다. 유일하기만 하면 됩니다. 그래서 identifier를 삭제하고 Card가 직접 identifier를 설정하게 해보겠습니다.

      identifier는 Card가 몇개가 생성되든 그들을 구별할 수 있는 구분자여야 합니다. 그래서 새로운 카드를 생성할 때 여기서 정적 메소드를 사용합니다. 정적 메소드를 사용하면 Card에게 메세지를 보낼 수 없습니다. Type Card에만 요청을 보낼 수 있습니다. static을 통해 identifier를 만들고 identifier를 반환하는 함수를 만들어보겠습니다.

      static var identifierFactory = 0
      
      static func getUniqueIdentifier() -> Int {
        Card.identifierFactory += 1
        return Card.identifierFactory
      }

      여기에서 getUniqueIdentifier 메소드는 정적메소드이므로 정적 메소드 안에서는 Card. 없이도 정적 변수에 접근할 수 있습니다. 그래서 Card.을 생략해줘도 됩니다.

      static func getUniqueIdentifier() -> Int {
              identifierFactory += 1
              return identifierFactory
          }

      이 변경된 identifier를 초기화에 사용하기 위해 위의 초기화 함수를 변경해보겠습니다.

      init() {
              self.identifier = Card.getUniqueIdentifier()
          }

      이렇게 하면 새로운 카드를 생성할 때마다 identifierFactory가 1씩 늘어나며 그 카드의 고유 숫자를 매겨줍니다.

    • 교수님께서 카드를 섞는 코드를 과제로 내주셨습니다. 저는 아래와 같이 작성했습니다.

      init(numberOfPairsOfCards: Int) {
              for _ in 1...numberOfPairsOfCards {
                  let card = Card()
                  cards += [card, card]
              }
              cards.shuffle() // 내장함수
          }

      내장함수 shuffle의 복잡도는 O(N)입니다. Swift에서 Shuffle은 fisher yates shuffle 이라는 알고리즘을 사용합니다. 위의 함수는 WWDC 2018에 소개된 것으로 해당 강의가 2017년 과정이라 shuffle이 없을 때 과제를 내주신 것으로 추정됩니다. fisher yates는 인덱스를 0부터 1씩 증가시키며 배열의 i 번째 요소와 랜덤으로 뽑힌 j 번째 요소를 swap하는 식으로 진행합니다.

    • 이제 Controller에서 game을 정의해주겠습니다. 여기서 game은 Controller가 Concentration을 이용해 한개의 게임을 생성해주는 것입니다.

      var game = Concentration(numberOfPairsOfCards: (cardButtons.count + 1) / 2)

      지금 만드는 예시의 경우 카드가 4개이므로 단순히 4라고 적을 수 있지만 그렇게되면 카드 수가 바뀔때마다 들어와서 변경해주어야하기 때문에 cardButtons Array의 크기로 선언해줍니다. 이 때 cardButtons가 홀수일 수도 있으므로 +1 해준 후 2로 나누어줍니다(쌍을 이루고 있기 때문에). 이렇게 마무리가 되면 좋겠지만 에러가 발생합니다.

      Cannot use instance member 'cardButtons' within property initializer; property initializers run before 'self' is available

      오류 메세지의 의미는 프로퍼티 초기화에서 인스턴스 멤버인 cardButtons를 사용할 수 없다는 것입니다. self라는 것은 모든 초기화가 완료되고 생기는 것인데 초기화 단계에서 이미 인스턴스 멤버를 불러와서 생기는 오류입니다. Swift에서 무엇을 사용하든 사용하기 전에는 완전히 초기화 되어야 합니다. 이를 해결하기 위해 다양한 방법이 있지만 여기에서는 lazy를 사용해보겠습니다.

    • 위의 코드를 lazy하게 다시 선언해줍니다.

      lazy var game = Concentration(numberOfPairsOfCards: (cardButtons.count + 1) / 2)

      lazy는 누가 사용하기 전까지는 초기화하지 않는다는 뜻입니다. 즉, game이라는 프로퍼티를 누군가가 사용하기 전까지 초기화하지 않기 때문에 다른 요소들의 초기화가 먼저 이루어지고나서 game이 필요할 때 초기화되므로 문제가 해결됩니다. 이 game이 초기화될 때까지 아무도 game 변수를 사용할 수 없습니다. 좀 더 쉽게 설명하면 lazy는 이 변수가 초기화되었다고 쳐줍니다. 이 lazy에는 제약 사항이 있습니다. lazy가 되면 didSet을 가질 수 없습니다. lazy 변수는 Property Observer를 사용할 수 없습니다.

  
  

  📱 touchCard 로직 변경하기

  
  

  • 이제 위에 구현해둔 game 인스턴스를 바탕으로 화면에서 Card를 눌렀을 경우의 로직을 변경해보도록 하겠습니다. flipCard의 명령을 game에서 Card를 선택하는 로직으로 변경하겠습니다.

      @IBAction func touchCard(_ sender: UIButton) {              
            flipCount += 1
            if let cardNumber = cardButtons.firstIndex(of: sender) {
    //            flipCard(withEmoji: emojiChoices[cardNumber], on: sender)
                game.chooseCard(at: cardNumber)
                updateViewFromModel()
            } else {
                print("Error")
            }
        }

    Controller에서는 선택되었다고만 알려주고 카드의 선택은 Model에게 맡기도록 하겠습니다.

  • 이제 Model로부터 View를 업데이트 해야합니다. 지금 View는 Model과 약간 연결이 되어있지 않습니다(little out of sync). 그래서 updateViewFromModel이라는 메소드를 정의해보겠습니다.

    func updateViewFromModel() {
            for index in 0..<cardButtons.count {
    
            }
        }

    모든 버튼을 관찰할 때 for button in cardButtons로 가져올 수도 있습니다. cardButtons가 sequence이기 때문에 가능합니다. 하지만 cards는 Card 타입의 Array이고 여기서 Card를 꺼내오는 구조로 사용할 것이기 때문에 index로 접근하겠습니다. 위의 코드처럼 cardButtons.count로 작성할 수 있지만 아래와 같이 작성할 수도 있습니다.

    func updateViewFromModel() {
            for index in cardButtons.indices {
    
            }
        }

    indices(plural of index)는 Array의 메소드로 Array의 모든 인덱스의 계수 가능 범위를 배열로 리턴해줍니다.

    Summary of indices

    The indices that are valid for subscripting the collection, in ascending order.

    이제 for문 안을 채워주면

    func updateViewFromModel() {
            for index in cardButtons.indices {
                let button = cardButtons[index]
                let card = game.cards[index]
                if card.isFaceUp {
                    button.setTitle(emoji, for: UIControl.State.normal)
                    button.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
                } else {
                    button.setTitle("", for: UIControl.State.normal)
                    button.backgroundColor = #colorLiteral(red: 1, green: 0.5763723254, blue: 0, alpha: 1)
                }
            }
        }

    가 됩니다. cardButtons의 인덱스를 순회하며 버튼을 가져와서 button으로, 해당 위치의 카드를 가져와서 카드로 선언해줍니다. 카드가 위를 보고있으면 버튼을 그림과 주황색으로 설정해주고, 카드가 뒤집혀있다면 그림이 없이 하얀색으로 설정해줍니다. 기존에 작성해주었던 flipCard는 더이상 필요가 없으므로 삭제해줍니다.

  • 이제 만들어주어야 하는 기능은 card가 매치되고 나면 더이상 그 카드는 사라져야합니다. 만들어둔 isMatched를 사용해 구현해보겠습니다.

    for index in cardButtons.indices {
                let button = cardButtons[index]
                let card = game.cards[index]
                if card.isFaceUp {
                    button.setTitle(emoji, for: UIControl.State.normal)
                    button.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
                } else {
                    button.setTitle("", for: UIControl.State.normal)
                    button.backgroundColor = card.isMatched ? #colorLiteral(red: 1, green: 0.5763723254, blue: 0, alpha: 0) : #colorLiteral(red: 1, green: 0.5763723254, blue: 0, alpha: 1)
                }
            }

    삼항연산자를 이용해 구현했습니다. card가 isMatched 상태라면 투명하게 만들어주고 아니라면 원래대로 주황색을 보여줍니다.

    여기서 setTitle의 emoji는 삭제했던 flipCard 메소드의 파라미터에서 가져온 것이라 에러가 발생합니다. 그래서 임시방편으로 에러를 없애기 위해 메소드를 하나 추가하겠습니다.

    func emoji(for card: Card) -> String {
            return "?"
        }
    
    ... button.setTitle(emoji(for: card), ...

    큰 의미는 없지만 오류를 해결하기 위해 작성했습니다.

📂 chooseCard 구현하기 (in Concentration)

• 현재 card는 cards Array에서 인덱스로 접근하여 가져오기 때문에 해당 카드를 index로 가져와 isFaceUp의 값을 반대로 해주는 로직을 구현해보겠습니다.

  func chooseCard(at index: Int) {
          if cards[index].isFaceUp {
              cards[index].isFaceUp = false
          } else {
              cards[index].isFaceUp = true
          }
      }

  이제 시뮬레이터로 앱을 실행시켜보면 정상적으로 작동함을 알 수 있습니다. 이제 남은 것은 물음표 대신에 이모지를 출력하는 것입니다.

😁 카드에서 Emoji 보여주기

• 오류를 없애기 위해 임시방편으로 "?" 출력했던 emoji 메소드를 다시 보겠습니다.

  var emoji = [Int:String]()
  
  func emoji(for card: Card) -> String { // 에러 발생
    let chosenEmoji = emoji[card.identifier]
    return chosenEmoji
  }

  emoji라는 딕셔너리를 선언해주고 card.identifier로 이모티콘을 가져오는 코드입니다. 괜찮은 듯 보이지만 에러가 발생합니다. 위의 코드는 String을 반환하지만 실제로 반환되는 값은 String이 아닌 String?(optional String)입니다. Dictionary는 key로 item에 접근하여 value를 가져오는 구조인데 key가 없을 수도 있기 때문에 반환값은 항상 optional로 나옵니다. 그래서 위의 코드를 수정하면

  func emoji(for card: Card) -> String {
          if emoji[card.identifier] != nil {
              return emoji[card.identifier]!
          } else {
              return "?"
          }
      }

  로 사용할 수 있습니다. if let을 사용할 수 있지만 조금 다른 표현을 써보기 위해 위의 코드를 작성해보았습니다. 위의 코드는 아래와 같이 1줄로 작성 가능합니다.

  return emoji[card.identifier] ?? "?"

  위의 두 코드는 정확히 같은 의미를 가지고 있습니다.

📂 딕셔너리에 emoji 추가하기

• 이제 딕셔너리에 emoji를 추가해보겠습니다. emoji를 요청받았을 때 emojiChoices에 있는 emoji 중에서 딕셔너리에 이모티콘이 필요할 때에만 랜덤하게 넣어주는 로직을 구현해보겠습니다. 여기서 랜덤한 구현을 위해 새로운 메소드를 사용해보겠습니다. arc4random_uniform는 pseudo random generator입니다. 0부터 upper_bound까지의 숫자 사이에서 임의의 숫자를 생성해줍니다. 마지막 상한은 포함하지 않습니다.

  func emoji(for card: Card) -> String {
          if emoji[card.identifier] == nil, emojiChoices.count > 0 {
              let randomIndex = Int(arc4random_uniform(UInt32(emojiChoices.count)))
              emoji[card.identifier] = emojiChoices.remove(at: randomIndex)
          }
          return emoji[card.identifier] ?? "?"
      }

  우선 arc4random 메소드는 파라미터로 Int가 아닌 UInt32 타입을 받습니다. emojiChoices.count는 반환값으로 Int값을 주기 때문에 에러가 발생합니다. 다행히 UInt32는 struct이고 initialzer에 Int값을 파라미터로 받는 구현이 되어있어서 위와 같이 구현합니다. 하지만 랜덤으로 생성된 값 역시 UInt32이고 우리가 필요한 randomIndex는 Array의 index로 사용해야하므로 Int가 필요합니다. Int 역시 initializer에 UInt32를 파라미터로 받는 구현이 되어있어 마찬가지로 Int를 앞에 붙여 형변환이 가능합니다.

  emoji[card.identifier] = emojiChoices.remove(at: randomIndex)

  만약 emoji[card.identifier] = emojiChoices[randomIndex]로 구현한다면 무엇이 문제일까요? 이미 사용된 이모지가 계속해서 나올 수 있습니다. 그래서 꺼낼때마다 꺼내진 이모지는 후보군에서 제외되는 로직이 필요합니다. remove 메소드는 해당 인덱스의 요소를 제거하는 동시에 그 값을 반환하므로 위와 같이 정의가 가능합니다.

  if emoji[card.identifier] == nil, emojiChoices.count > 0 {

  이제 문제는 더이상 꺼내올 수 있는 후보군이 없을 때 입니다. arc4random 함수는 위에서 언급한대로 0에서 upperbound-1까지의 숫자 중에 랜덤하게 하나를 꺼내오는 Unsigned Int 값입니다. 그래서 0 이하의 값은 나올 수 없습니다. upperbound는 양수여야 합니다. 여기서 조건을 줄 때 if 문을 두개 작성해도 되지만 위에처럼 심플하게 comma(,)로 분리 가능합니다. comma는 and 로직의 역할을 수행합니다.

🕹 Concentration game 로직 작성하기

• 2강의 마지막 로직을 작성해보겠습니다. 마지막 로직은 게임에 관련된 것으로 Model에서만 작동하면 되기 때문에 Concentration의 chooseCard에 작성해보도록 하겠습니다.

  var indexOfOneAndOnlyFaceUpCard: Int?
  
  func chooseCard(at index: Int) {
          if !cards[index].isMatched {
              if let matchIndex = indexOfOneAndOnlyFaceUpCard, matchIndex != index {
                  if cards[matchIndex].identifier == cards[index].identifier {
                      cards[matchIndex].isMatched = true
                      cards[index].isMatched = true
                  }
                  cards[index].isFaceUp = true
                  indexOfOneAndOnlyFaceUpCard = nil
              } else {
                  // either no cards or 2 cards are face up
                  for flipDownIndex in cards.indices {
                      cards[flipDownIndex].isFaceUp = false
                  }
                  cards[index].isFaceUp = true
                  indexOfOneAndOnlyFaceUpCard = index
              }
          }
      }

  indexOfOneAndOnlyFaceUpCard는 유일하게 뒤집힌 카드의 인덱스인지 여부를 알려주는 프로퍼티입니다. 로직을 살펴보면 우선 cards[index].isMatched인 else 구문의 로직을 보겠습니다.

  if !cards[index].isMatched {
    if let matchIndex = indexOfOneAndOnlyFaceUpCard, matchIndex != index {
      if cards[matchIndex].identifier == cards[index].identifier {
        cards[matchIndex].isMatched = true
        cards[index].isMatched = true
      }
      cards[index].isFaceUp = true
      indexOfOneAndOnlyFaceUpCard = nil

  모든 조건은 매치가 되지 않은 경우만을 생각하기 때문에 메소드 전체를 if ! 으로 감싸게됩니다. 매치되지 않았다의 의미는 이미 짝이 완성된 카드가 아닐 때의 조건입니다. 그 안에 if let의 조건문은 이미 한장의 카드가 뒤집혀 있고, 이미 뒤집혀있는 카드를 클릭한 것이 아닌 새로운 카드를 클릭했을 때 작동합니다.

  이미 뒤집혀있는 한장의 카드가 새롭게 고른 카드와 같은 이모지(식별자)라면 두 카드의 isMatched는 true로 바꾸어주어야 합니다. 그리고 고른 카드를 뒤집어준 후 뒤집힌 카드를 초기화 해줍니다.

  else {
    // either no cards or 2 cards are face up
    for flipDownIndex in cards.indices {
      cards[flipDownIndex].isFaceUp = false
    }
    cards[index].isFaceUp = true
    indexOfOneAndOnlyFaceUpCard = index
  }

  이 상황은 카드가 모두 뒤집혀있는 상태에서 처음으로 카드 하나를 오픈하는 상황이거나 이미 2장이 오픈되어 있는 상태에서 다음 액션으로 카드를 누른 상황입니다. 이렇게 되면 모든 카드를 다시 뒤집어주고 고른 카드만 다시 뒤집어주는 로직이 됩니다.

Reference: Stanford CS193p by Paul Hegarty