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

📱 [스탠포드] iOS 강의 학습하기 (CS193p by Paul Hegarty in Stanford)

• 스탠포드의 Paul Hegarty 교수님께서 진행하신 CS193p 강의를 통해 iOS에 대한 전반적인 기초를 알아보고자 합니다. 블로그에는 강의 단위로 업로드할 계획입니다. 단순히 강의 내용을 필기하는 블로깅이 아니라 추가적인 자료 조사나 다른 강의 내용에서 습득한 내용을 추가하는 형식의 블로그가 될 예정입니다.

🎯 Lecture.01 Introduction

• iOS에 대한 전반적인 설명과 사용법에 대한 간단한 설명을 진행합니다.
• 실습해본 git Repository

📝 Swift 언어의 특징

• Swift는 객체 지향 프로그래밍(Object Oriented Prograaming)이 가능하지만 함수 지향 프로그래밍(Function Oriented Programming), 프로토콜 지향 프로그래밍(Protocol Oriented Programming) 역시 가능합니다.

📝 iOS의 구조

• iOS는 크게 4가지의 구조로 되어있습니다.

  Cocoa Touch

  Media

  Core Services

  Core OS

  아래로 갈수록 시스템에 가깝고 위로 올라갈수록 사용자에 가깝습니다.

  1. Core OS:

     iOS의 Core OS는 BSD 계열 Unix를 기반으로 합니다. 그래서 그 속에 일어나는 모든 일들은 C언어를 기반으로 합니다.

     BSD Unix

  2. Core Services:

     이 층은 아래의 하위 서비스들의 최상위에 있는 객체 지향 층입니다.

     

     스마트폰의 현재 위치 방향을 찾고 시스템 파일에 접근하려고 할 때 이 Core Service를 사용합니다.

  3. Media:

     아이폰은 기본적으로 아이팟에 전화 기능을 넣은 것입니다. 그래서 Media를 다루는 계층이 존재합니다.

     

  4. Cocoa Touch:

     이 계층은 iOS의 UI 층(Layer) 입니다. 버튼과 슬라이더 같은 UI 요소들이 있습니다.

     

📝 Design Strategy

• 교수님의 기존 수업에서는 MVC(Model-View-Controller)를 기반으로 한 구조를 강의하셨습니다. 디자인 전략은 옵션이 아니라 반드시 지켜야하는 규정에 가깝습니다. 하지만 2020년 Spring 수업 기준으로 MVVM(Model-View-ViewModel)을 강의해주십니다. 수업에서 MVC를 "the old-style iOS development mechanism uses"(예전에 사용된 iOS 개발 스타일)로 규정하셔서 MVVM을 강의하시지만 학습자에 입장에서 iOS 생태계에서 사용되는 MVC와 MVVM을 모두 알고 싶어 두 내용 다 학습할 예정입니다.

🎴 짝 맞추기 게임 만들기(Making Concentration Game)

• 짝 맞추기 게임을 만들기 위해 프로젝트를 생성합니다.

  

  여러개의 파일이 있지만 여기서는 2개의 파일만 살펴봅니다. 예를 들어, Assets 폴더는 앱의 아이콘 이미지를 포함해서 아직 설정하지 않은 이미지들의 모음입니다. 그래서 아직 필요하지 않습니다. 마찬가지로 AppDelegate나 LaunchScreen 역시 필요하지 않습니다.

  그래서 필요없는 파일들을 블럭지정해 우클릭을 하면 아래와 같은 옵션이 나옵니다.

  

  빨간 박스의 옵션을 클릭하면 자동적으로 하나의 Folder안에 묶어주고 그 이름을 Supporting Files로 지정했습니다.

• Main.storyboard에 들어가면 직접 화면을 그릴 수 있고, 그린 결과물을 확인 할 수 있습니다. 잘 몰랐던 부분은 아래의 Appearance 였습니다.

  

  Device: 결과를 출력할 기기의 종류(e.g. iPad Pro, iPhone 12 etc)

  Appearance: Dark/Light Mode에서 결과물 출력

  Orientation: 가로/세로 모드

  다크모드가 나오기 전(iOS 13 이전)에는 해당 선택지가 아예 없었고 처음 나왔을 때에도 Xcode에서 Interface Style로 표기하였습니다.

