07월 31일: 수업 내용 요약

오늘 한 일

1강 iOS 개요

[수업 목표]

• 애플 생태계에 대해서 알아보고, 애플 생태계의 구성을 이해합니다.
• iOS를 개발하는 방법들을 파악합니다.
• Xcode를 통해 iOS앱을 실행시켜봅니다.

>iOS 

objective-c, swift

IDE(통합개발환경) xcod

아이폰

 

ide https://aws.amazon.com/ko/what-is/ide/

 

>>개발 방법

native 애플리케이션 : 애플에서 제공하는 프레임워크, 라이브러리 사용

최적화 좋지만 swift 언어를 배워야 하고, 애플에서 제공하는 OS에서만 사용 가능함. 다른 플렛폼과는 호환성이 떨어짐

 

hybrid 애플리케이션 / crossPlatfrom 애플리케이션

flutter , dart 

react native 

 

>macOS

맥북, 아이백 

 

>iPadOS, watchOS, tvOS

 

>앱스토어

 

>apple developer program

https://developer.apple.com

Apple Developer

 

>xcode 실행하기

create a new xcode project

ios / app 

 

입력창

product name : 앱 이름으로 사용됨

team 

organization identifier : bundle identifier를 생성하는데 사용됨, 도멘인을 뒤집어서 사용하는 것이 일반적

bundle identifier : 앱이 가지는 식별자 product name + organization identifier 사용

interface : 스토리보드 , swfitUI

language 

use core data : 디스크에 저장되는 모델링 프레임워크

include test : 유닛테스트 타겟을 자동으로 생성할지 선택 나중에 수정 가능

 

 

2강 xcode 

[수업 목표]

• Xcode 프로젝트를 자유롭게 생성할 수 있다.
• Xcode로 디버깅을 할 수 있다.
• Xcode의 기능을 활용하여 효율적으로 코드를 수정할 수 있다.
• Xcode의 유틸리티 기능을 알고 있다.
• 시뮬레이터를 통해서 앱을 실행시킬 수 있다.

>xcode 란

애플에서 만든 통합개발환경

애플에서 나온 모든 기기의 앱을 만들 수 있다 

 

>xcode 화면 구성

 

https://developer.apple.com/documentation/xcode/creating-an-xcode-project-for-an-apphttps://help.apple.com/xcode/mac/current/#/dev79c94bf05

Creating an Xcode project for an app | Apple Developer Documentation

 

>프로젝트 폴더 구조

 소스 및 리소스 를 갖고 있는 폴더

프로젝트 속성 설정 파일 (~~~~.xcodeproj) 

 

>디버깅

브레이크 포인트 

브레이크 포인트 (15행) 설정 시 14행까지만 실행이 된다

->hello world 111만 출력됨

 

>코드에디팅

코드 자동 완성

스페이스 누르면 나온다

 

>컴파일 에러

빌드 전, 실시간으로 에러 사항을 보여줌

 

>테스트

시뮬레이터 로 확인하는 방법과 실기기를 사용해서 확인하는 방법 2개 있음  

 

3강 UIView / UIViewController

[수업 목표]

• iOS의 사용자 인터페이스를 구성하는 View와 ViewController에 대해서 설명할 수 있다.
• ViewController의 세부 요소인 Container view controller에 대해서 설명할 수 있다.

>UIView 란

(공식) An object that manages the content for a rectangular area on the screen.

화면의 직사각형 영역에 대한 요소를 관리하는 객체

UI(User Interface)의 요소들의 기본 클래스 

UIImageView, UILabel, UIButteon 등의 UI컴포넌트들의 부모 클래스

 

view 위에 view를 쌓아서 계층적 구조화 가능(레이어 쌓기)

 

        //UIView 객체 생성
        let myView = UIView(frame:CGRect(x: 0, y: 0, width: 100, height: 100))
        
        //view 배경 색 설정
        myView.backgroundColor = UIColor.blue
        
        //ViewContruller에 기본적으로 포함되어 있는 view에 위에서 만들어준 view를 추가하기
        self.view.addSubview(myView)
        
        //위치 이동
        myView.frame = CGRect(x: 50, y: 50, width: 100, height: 100)

 

>UIViewController 란

(공식)An object that manages a view hierarchy for your UIKit app.

UIKit 앱의 view 계층을 관리하는 객체 

 

UIView를 관리

터치, 드래그 등의 사용자 상호작용에 응답하고 어떤 이벤트를 처리할지 설정

다른 UIViewController와 데이터 공유 가능 & 화면 전환

스토리보드에서 생성 or 코드를 통해서 생성

