티스토리 뷰

프로그래밍/스탠포드 iOS 11

[CHAPTER 1] iOS 11, Xcode 9와 Swift 4 소개(2)

NerverEnough 2021. 12. 26. 21:14

파일들 한 폴더에 넣기

여러개의 파일을 선택 한 뒤 하나의 폴더에 한번에 넣는 방법입니다.

파일들을 선택 한 뒤 우클릭 - New Group from Selection을 선택합시다

 

새로 생선된 폴더의 이름을 지정해 주면 됩니다.

 

info 파일 경로 변경시

수업시 info 파일을 따로 두는 이유는 프로젝트 설정값이 변경해야해서 빼둔것으로 보입니다.

만약 따로 두고 싶다면 아래와 같이 경로를 수정해줘야합니다.

Targets에서 Concentration을 선택한 뒤 Build Settings - Packaging - Info.plist 파일의 경로를 변경해줍시다

 

Supporting Files 폴더로 info.plist 파일을 이동한 경우 위와 같이 변경해주면 됩니다.

 

인터페이스 빌더에서 오브젝트 추가하기

인터페이스 빌더에서 버튼이나 라벨을 추가하는 방법입니다.

우측 상단의 + 버튼을 누르면 오브젝트 선택하는 창이 뜹니다. 또한 창에서 찾길 원하는 아이템을 검색할 수 있습니다. 원하는 아이템들이 없다면 초록색 영역이 선택되어 있는지 확인해봅시다

원하는 아이템을 선택한 뒤 드래그하여 원하는 영역에 추가하면 됩니다.

 

버튼 배경 색상 변경하기

버튼의 배경 색상을 변경하는 방법입니다.

버튼 선택 - 속석 인스펙터 선택 - 백그라운드 속성 누른 뒤 색상 변경하기
속성 인스펙터의 맨 위를 보면 어떤 객체 타입인지 확인이 가능합니다.(ex. 버튼 선택했을시)

 

버튼 폰트 속성 변경하기

버튼의 폰트 속성을 변경하는 방법입니다.

  1. 속성 인스펙터를 선택합니다.
  2. 스타일값을 디폴트로 변경합니다.(Plain인 경우)
  3. T 버튼을 누릅니다.
  4. 사이즈 값을 원하는 값으로 변경 후 Done 버튼을 눌러줍니다.

 

ViewController.swift 기본 설명

프로젝트 생성 후 기본적으로 생성된 ViewController.swift 파일을 확인시 아래와 같이 입력되어 있습니다.

import UIKit

class ViewController: UIViewController {

    
}
  1. import  UIKit : iOS 프레임워크(버튼, 슬라이드, 라벨등이 구현되어 있음)을 사용 / UIViewController 사용을 위해 추가
  2. class : 클래스 선언 키워드
  3. ViewController : 사용할 클래스 이름
  4. UIViewController: 슈퍼 클래스(이 클래스가 상속 받는 클래스)

위 코드는 프레임 워크 포함문 + 클래스 선언문이라 보면 됩니다.

import 프레임워크명

class 클래스 이름: 슈퍼 클래스 {

    
}

 

 

버튼 눌렀을때 이벤트 추가하기

버튼을 눌렀을때 호출할 함수와 연결하는 과정입니다.

    1. 뷰 컨트롤러의 View나, 버튼을 선택해줍니다.
    2. Adjust Editor Options 버튼을 눌러줍니다
    3. Assistant 메뉴를 눌러줍니다. ( 우측에 나와있는 단축키를 눌러줘도 됩니다. )
    4. 두화면을 한번에 확인 할 수 있습니다.
    5. 두 화면이 동시에 필요한 이유는 버튼을 눌러 코드로 드래그를 해야하기 때문입니다.
    6. Ctrl 누른채로 버튼을 누르고 코드 내로 드래그하여 줄괄호안에 두고 놓습니다.( 우클릭 후 드래그해도 됩니다. )
    7. Conntection(Action), Name(touchCard), Type(UIButton), Event(Touch Up Inside)로 지정한 뒤 Connect를 눌러줍시다.
      Conntection Action Event 수행시 수행할 함수 생성
        Outlet 인스턴스 변수 생성
        Outlet Collection 콜렉션 변수에 연결(배열이나 딕셔너리에 추가)
      Type Any 비추천( 사용시 캐스트 해야함 )
        UIButton(원래타입) 추천
      Event Touch Up Inside 버튼 내부에서 Up이 된 경우
        여러가지가 있음  
      Argument None 함수에 파라미터 없음
        Sender Sende(UIButton)를 파라미터로 받음
        Sender And Event Sender(UIButton) 및 이벤트(UIEvent)을 파라미터로 받음