• 스토리보드에 Button을 추가해보겠습니다.

  

  Button의 색깔을 바꾸는 등 Button의 특성을 변경하기 위해서는 Utility's Pane에서 설정을 변경합니다. 속성 변경을 위한 UI인 Utility's Pane은 객체 지향적으로 구현 되어있습니다.

  아래 파란색 박스에는 Control Pane이 보이는데, 버튼은 Control을 상속받기 때문에 Control Pane이 존재합니다.

  여기에 더해 Control Pane 아래에는 View Pane이 존재합니다.

  

  Control은 View를 상속받기 때문에 Button에 View UI가 나타납니다. 이를 구조적으로 보면

  class Button: Control
  class Control: View

  로 표현 가능합니다.

• 구현이 완료된 이미지에 동작을 설정해주기 위해서는 Swift의 코드와 연결해야합니다. 이를 위해 ViewController 파일을 열어보겠습니다.

  

  기본적으로 세팅되어있는 코드는 이번 프로젝트에서 필요가 없으므로 삭제했습니다.

  • UIKit: Button, Slider 등 UI와 관련된 소스들이 있는 iOS 프레임워크입니다.
  • ViewController: 이 클래스의 이름을 변경하려면 여기만 변경하는 것이 아니라 UI에 있는 요소들의 이름도 변경해주어야 하기 때문에 바꾸지 않는 것을 추천합니다. 또한 이 클래스는 UIViewController를 상속받는 subclass입니다.

• storyboard에서 요소를 클릭한 후 control을 누른 상태로 코드에 가져가면 바로 연결되는 코드를 생성할 수 있습니다.

• Swift가 다른 언어들과 다른 특징

  1. 모든 인수에 이름이 있습니다(every argument has a name). 메소드를 부를 때 이 이름을 포함해야 합니다.
  2. 인수들이 2개의 이름을 갖습니다. 하나는 호출시 사용하는 외부(external) 이름이고, 하나는 로직 내부에서 구현에 사용할 내부(internal) 이름입니다.

• 연결이 되었는지 확인해보기 위해 코드 안에 콘솔에 출력이 될 메세지를 넣습니다.

  

  UIButton인 오른쪽의 버튼을 클릭하면 함수 touchCard의 parameter로 그 입력이 들어가게되고 함수를 실행시켜줍니다. 이제 콘솔의 출력문을 지우고 카드를 뒤집어줄 함수를 만들어보겠습니다.