UIViewController는 하나의 UIView를 갖고 있음(self.view 접근 가능)

생명 주기를 통해서 관리됨

 

    override func viewDidLoad() {
        super.viewDidLoad()
        print("view did load")
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        print("view wll appear")
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        print("view did appear")
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        print("view will disappear")
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        print("view did disappear")
    }

 

>Content View Controller 

화면을 구성하는 뷰들을 직접 관리

 

>Container View Controller

하나 이상의 Child View Cotroller를 관리하고 있으며  ViewController의 레이아웃 조정, 배치, 화면전환 등만을 관리하는 컨트롤러

예 UINavigationController , UISplitViewController, UITabBarController

 

>UISplitViewController

아이패드 가로모드에서 주로 사용하는 형태 

 

>UINavigationController

스택 형태로 뷰컨트롤러 관리 (스택은 리포) 

애플 어플 중에는 설정 어플이 이에 해당함 

 

push

pop

 

 

이동할 때 값 전달 가능

 

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //버튼 하나 생성
        let button = UIButton(type: .system)
        
        //버튼 이름 설정
        button.setTitle("Push View Controller", for: .normal)
        
        //touchUp~눌렀을 때, 함수 push~ 실행
        button.addTarget(self, action: #selector(pushViewController), for: .touchUpInside)
        
        //버튼 위치
        button.frame = CGRect(x: 200, y: 200, width: 200, height: 100)
        
        //루트 뷰에 버튼을 추가하기
        self.view.addSubview(button)
    }
    
    @objc func pushViewController() {
        //새 뷰 생성
        let newViewController = UIViewController()
        
        //새 뷰의 타이틀
        newViewController.title = "New View Controller"
        
        //색깔 지정
        newViewController.view.backgroundColor = .blue
        
        //네비게이션 컨트롤러를 통해 push 설정
        navigationController?.pushViewController(newViewController, animated: true)
    }

 

initial view controller 

 

>UITabBarController 

아래의 부분을 tab bar 라고 한다

각 탭은 자신만의 뷰컨트롤러를 갖고 있다

탭을 누르면 탭과 연결된 root view를 보여준다 

 

>Tool Bar

현재 보여지는 뷰와 관련이 있는 액션을 수행하는 버튼들을 포함한다.

예를 들면, 사진첩에서 사진을 삭제하거나 편집하거나 하는 버튼

 

 

4강 Interface Builder

[수업 목표]

• Interface Builder를 활용하여 앱 UI를 구성할 수 있다.
• @IBOutlet, @IBAction 을 사용하여 viewcontroller와 ui간의 연결관계를 만들 수 있다.

IB : Interface Builder

스토리보드 파일을 통해 Interface Builder 열기 가능

UI컴포넌트들을 시각적으로, 직관적으로 보고 설정 가능하다

opt + 파일 누르면 에디터 창 2개로 볼 수 있음

contlor 누르고 드래그 앤 드롭

 

@IBoutlet : 변수 형태로 연결 / 인터페이스 빌더 객체

(공식) To enable your code to send messages to a user interface object, add a connection from the user interface object to a special property in your class called an outlet.

코드에서 사용자 인터페이스 객체로 메세지를 보내도록 하려면 사용자 인터페이스 객체를 아울렛이라 불리는 특수 프로퍼티를로 연결시켜줘야 한다 

 

@IBAction : 함수 형태로 연결

UI 컴포넌트가 감지하는 액션(이벤트, 터치, 드래그 등)에 의해 실행되는 동작을 설정 

 

스토리보드와 뷰컨트롤로가 연결되어 있는지 확인할 것!!

1 아이덴티 인스펙터 > 커스텀 클래스 에서 스토리보드와 뷰컨트롤러 이름 확인하기!

2 모든 UI 컴포넌트들이 잘 연결되어 있는지 확인(노란 느낌표 없어야함)

 

5강 UIKit 프레임워크 1

[수업 목표]

• UILabel
• UIImageView
• UITextField
• UIButton
• UISwitch
• UISlide
• UISegmentedContro

<UILabel>

텍스트를 표시하는 컴포넌트

사용자 상호작용하지 않는 정적인 텍스트 표기

        //UILabel
        let label = UILabel(frame: CGRect(x: 100, y: 100, width: 300, height: 50))
        
        label.textColor = .blue
        label.text = "안녕하세요"
        label.font = .systemFont(ofSize: 20)
        label.textAlignment = .center
        
        //뷰에 추가 반드시 할 것!
        view.addSubview(label)

 

<UIImageView>