Connect 버튼을 누르면 코드가 추가되는것을 알 수 있습니다.

@IBAction은 Swift가 아닌 Xcode에서 추가한 지시문입니다.

 

함수 선언 및 구조

함수 선언 구조는 아래와 같습니다.

func 함수명(파라미터1 외부이름 파라미터1 내부이름: 파라미터1 타입, ...) -> 리턴타입 {

}

버튼 동작을 위해 추가된 함수를 예를 들어보겠습니다.

@IBAction func touchCard(_ sender: UIButton) {
        
}
  • @IBAction : swift 문법이 아닌 XCode 키워드입니다. UI와 연결을 위해 추가한 키워드입니다.
  • func : 함수 선언을 키워드입니다. 함수 선언시 사용해줍니다.
  • touchCard : 함수 이름입니다. 원하는 이름으로 해주면 됩니다.
  • (_ sender: UIButton) : 파라미터 정보입니다. 현재 1개의 파라미터가 사용됩니다.
    • _ : 외부에서 함수 호출시 사용되는 이름입니다. _인 경우에는 사용을 생략한다는 키워드입니다.
      • 위 함수를 사용하기 위해서는 touchUp(tmpButton)과 같이 호출을 하면 됩니다.
      • _가 아닌 (at sender: UIButton)이라면 touchUp(at:tmpButton) 으로 호출해줘야 합니다.
    • sender : 함수 내부에서 사용할 파라미터 이름입니다.
    • UIButton: 첫번째 파라미터의 타입입니다.

 

Print 함수

콘솔창에 문자열 출력시 사용하는 전역함수입니다.

1번 버튼이 활성화 되어야 2번 화면이 나오게 됩니다. print 함수 사용전 확인해 둡시다.

아래와 같이 함수를 수정합니다.

@IBAction func touchCard(_ sender: UIButton) {
	print("agh! a ghost!")
}

print 함수 내부에 출력하고자하는 문자를 입력하면 됩니다.( 큰따옴표 안에 문자열 입력 )

앱을 실행 후 버튼을 누르면 문자열을 출력되는것을 확인할 수 있습니다.

 

특정 조건에서 콘솔창 표시하는 방법

 

코드를 작성하거나 UI 편집시 콘솔창을 가리고 하는게 편집이 더 수월합니다. 평소에는 콘솔창을 숨겨놓다가 필요한 상황이 있다면 그때 자동으로 표시해주는 방법입니다.

예시는 콘솔창에 문자열이 출력되는 경우에 변수 및 콘솔창을 표시하는 방법입니다.( 버튼을 눌러 agh! a ghost! 가 출력 될 경우 )

XCode - Behaviors - Edit Behaviors를 선택합니다.

Running의 Geerates output을 선택합니다.

Show debugger with Variables & Console View로 맞춰주면 됩니다.

 

함수 선언시 참고사항

어떻게 함수 이름을 지어야 좋은 이름인지 알아봅시다.

함수 호출시 영어 문장처럼 읽어진다면 좋은 함수명이라 보면 됩니다.

func flipCard(withEmoji emoji: String, on button: UIButton) {
        
}

다른 언어로도 입력이 되지만 영어로 함수이름과 파라미터명을 지정해주게 됩니다.

위 함수를 외부에서 호출하는 경우을 확인해봅시다.

@IBAction func touchCard(_ sender: UIButton) {
        flipCard(withEmoji: "👻", on: sender)
}

함수 호출시 flipCard withEmoji ghost on sender 식으로 읽어집니다.

영어처럼 읽혀진다는게 중요합니다.

자세한 함수 사용법은 링크 내용을 확인해봅시다.

https://jusung.gitbook.io/the-swift-language-guide/language-guide/06-functions

 

UIButton 활용

버튼의 현재 텍스트 가져오는 방법

open var currentTitle: String? { get } // normal/highlighted/selected/disabled. can return nil

버튼의 .currentTitle을 사용하면 됩니다. 옵셔널 변수이므로 nil 확인 후 사용합시다.

예시)

func flipCard(withEmoji emoji: String, on button: UIButton) {
    if button.currentTitle == emoji {
    	// 버튼 텍스트와 같은 경우
    }
}

 

버튼의 현재 텍스트 변경하는 방법

open func setTitle(_ title: String?, for state: UIControl.State)

setTitle 함수를 사용하면 됩니다.

첫번째 파라미터는 변경할 문자열입니다.

두번째는 상태값인데 종류는 아래와 같은 값들이 있습니다.

 public struct State : OptionSet {

        public static var normal: UIControl.State { get }

        public static var highlighted: UIControl.State { get } // used when UIControl isHighlighted is set

        public static var disabled: UIControl.State { get }

        public static var selected: UIControl.State { get } // flag usable by app (see below)

        @available(iOS 9.0, *)
        public static var focused: UIControl.State { get } // Applicable only when the screen supports focus

        public static var application: UIControl.State { get } // additional flags available for application use

        public static var reserved: UIControl.State { get } // flags reserved for internal framework use
}

주로 일반 상태인 normal 값을 사용합니다.

예)

func flipCard(withEmoji emoji: String, on button: UIButton) {
    if button.currentTitle == emoji {
        button.setTitle("", for: .normal)
    } else {
        button.setTitle(emoji, for: .normal)
    }
}

 

가이드 문서 보기

UIButton와 같이 기본 제공하는 클래스는 해당 설명을 확인 할 수 있습니다.

간략 설명보기

setTitle 함수에 대한 설명을 보고 싶으면 option 키를 누른채 setTitle을 클릭하면 아래와 같은 설명창에 나오게 됩니다.

UIButton의 setTitle 설명내용입니다.

Declartion의 UIConrtol.State를 선택하면 아래와 같은 문서 창을 확인 할 수 있습니다.

UIControl.State값에 대한 설명을 확인 할 수 있습니다.
문서 창 구성

메뉴로 진입하기

가이드 문서창을 확인하려면 Xcode 메뉴에서 Window - Developer Documentation 메뉴로 진입이 가능합니다.

메뉴 접근 방법입니다.

 

색상값 입력하기

버튼 배경색을 변경해보자

.backgroundColor의 값을 변경하면 배경색이 변경된다.

@property(nullable, nonatomic,copy) UIColor *backgroundColor

확인시 타입은 UIColor이다.

강의에서는 color를 입력할시 color Literal 리스트에서 나오고 있으나, 안나오는 경우도 있는것 같다.

Color Literal이 없다...

강제로 #colorLiteral를 입력한 뒤 ( 괄호를 입력시 색상을 입력할 수 있게 된다.

키워드 문자열이라 색상이 변경된다.
뒤에 "(" 를 입력하게 되면 위와 같이 변경된다.

이미지를 더블클릭하여 색상 선택창을 띄우도록 하자

원하는 색상을 선택하면 적용이 됩니다.

 

변수 내용 출력하기

일반 문자열을 콘솔창에 출력하기 위해서는 아래와 같이 입력을 했었습니다.

print("test")

위 코드가 실행되면 test가 콘솔창에 출력될건데 아래의 경우를 확인해 봅시다.

func flipCard(withEmoji emoji: String, on button: UIButton) {
    if button.currentTitle == emoji {
        button.setTitle("", for: .normal)
        button.backgroundColor = #colorLiteral(red: 1, green: 0.5763723254, blue: 0, alpha: 1)
    } else {
        button.setTitle(emoji, for: .normal)
        button.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    }
}

파라미터의 emoji를 출력하려면 어떻게 해야할까요

다른 언어(C나 Java)에서는 print("%s", emoji)와 같은 형식으로 출력합니다.

아래와 같이 입력한 경우 확인을 해보면

print("flipCard(withEmoji: %s", emoji)

%s가 그대로 출력되는 걸 확인 할 수 있습니다.

flipCard(withEmoji: %s) 👻

 

Swift에서는 변수를 간단히 \() 표기법을 통하여 출력할 수 있습니다.

문법 : "\(변수)" 

print("flipCard(withEmoji: \(emoji))")

출력 결과는 원하는 대로 %s 위치에 emoji 문자열인 👻 가 나옵니다

flipCard(withEmoji: 👻)

 

인터페이스 빌더와 코드내 함수가 잘못 연결된 경우

버튼과 코드내 함수가 잘못 연결 되어 있는 경우 수정하는 방법을 알아봅시다.

기존에 연결되어 있던 버튼을 복사하게 되는 경우 기존에 연결된 함수와 동일하게 연결되어 있습니다.

유렁 버튼을 복사 붙여 넣기 한 경우 아래와 같이 나타납니다.

touchCard 함수가 두 버튼에 모두 연결되어 있다

1번 위치의 원 아이콘에 마우스를 올려두면 어떤 아이템과 연결되어 있는지 확인이 가능합니다.

현재 두개의 카드가 연결되어 있다는 것을 알 수 있습니다.

 

일반적인 경우를 확인해봅시다. 

16번째줄의 동그라이 아이콘에 마우스를 올려두면 아래와 같이 나타납니다.

16번째 라인의 원 아이콘에 마우스를 올려둔 경우, 호박 버튼과 연결되어 있는걸 확인 할 수 있습니다.

 

그럼 두개가 연결되어 있는 고스트 버튼을 수정해봅시다.

방법 1. 호박 버튼을 우클릭한 뒤 연결을 해제해 준다.

우클릭 후 나타난 창에서 Sent Events- Touch Up Inside - View Controller(touchCard) 앞에 있는 x를 눌러 제거합니다.

화면이 작게 나온다면 우측 아래의 삼각형 모양 기호를 (클릭+드래그)하여 창을 키워줍시다.

 

방법2. 뷰 컨트롤러의 연결 인스펙터에서 해제합니다.

Document Outlet의 View Controller(1)를 선택 후 Connection Inspect 탭(2)을 선택 후 아래에 존재하는 touchCard:에서 호박 버튼을 제거해줍시다.

뷰 컨트롤러의 Connection 정보를 확인하는 다른 방법

빨간색으로 표시된 아이콘을 우클릭하여도 연결된 함수 해제가 가능합니다.

 

클래스 내에 변수 추가하기

클래스 내부에 변수를 추가해봅시다.

강의에서는 카드 뒤집은 회수를 기록하기 위한 숫자형 변수를 추가하기로 합니다.

강의 중 인스턴스 변수를 프로퍼티라 부르니 기억해 둡시다.( 인스턴스 변수 = 프로퍼티 )

class ViewController: UIViewController {

    var flipCount: Int
    
}

위와 같이 flipCount 프로퍼티를 추가하였으나 바로 에러가 발생합니다.

에러내용은 Initailizer가 없다고 합니다. 스크롤바를 보면 에러가 발생한 위치에 빨간색으로 표시해주며 코드가 많아질 경우 쉽게 찾을 수 있게 해줍니다.
이슈 네비게이터에서 세부 에러 내용을 확인 할 수도 있습니다.

세부 내용을 보면 flipCount 프로퍼티가 초기화하는 부분이 없어서 그렇다고 합니다.

 

Initailizer란 특별한 이름을 가진 함수입니다. 이름을 줄여 init라 합니다. 다양한 인수를 가질 수 있습니다.

각 init 함수는 모든 멤버 변수를 초기화해줘야합니다.

 

하지만 수업에서는 클래스에 init 함수를 넣는 건 복잡(상속을 고려해야하기 때문)하기 때문에 간단하게 초기화하는 방법을 사용합니다.

 

초기화 하는 방법을 알아봅시다.

 var flipCount: Int = 0

그냥 단순히  = 0 을 뒤에 추가해줍니다.

그럼 실행시 0으로 초기화되며 에러가 사라집니다.

대부분의 인스턴스 변수들은 이렇게 초기화 할 수 있습니다.

 

강한 타입 추론

Swift는 강타입의 언어입니다.

즉 변수에 항상 타입을 지정해줘야합니다.

ex) Int, Doule 변수 연산시 두타입을 Int로 바꾸거나 Double로 바뀐 두 연산을 진행해야합니다.( 약타입은 double로 변경 후 연산을 지원해줍니다.)

 

하지만 스위프트는 강한 타입 추론을 가집니다.

값을 통하여 타입을 추론할 수 있습니다.

아래 예를 확인해 봅시다.

 var flipCount: Int = 0

Int 타입을 지정해주고 있습니다. 하지만 0이라는 값을 통하여 Int 타입을 알 수 있기 때문에 이를 생략할 수 있습니다.

 var flipCount = 0

위와 같은 코드로 변경할 수 있습니다.

정말 Int 타입인지 확인하는 방법은 option키를 누르고 변수(flipCount)를 클릭하면 아래와 같은 창이 뜹니다.

Declaration을 보면 Int타입이라는 것을 알 수 있습니다.

 

Swift에서 소수점이 없는 경우에는 Int, 있는 경우에는 Doule, 문자열은 String 타입으로 지정됩니다.

일반적으로 타입을 직접 입력하는 경우는 함수의 파라미터를 입력하는 경우이며, 타입을 직접 쓰는 경우는 드뭅니다.

 

인터페이스 빌더의 Label과 코드내 변수와 연결하기

넘긴 회수를 표시하기 위해 추가한 Label을 뷰 컨트롤러의 변수와 연결해봅시다.

Label을 누르고 Assistant 창을 띄웁시다.

 

인스펙터와 코드 편집기창을 동시에 띄우둡니다.

Ctrl 키를 누르고 Label을 클릭+드래그하여 코드내로 넣습니다.( 예. FlipCount 변수 아래 )

Connect : Outlet /  Name: flipCountLabel /  Type: UILabel /  Storage: Weak

추가가 완료되면 아래 코드가 삽입된다.

@IBOutlet weak var flipCountLabel: UILabel!

UILabel 끝에 !가 있는데 이 내용은 다음 강의 내용에 나오는 내용입니다.

! 사용시에는 초기화를 하지 않아도 된다는 점이 있습니다. 그래서 빌드시 에러가 발생하지 않습니다.

 

Label 텍스트 갱신하기

카드 선택시 Label의 Count를 1씩 증가시키는 방법을 알아봅시다.

간단히 카드 선택시 Label의 text값을 변경시켜주면 됩니다.

@IBAction func touchCard(_ sender: UIButton) {
    flipCount += 1
    flipCountLabel.text = "Flips: \(flipCount)"
    flipCard(withEmoji: "👻", on: sender)
}
    
@IBAction func touchSecondCard(_ sender: UIButton) {
    flipCount += 1
    flipCountLabel.text = "Flips: \(flipCount)"
    flipCard(withEmoji: "🎃", on: sender)
}

갱신이 필요한 곳에 flipCountLabel.text = "Flips: \(flipCount)" 코드를 넣어줬습니다.

이렇게 해도 잘 동작합니다만...

버튼 하나를 추가하게 될 경우 동일한 flipCount 관련 코드를  중복해서 넣어야합니다.

 

Int로 선언된 flipCount 값 변수가 변경될 때마다 Label의 텍스트 값을 바꾸게 하는 방법을 알아봅시다.

DidSet이라는 키워드를 사용합니다.

코드를 확인해 봅시다.

var flipCount = 0 {
    didSet {
        // 값이 Set 될 때마다 호출되는 영역
    }
}

 

변수 선언문 뒤 중괄호를 넣어 안에 didSet 키워드를 넣어줬습니다.

didSet 이후의 중괄호 내부는 flipCount값이 변경 될때마다 호출되는 부분입니다.

수정을 하면 아래와 같이 수정이 가능합니다.

var flipCount = 0 {
     didSet {
     	flipCountLabel.text = "Flips: \(flipCount)"
     }
}
    
@IBOutlet weak var flipCountLabel: UILabel!
    
@IBAction func touchCard(_ sender: UIButton) {
    flipCount += 1
    flipCard(withEmoji: "👻", on: sender)
}
    
@IBAction func touchSecondCard(_ sender: UIButton) {
    flipCount += 1
    flipCard(withEmoji: "🎃", on: sender)
}

Label을 변경하는 코드가 didset에서만 처리되도록 수정되었습니다.

 

저작자표시 비영리 동일조건

'프로그래밍 > 스탠포드 iOS 11' 카테고리의 다른 글

[CHAPTER 2] MVC(Model-View-Controller) 패턴 (2)  (0) 2021.12.27
[CHAPTER 2] MVC(Model-View-Controller) 패턴  (0) 2021.12.27
[CHAPTER 1] iOS 11, Xcode 9와 Swift 4 소개(3)  (0) 2021.12.26
[CHAPTER 1] iOS 11, Xcode 9와 Swift 4 소개  (0) 2021.12.25
스탠포드 iOS 11 강의 동영상 및 자료  (0) 2021.12.24
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함