• 함수를 만들 때, 네이밍에서 가장 중요한 것은 "영어처럼 읽히는 것" 입니다. flipCard라는 함수를 만들어보았습니다.

  

  함수 flipCard의 내부에서 사용되는 변수 명은 emoji와 button이고, 이 함수를 호출할 때 입력 파라미터의 이름으로 사용되는 것은 withEmoji, on 입니다. 이를 통해 flipCard withEmoji "ghost" on sender라는 영어문장으로 읽힐 수 있는 코드 네이밍이 완성 되었습니다. 다만 touchCard의 파라미터는 sender 앞에 under bar(_)가 붙어있는 것을 볼 수 있는데 이는 외부 이름을 사용하지 않는 것입니다. Swift에서는 이렇게 변수명을 생략해주는 경우는 흔치 않은데, 그 이유는 이러한 로직이 Objective-C에서 왔기 때문입니다. 이 함수는 iOS에서 메세지를 보내는 것인데 이것은 Objective-C에서 왔고 Objective-C는 내부/외부 이름의 개념이 존재하지 않기 때문입니다. flipCard 메소드를 작성해보겠습니다.

  

  첫번째 조건절은 버튼의 현재 타이틀이 파라미터의 값이라면 버튼을 비어있게 만들어줍니다. 이 때, setTitle 안에 for의 값으로 넣어주는 UIControl이 지금은 UIControl.State.normal이지만 예전 기준으로는 UIControlState.normal이었습니다. 아마 State를 프로퍼티 등으로 다시 선언해주는 구조로 바뀐 것 같습니다. 밑의 else 구문은 반대로 현재 버튼이 해당 이모지가 아닐 때 이모지로 바꿔주는 역할을 합니다. 배경 색깔을 바꿀 때 오른쪽에 보이는 색깔 박스는 Color Literal로 바로 색깔을 지정해 줄 수 있습니다.

  이제 추가적으로 다른 그림의 카드를 만들어 보겠습니다.

  

  호박 그림을 복사 붙여넣기로 추가한 후, touchSecondCard라는 메소드를 생성했습니다. 유령 그림은 여전히 잘 작동하지만 호박 그림은 제대로 동작하지 않습니다. 왜그런지 살펴보기 위해, 22번째줄에 print구문을 넣어 emoji를 출력해보았습니다. 이 때 호박 카드를 누르면 호박 이모지는 잘 출력이 되지만 거기에 더해 누른적 없는 유령 이모지도 같이 출력되는 결과를 볼 수 있습니다. 아래는 호박 카드를 2번 눌렀을 때 출력입니다.

  

  이런 문제가 발생한 이유는 호박 카드를 생성할 때 유령 카드를 복사해서 붙여넣었기 때문입니다. 유령을 복사할 때 저 메세지를 보낸다는 사실 역시 복사된 것입니다. 이럴 때 사용하는 방법이 마우스 우클릭입니다. 호박 그림에 마우스 우클릭을 하면 아래와 같이 나타납니다.

  

  Touch Up Inside를 보면 두 메소드 모두 연결되어 있는 것을 볼 수 있습니다. 이것을 x버튼으로 touchCard만 삭제하면 정상적으로 touchSecondCard만 작동할 수 있습니다.

  
  

  • 다음으로는 카드를 몇번 뒤집었는지 숫자를 카운트하는 기능을 만들어보겠습니다. 카드 뒤집기 게임은 카드를 적게 뒤집을 수록 높은 점수를 받는 게임입니다. 숫자를 카운트하기 위해 인스턴스 변수를 생성하도록 하겠습니다.

    

    변수를 생성한 뒤, 이를 화면에 보여줄 Label을 만들고 아까와 같이 컨트롤 키로 연결합니다. 이 때 위에서 메소드가 필요해서 Action으로 연결해준 것과 다르게 Outlet이라는 기능으로 연결하는데, 아울렛은 인스턴스 변수를 만듭니다.

    

    Swift에서는 느낌표(!)가 붙으면 side effect가 있는데 초기화할 필요가 없다는 것입니다. 위에 flipCount는 0으로 초기화 하지 않으면 init Error가 발생하지만 flipCountLabel은 오류가 발생하지 않습니다. 이제 flipCount가 바뀔때마다 flipCountLabel이 출력하는 값을 바꾸는 기능을 만들어야합니다.

    

    위의 구현은 정상적으로 잘 작동합니다. 하지만 저런식으로 구현하게되면 각 메소드마다 같은 구문을 반복해서 넣어주어야 합니다. 혹은 flipCount에 변화를 주거나 text에 들어갈 메세지를 변경하는 refactoring이 있다면 모든 메소드에 접근해야합니다. 이 때 사용하는 것이 didSet 기능입니다. 이러한 didSet을 Property Observer라고 합니다.

    

    • Swift는 강한 타입 추론 기능을 가지고 있기 때문에 값이 확실하다면 타입을 명시해주지 않는 수준이 아니라 쓰지 말아야 합니다.

    • 코드를 복사해서 붙여넣는다는 것은 뭔가를 잘못하고 있다는 뜻입니다.. 이럴 경우 fix할 필요가 있습니다!

    이제 기능은 완벽하게 작동합니다. 하지만 이런 구조로 모든 카드를 생성한다면 카드가 생길때마다 비슷한 형식의 메소드가 계속 늘어납니다. 그래서 하나의 메소드에 모든 카드를 연결할 수 있는 구조가 필요합니다.

    위의 함수에서 유일하게 변하는 부분은 flipCard 메소드를 호출 할 때 withEmoji에 들어가는 String 값이고 이를 한번에 관리하기 위해 Array를 사용합니다. Array에 모든 이모지를 넣어 놓고 관리하면 Data-Driven 구조로 작성할 수 있습니다. 다시 한번 카드를 코드와 연결해보겠습니다.

    

    이번에는 Outlet이 아닌 Outlet Collection을 사용합니다. Outlet Collection은 UI에 있는 것들의 배열입니다.

    

    강의에서는 cardButtons.index(of:)를 사용하시지만 이렇게 되면 오류 메세지가 뜹니다. firstIndex로 바꾸라는 메세지가 나와 변경했습니다.

    위의 그림에서 2개의 오류가 발생합니다. 위의 오류는 cardNumber가 변경되지 않으므로 let으로 바꾸라는 말입니다. 왜 다른 언어처럼 상수를 const로 표현하지 않을까요? 이것은 Swift에서 코드는 영어처럼 읽혀야 하기 때문입니다. const cardNumber는 영어로 읽히지 않습니다!

    모든 카드를 연결해주고 Array를 아래와 같이 생성해주면 정상 작동하게됩니다.

    

  하지만 위의 구조는 불안정한(fragile) 구조입니다. 이모티콘의 개수는 UI에 있는 버튼과 정확히 일치해야하고 똑같은 것을 두번씩 넣어주어야합니다. 이를 해결하기 위해 MVC 모델을 통해 이 구조를 발전시킬 필요가 있습니다.

Reference: [Stanford CS193p by Paul Hegarty](