이미지를 화면에 표시

        //UIImageView
        let imageView = UIImageView(frame: CGRect(x: 150, y: 150, width: 100, height: 100))
        
        //이미지뷰에 넣어줄 이미지를 생성
        let image = UIImage(systemName: "folder.fill")
        
        //이미지뷰에 이미지를 넣어줌
        imageView.image = image
            
        //넣을 때 어떻게 넣을지 설정
        imageView.contentMode = .scaleAspectFit
        
        view.addSubview(imageView)

 

<UITextField>

사용자의 텍스트를 입력 받는데 사용되는 컴포넌트 

근데 정말 입!력! 만 받는다 

입력 받은 후의 처리 등은 또 설정해줘야 한다 

        //UITextField
        let textField = UITextField(frame: CGRect(x: 200, y: 200, width: 100, height: 100))
        textField.placeholder = "입력하십시오~~"
        view.addSubview(textField)

 

<UIButton>

터치 이벤트에 반응

        //UIButton
        let button = UIButton(frame: CGRect(x: 200, y: 300, width: 150, height: 150))
        button.setTitle("버튼", for: .normal)
        button.backgroundColor = .gray
        
        //IBAction처럼 버튼을 눌렀을 때 실행될 함수 지정해주기
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
        view.addSubview(button)
    }
    
    @objc func buttonAction() {
        view.backgroundColor = .black
    }

 

<UISwitch>

토글 형태

on / off를 설정

        //UISwitch
        let switchButton = UISwitch(frame: CGRect(x: 200, y: 600, width: 50, height: 50))
        switchButton.isOn = true
        
        //스위치 아래(?) 색
        switchButton.onTintColor = .purple
        
        //스위치의 동그라미 색
        switchButton.thumbTintColor = .cyan
        
        //스위치 터치했을 때(여기서는 value change) 사용될 액션 지정
        switchButton.addTarget(self, action: #selector(buttonAction), for: .valueChanged)
        
        view.addSubview(switchButton)

 

<UISlider>

사용자가 값을 조정하는 슬라이더 (ex 소리 음량)

수평, 수직으로 표시 가능 

 

    //UISlider
    let slider = UISlider(frame: CGRect(x: 150, y: 750, width: 150, height: 150))
    
    //이벤트 발생 시 실행할 액션 설정
    slider.addTarget(self, action: #selector(buttonAction), for: .valueChanged)
        
    view.addSubview(slider)

 

<UISegmentedControl>

여러 개의 세그먼트로 구성된 컴포넌트

각 세그먼트는 단일 선택을 나타냄 

사용자는 여러 개 중 하나 선택

 

        //UISegmentedControl
        let segmentedControl = UISegmentedControl(items: ["옵션1", "옵션2", "옵션3"])
        segmentedControl.frame = CGRect(x: 250, y: 550, width: 150, height: 150)
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(buttonAction), for: .valueChanged)
        
        view.addSubview(segmentedControl)

 

6강 UIKit 프레임워크 2

시뮬레이터에서 옵션 키 누르면 줌인, 줌아웃 할 수 있다

 

[수업 목표]

• UIScrollView
• UIPickerView
• UITableView
• UICollectionView

<UIScrollView>

스크롤하여 뷰 내의 컨텐츠를 볼 수 있음

가로, 세로 스크롤 모두 지원

UIScrollViewDelegate 프로토콜을 사용하여 스크롤 이벤트 처리 가능 -> 줌인, 줌아웃 

 

        var scrollView: UIScrollView!
        var imageView: UIImageView!
        
        //스크롤뷰 생성
        scrollView = UIScrollView(frame: CGRect(origin: CGPoint(x: 0, y: 300), size: CGSize(width: view.bounds.width, height: 300)))
        scrollView.delegate = self
        
        //이미지 생성
        let image = UIImage(systemName: "folder.fill")
        
        //이미지를 넣고 이미지뷰 생성
        imageView = UIImageView(image: image)
        imageView.backgroundColor = .red
        imageView.contentMode = .scaleAspectFit
        imageView.frame = CGRect(origin: .zero, size: CGSize(width: 100, height: 100))
        
        //스크롤뷰에 이미지뷰를 추가
        scrollView.addSubview(imageView)
        
        //스크롤뷰의 사이즈를 설정
        //스크롤뷰 사이즈 < 컨텐트사이즈 조건에서 스크롤 가능
        scrollView.contentSize = CGSize(width: view.bounds.width*2, height: 300*2)
        
        //스크롤 줌인, 줌아웃
        scrollView.minimumZoomScale = 0.5
        scrollView.maximumZoomScale = 2.0
        
        //루트뷰에 스크롤뷰를 추가
        view.addSubview(scrollView)
   
    
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }