[TIL] 22-10-13: Xcode 실습(Obj-C, Swift)

2022. 10. 22. 17:14, 외부활동/멋사 앱스쿨 1기

22-10-13 목요일
5주차

📌 Xcode를 켜보자.

Live Demo 위주로 진행될 예정이다.

오늘의 목표

1. Obj-C로 개발해보기 (macOS)

2. Swift로 개발해보기 (macOS, iOS)

들어가기 전에...

✔️ NeXT vs Sun

https://www.youtube.com/watch?v=UGhfB-NICzg

당시 NeXT(스티브잡스가 애플을 나가고 만든 회사) 직원과 Sun 회사 직원이 같은 앱을 만드는 과정을 찍은 영상이다. NeXT사는 인터페이스 빌더를 이용하여 빨리 개발을 한다는 결과다. 당시 요소들(슬라이더 같은거)을 끌어서 화면에 바로 놓는 것 자체가 혁신이었다고 한다. 굉장히 예전이지만, 오늘 진행할 Storyboard를 하기전에 볼만한 영상이다. Storyboard도 이런 과정이 있었기에 나온 것이기도 하니까.

✔️ Steve Jobs Live Demo

https://www.youtube.com/watch?v=QhhFQ-3w5tE

스티브잡스 라이브 코딩 본적 있으신 분~! 일단 나는 없다...

위 영상은 NeXT가 애플에 인수되고 나서? (그 즈음인 것 같다. 확실치 않음 기억안남) 아무튼 그때 스티브잡스가 직접 인터페이스 빌더로 코딩하는 장면이다. 코드를 이용하는 전형적인 라이브 코딩은 아니지만 볼만하다. 지금은 Xcode에 인터페이스 빌더, 뭐 코드 치는 곳 같이 있지만 당시에는 둘 다 다른 프로그램이었다고 한다. 지금의 Storyboard도 XIB를 여러개 다룰 수 있는 개발 방법이다.

오늘는 내가 Xcode 요리사. Xcode 한번 켜보십쇼.

🙊 macOS 앱 개발해보기

iOS 이전에 macOS가 있었다! (지금도 있지만)

한번 macOS 프로젝트를 만들어보자.

✔️ Objective-C로 앱 개발해보기

에엥 무슨 objc에요~~ 하겠지만 결국 '근본'을 해봐야 왜 지금의 SwiftUI가 혁신인지 알 수 있을 것이다.

각설하고, objc로는 어떻게 앱 개발을 했는지 확인해보자.

NeXT의 유산, XIB를 사용해보자!

1️⃣ 기본 프로젝트 생성

macOS 앱을 만들어보자.

1. Xcode -> New Project

new Project name : HelloMacOS
team : None (선택안함)
organization id : com.codeline
interface : xib
language : objc

2. Create!

맨 윗줄 : Tool Bar
- 실행버튼
- 네비게이션 껏다켰다
왼쪽 : 네비게이터
- 네비게이터 → 실제 폴더 내용이랑 ‘같지않다’
- 소스컨트롤 → git 관리
- 심볼 → 변수,인스턴스 등등을 요약해서 보여줌
- 검색 → 검색하고 일괄 변경도 가능
- 실행 오류
- 테스트
- 디버그 세션 → 버그를 퇴치한다!
- breakpoint
- 로그
오른쪽 : Inspector

3. 실행버튼을 눌러보자.

와! 실행에 성공했다.

여차저차 나만의 앱 완성.

2️⃣ 스티브 잡스가 되어보자: Button Action

앞에 만들었던 프로젝트에 버튼을 추가해볼 것이다.

1. 파일 살펴보기

AppDelegate.m
MainMenu
- 맥용 앱이라서 메뉴바에 대해서 편집할 수 있다.
main.m

2. MainMenu → HelloMacOS

와! 방금 실행했던 화면이 보인다!

3. 버튼 컴포넌트 추가하기

툴바의 우측에 + 버튼을 눌러본다.
Button 요소를 끌고와서 창 한가운데 나둬보자.

4. 버튼 누르면 NSLog로 “Hello World” 출력하기

MainMenu에서 옵션으로 어시스턴스 설정해주면 화면 분할이 되면서 관련 코드가 보인다. 없으면 직접 설정 가능하다.
- Automatic → 직접 파일 고르기
AppDelegate.m
저 동그라미 버튼은 뭐지?

왼쪽 화면이 파랗게 된걸 보면 알 수 있다. 연결되어 있음을 알 수 있당.

왼쪽 버튼을 마우스 우측버튼을 눌러서 쭉 끌어당겨서 코드 상에 놔둬보자 (property 아래)

쟈쟌! 위와 같이 나온다.

이제 버튼이 눌리면 저 메소드가 실행된다. (action 값)
interface 부분에 메소드를 만들었으니, implementation에 해당 메소드를 구현해보자.
맨 아래쪽 pressButton 코드가 있다.

실행해보면?
버튼을 누르면 콘솔창에 Hello World가 잘 출력된다. ^-^)6

5. 버튼 누르면 앱 화면의 텍스트로 “Hello World” 나오게 하기

버튼 이름은 sayHello로 바꿨다 (선택사항)
Label 요소 추가하기
기본 텍스트를 wait… 으로 바꿨다. 이건 label 클릭하고 오른쪽 인스펙터에서 바꿀 수 있다!

Label 내부의 NSTextFieldCell을 끌어서 Property로 추가하기

pressButton 메소드에서 NSTextFieldCell 대한 코드 작성하기

확인해보자!
잘된다.

6. 음성합성기 써보기

예전에 매킨토시 발표할 때 TTS를 쓴 적이 있었다. 아래의 클래스를 사용하면 된다.
NSSpeechSynthesizer

3️⃣ 텍스트를 입력받아 보자: TextField

1. Textfield 넣기

2. IBOutlet 만들기

요소를 코드 창으로 끌고와서 IBOutlet을 만들자. 프로퍼티 생성!

3. Button을 누르면 Textfield의 값을 Label에 출력하도록 코드 작성

4. NSSpeechSynthesizer 를 사용하여 입력값을 음성으로 출력하도록 하기

✔️ Swift로 만들어보자

지금까지 했던 과정을 Swift로 진행해보자.

1. 프로젝트 만들기

Language를 Swift로 해줘야 한다.

2. Objective-C로 만들었던 과정대로 진행해보자.

1️⃣ Label 텍스트를 입력 값으로 대치하기
2️⃣ 음성으로 입력 값 읽어주기

컴포넌트(TextField, Button, Label) 추가하기

컴포넌트들을 코드로 연결하기
- IBOutlet(labelCell, textfieldCell), IBAction(button)

button 메소드에 코드 작성하기

@IBAction func pressSayHello(_ sender: Any) {
	// (1) Label 텍스트를 입력 값으로 대치하기
	let string = myTextFieldCell.title
	print("\\(string)")
	myLabelCell.title = string
  
	// (2) 음성으로 입력 값 읽어주기 (TTS)
	let synthesizer: NSSpeechSynthesizer = NSSpeechSynthesizer()
	synthesizer.startSpeaking(string)
}

전체 코드

import Cocoa
// macOS 사용하는 UI 처리 프레임워크 (iOS - UIKit, cocoatouch)

@main
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet var window: NSWindow!

		// 추가한 프로퍼티
    @IBOutlet weak var myTextFieldCell: NSTextFieldCell!
    @IBOutlet weak var myLabelCell: NSTextFieldCell!
    
		// 추가한 메서드
    @IBAction func pressSayHello(_ sender: Any) {
        let string = myTextFieldCell.title
        print("\\(string)")
        myLabelCell.title = string
        
        let synthesizer: NSSpeechSynthesizer = NSSpeechSynthesizer()
        synthesizer.startSpeaking(string)
    }
    
    func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Insert code here to initialize your application
    }

    func applicationWillTerminate(_ aNotification: Notification) {
        // Insert code here to tear down your application
    }

    func applicationSupportsSecureRestorableState(_ app: NSApplication) -> Bool {
        return true
    }

}

🙉 iOS 앱 개발해보기 (with Swift)

Swift로 간단하게 만들어보자잇~

✔️ macOS 앱에 적용한 기능을 똑같이 만들어보자.

1. 프로젝트 생성

iOS -> App으로 생성해주어야 한다!

2. Button, TextField, Label을 올려보자.

3. 전체 코드

import UIKit
import AVFoundation // iphone 상황에 맞게 새로 만든 foundtaion

class ViewController: UIViewController {

    @IBOutlet weak var myTextField: UITextField!
    @IBOutlet weak var myLabel: UILabel!
    // NSSpeechSynthesizer 없음! synthesizer를 뷰가 살아있는 동안 살려둬야함!
    let synthesizer: AVSpeechSynthesizer = AVSpeechSynthesizer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


    @IBAction func pressSayHello(_ sender: Any) {
        let myString: String = myTextField.text ?? "아무것도 안썼어용."
        print("\(myString)")
        
        myLabel.text = "Hello World"
        
        synthesizer.speak(AVSpeechUtterance(string: myString))
    }
}

✔️ 간단한 계산기를 만들어보자.

숫자를 입력받는 Textfield
Button을 누르면 Textfield의 값을 제곱으로 계산하고
Label에 결과 값을 보여준다.

import UIKit

class ViewController: UIViewController {
    var calcInsdier: CalcInsider = CalcInsider()
    
    @IBOutlet weak var myTextField: UITextField!
    @IBOutlet weak var myLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


    @IBAction func pressCalcButton(_ sender: Any) {
        let myString: String = myTextField.text ?? ""
        guard let myNumber: Int = Int(myString) else {
            let alert = UIAlertController(title: "입력된 값이 없습니다", message: "값을 작성해주세요.", preferredStyle: .alert)
            let action = UIAlertAction(title: "확인", style: .default)
            alert.addAction(action)
            self.present(alert, animated: true)
            
            return
        }
        
        calcInsdier.value = myNumber
        let myResultNumber = calcInsdier.result
        
        print("\(myResultNumber)")
        
        myLabel.text = "결과 \(myResultNumber)"
        
        calcInsdier.speackResult()
    }
}

Xcode로 실습하기! 이제 시작이다.

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

'외부활동 > 멋사 앱스쿨 1기' 카테고리의 다른 글

[TIL] 22-10-17: SwiftUI 시작하기 (0)	2022.10.24
[TIL] 22-10-14: Xcode 실습(UIKit으로 계산기 만들기), CSS (0)	2022.10.22
[TIL] 22-10-12: Objective-C (Protocol, ARC, binding) (0)	2022.10.16
[TIL] 22-10-11: Objective-C (struct, typedef, class, extension) (0)	2022.10.12
[TIL] 22-10-07: Objective-C, CocoaPods과 SPM 찍어먹기 (0)	2022.10.12

Comments, Trackbacks