17 분 소요

IOS 1주차 정리

📝 학습 목표

  1. iOS 플랫폼에 대해 이해한다.
  2. Xcode Project 생성 방법을 이해한다.
  3. Project Editor 컴포넌트에 대해 이해한다.
  4. UIComponent의 종류와 속성에 대해 이해한다.

✍🏻 수업 내용 정리

☀︎OT 관련 내용

  • 우리 강의는 Ios 개발자로서 어떻게 공부해야 하는지, 그 방법을 찾고 알려드리는 강의이다
  • 최종 목표는 성장가능한 IOS 개발자로 거듭나는 것이다
  • (모든 개발자들이 억대 연봉은 불가능 하겠지만) 억대 연봉 개발자들의 공통점은 소통능력+개발실력이다

💻 IOS 플랫폼

  • IOS란) 모바일 플랫폼이다
  • 그렇다면 플랫폼은) 게임이나 앱 등 여러가지를 제공하는 무언가
  • 플랫폼의 조건
    1. 유저가 존재한다
    2. 유저가 자유롭게 이용할 수 있는 환경이여야 한다
    3. 유저간 상호작용이 (양방향 소통) 제일 중요하다
  • 우리가 동네에서 볼 수 있는 마트나 시장도 플랫폼인가? → 그렇다
  • 플랫폼에는 규칙과 규정을 바탕으로 한 규제가 존재한다
  • 이러한 규칙과 규정을 설명하는 메뉴얼이 IOS에서도 존재한다

😇 친절한 애플

애플은 정말 친절하게도 이러한 메뉴얼을 공식문서의 형태로 제공한다

매년 개발자 conference(WWDC22)를 열어서 변경 사항들을 공개적으로 알려주는 기업(도대체 이런 기업이 어디에 존재…생각 보다 있었다)

이제 IOS 앱을 개발하면서 생각보다 더 많은 부분을 공부하게 될텐데, 서비스 아이템에 따라 그때 그때 다른 기능을 구현하기 때문이다. 이럴 때마다 당연하게 모르는 부분이 생길 수 밖에 없는데 1순위로는 공식문서를 참고하자(단 영어 잘해야 함)

그리고 문법에서 모르는 게 나오면 그때마다 찾아보면 되니 걱정하지 말 것!!

😎API

Application programming interface

인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있다. 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의한다. API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다.

face to face

예를 들어 서버 개발자가 API 만들어주면 그걸 우리는 활용하면 된다!

🎯 핵심 키워드

  • iOS

    최초에는 iPhone을 위해 만들어진 OS였고, 그러다 보니 공개 당시엔 ‘OS X  for iPhone, 그리고 3버전까지는 ‘iPhone OS’라는 이름을 사용했다.

    2010년 4월 이전까지는 따로 공식적으로 통일된 명칭이 없이 iPhone OS라는 이름을 사용하다가, 2010년 4월에 4번째 버전 베타가 공개되어 iPod touch, iPad, Apple TV까지 이 운영 체제를 사용하게 되면서 이름을 iOS로 바꾼다.

    이후 Apple TV는 2015년에 tvOS로 분리되었고, iPad는 2019년부터 iPadOS 로 분리되어 iPhone과 iPod touch만 iOS를 사용하고 있다

  • Platform

    주어진 상황, 쓰이는 시기, 쓰는 사람에 따라 개념과 뜻이 다르다

    대표적으로는 공급자와 수요자의 상생 생태계

    애플 덕분에 플랫폼의 개념이 진화했다

    잡스님이 pc 성능을 가진 모바일 기기에 pc 운영체제를 탑재하고 앱스토어를 올렸다. 그러자 아이폰은 애플리케이션 판매자와 구매자가 오고 가는 플랫폼이 되어버렸다

    정말 똑똑하다고 느낀 게 운영정책, 지원조직을 만들어 플랫폼이 스스로 유지될 수 잇도록 생태계를 만들었다(흔히 말하길 애플 생태계)

  • API

    API는 Application Programing Interface라는 용어로써, 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법을 의미한다. 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 하는것이다!

  • Bundle id

    각각의 애플리케이션이 갖는 고유한 값

    앱 스토어에 동일한 Bundle id가 있다면 등록할 수 없다

    A bundle ID or bundle identifier is a unique identifier of an app in Apple’s ecosystem . It means that no two apps can have the same bundle ID. A bundle identifier lets macOS recognize any updates to your app. It is used in validating the application signature.

  • Storyboard

    스토리보드Storyboard란 앱의 흐름을 나타내며, 시각적으로 화면을 구성하는 곳. 스토리보드에서 우리는 앱의 전반적인 형태와 앱의 화면 전환, 다양한 Object들을 관리해주는 곳. 여기서 Object들이란 화면에서의 Label, Button, Sliders 등 요소들을 나타내는 것이다.

  • info.plist

    Info.plist파일은 실행 패키지에 관한 필수 설정 정보가 포함된 구조화된 텍스트 파일이다.

    프로젝트를 생성하면 자동으로 생성된다.

  • asset

    Phone 과 iPad 에서 어플리케이션이 똑같이 작동하려면 이미지 크기가 조금씩 달라야겠…지

    Xcode 에서는 이를 해결하기 위해 에셋(Asset) 을 사용한다. 에셋은 다양한 디바이스들에서 사용하기 위해 여러 파일로 이루어져 있다. 예를 들어 iPhone 과 iPad 둘 다에서 동일한 이미지를 사용하기 위해 이미지 에셋을 만들 수 있다.

    에셋 카탈로그(Asset Catalog) 는 에셋을 관리하기 위한 폴더이다. Xcode 에서 처음 프로젝트를 생성하면 Assets.xcassets 폴더가 생성되는데, 이 폴더를 에셋 카탈로그라고 하며, 다양한 에셋들을 관리할 수 있다.

  • Launch Screen

    LauchScreen.storyboard는 프로그램이 실행될 때 가장 먼저 화면에 나타나도록 설정된 스토리보드이다. 앱이 실행될 준비가 완료되면 자동으로 main.storyboard로 화면이 전환되도록 설정되어 있다.

  • UIKit

    우리가 아는 그 import UIKit 할때 그 UIKit

    프레임워크의 일종

    UIKit 프레임 워크는 iOS 와 tvOS(애플 티비)에 들어가는 앱을 빌드하는 데 필요한 핵심 오브젝트(core objects)를 지원한다.

    UIKit은 앱의 메인 이벤트 루프(Main Event Loop)를 실행하고 화면에 콘텐츠를 표시하며 여러 오브젝트를 제공한다.

    UIKit 앱의 구조는 MVC(Model- View - Controller) 디자인 패턴을 기반으로 한다.

  • UIComponent

    UIComponent 관련 레퍼런스

    https://velog.io/@rlawnstn01023/UIKitUI-component

    [Xcode]UI component

    https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/

📢 1주차 수업 후기

  • 지속가능한, 무한히 성장가능한 IOS 개발자를 꿈꾼다는 OT 다짐에 동화되었다. 아직까지는 기본적인 내용들이라 다음 수업엔 또 무엇을 배울지 굉장히 기대된다.

1주차 스탠다드 미션

  1. Standard Mission

    # 🤨info.plist 속성 각각 뭘 뜻하는지 찾아보기

    • Bundle name : 사용자가 보는 애플리케이션의 실제 이름 (앱 아이콘 아래의 이름)
    • Bundle identifier : 애플리케이션의 고유 식별자 (= 안드로이드에서의 package name -> 앱 출시할때 식별자) 이거 겹치면 출시 못 함
    • InfoDictionary version : 프로퍼티 리스트 구조의 현재 버전, 자동으로 키를 더하기 때문에 값을 수정하지 말기. 즉 info.plist의 format 버전이란 소리
    • Main storyboard file base name : 메인 스토리보드 파일 이름
    • Bundle version : 번들의 빌드 버전 (배포용이 아닌 내부 빌드용)
    • Launch screen Interface file base name : 런치스크린 파일 이름(시작 로딩 화면)
    • Executable file : 실행 파일 이름
    • Application requires iPhone environment : 반드시 iOS에서만 실행하는지 체크하는 속성
    • Supported interface orientations (iPhone) : 앱에서 지원하는 인터페이스 방향 (회전 처리 설정) > Item 0,1,2
    • Application supports indirect input events : 간접 입력 장치 지원 유무를 선택하는 속성
    • Application Scene Manifest : Scene 기반의 생명주기 관련 정보 설정
      • Enable Multiple Windows : 여러 Scene을 설정할 수 있는지 체크하는 속성
      • Scene Configuration : 새 Scene을 만들 때 UIKit의 기본 설정값
        • Application Session Role : 2가지 역할 (Application / External Display)
          • Item 0 (Default Configuration)Delegate Class Name : 대신 코드를 실행해 줄 클래스 이름Storyboard Name : 스토리보드 이름Configuration Name : 설정 이름
    • Bundle OS Type code : 번들 OS 종류 코드(번들의 유형 설정, 코드 - APPL / 프레임워크 - FMWK / 번들 - BNDL)
    • Localization native development region : 개발 지역 및 언어 (앱이 만들어진 주 지역, ISO 639 등 언어 분류를 위한 명명된 코드를 입력) > 앱 기본 언어 변경 시 사용
    • Supported interface orientations (iPad) : 앱에서 지원하는 회전 처리 설정 (iPad 용) > Item 0,1,2,3
    • Bundle version string(short) : 번들의 릴리즈 버전

    # 🙁AppDelegate.swift 파일과 SceneDelegate.swift파일이 왜 중요한지, 무슨 역할을 하는지 조사하기

    • AppDelegate: 앱의 실행 주기를 관리(IOS13이후 SceneDelegate에게 일부 넘겨줌)하는 파일, 앱을 실행하거나 종료 또는 백그라운드를 실행할 때 하는 일 관리→실행 주기를 관리하는데 없으면 안되겠지

    1. func application(_: didFinishLaunchingWithOptions: ) -> Bool

    application의 setup을 이 메소드 안에서 진행하게 된다. iOS 12 이하 버전은 multiple window를 지원하지 않았어서 UIWindow 객체에 대한 configuration도 진행했었는데 이제는 multiple window를 지원하기 때문에 하나의 window 객체만 관리하는게 말이 되지 않죠.

    2. func application(_: configurationForConnecting:options: ) -> UISceneConfiguration

    application이 새로운 scene/window를 제공하려고 할 때 불리는 메소드. (최초 launch 때 불리는 메소드 아님)

    3. func application(_: didDiscardSceneSessions: )

    사용자가 scene을 버릴 때 불린다.

    • SceneDelegate: 아이패드에서 생긴 멀티 윈도우와 관련되서 생성되는 파일. 간단히 말해서 SceneDelegate은 화면에 무엇(scene/window)을 보여줄지 관리하는 역할
    • https://sueaty.tistory.com/134

    # 😩Asset은 뭐하는 녀석인지?

    Use asset catalogs to organize and manage the different asset types used by your app, such as images, sprites, textures, stickers, and data. An asset catalog can contain multiple types of assets and the assets can be grouped into folders. Most types of assets are a set of files that can have multiple variations to support different device characteristics. For example, an image set can contain different files in any supported image format for the 2x and 3x images used for an iPhone and for an iPad.

    # 🤬UI 컴포넌트 조사

    ### [Label]

    ### 정보 텍스트의 한 줄 이상을 표시하는 보기.

    ### 텍스트의 글꼴, 텍스트 색상, 정렬, 강조 표시 및 음영을 제어 가능.

    ### [Button]

    ### 사용자 상호 작용에 대한 응답으로 사용자 지정 코드를 실행하는 컨트롤.

    ### 버튼의 제목, 이미지 및 기타 모양 속성을 설정 가능. 각 버튼 상태에 대해 다른 모양을 지정 가능.

    ### [Segmented Control]

    ### 여러 세그먼트로 구성된 수평 컨트롤로, 각 세그먼트는 개별 버튼으로 작동.

    ### 단일 또는 다중 선택 또는 명령 목록을 나타낼 수 있음, 각 세그먼트는 텍스트 또는 이미지를 표시 할 수 있지만 둘 다 표시는 불가능.

    ### [Text Field]

    ### 사용자가 상호 작용할 수 있는 텍스트 필드를 표시.

    ### 사용자가 텍스트 필드에 작성할 수 있음.

    ### [Slider]

    ### 값의 제한된 선형 범위에서 값을 선택하기 위한 컨트롤.

    ### 값 범위를 나타내는 트랙이라는 가로 막대를 표시. 현재 값은 표시기 또는 엄지 손가락의 위치로 표시됨.사용자는 트랙을 따라 엄지 손가락을 밀어 값을 선택.

    ### [Switch]

    ### 선행 레이블과 후행 스위치를 표시하는 토글 스타일.

    ### 컨트롤을 탭하면 상태를 전환.

    ### [Activity Indicator View]

    ### 작업이 진행 중임을 나타내는 보기.

    ### 완료상태를 알 수 없는 작업에 대한 처리를 나타내는 데 사용.

    ### [Prog ress View]

    ### 작업 완료를 향한 진행 상황을 보여주는 보기.

    ### 긴 작업이 진행 중임을 나타내며 완료된 작업의 백분율을 나타냄.

    ### [Page Control]

    ### 수평의 연속되는 점으로 표시되는 제어.

    ### 열려있는 각 페이지에 대해 점을 표시하여 응용 프로그램에서 열려있는 페이지 수를 나타냄. 현재 본 페이지에 해당하는 점이 강조 표시.

    ### [Stepper]

    ### 값을 증가하거나 감소시키는 제어.

    ### 레이블 또는 텍스트 필드와 결합.

    ### [Horizontal Stack View]

    ### 수평 또는 수직 뷰 스택을 만드는데 필요한 제약 조건을 생성하고 관리.

    ### [Vertical Stack View]

    ### 수평 또는 수직 뷰 스택을 만드는데 필요한 제약 조건을 생성하고 관리.

    ### [Table View]

    ### 테이블 타입으로 데이터를 표시할 수 있는 뷰.

    ### 테이블 뷰의 각 행은 UITalbleViewCell 개체. 사용자는 테이블 셀을 삽입, 삭제 및 재정렬하여 테이블을 편집할 수 있음.

    ### [Table View Cell]

    ### 테이블 뷰에서 셀의 특성 및 동작을 정의.

    ### 테이블 셀의 선택한 상태 모양을 설정하고, 편집 기능을 지원.

    ### [Image View]

    ### 인터페이스에서 단일 이미지 또는 일련의 애니메이션를 표시.

    ### 이미지를 화면에 표시하고 싶을 때 사용.

    ### [Collection View]

    ### 커스텀한 레이아웃을 사용하여 정렬된 데이터 항목 모음을 관리. 컬렉션 뷰의 각 셀은 UICollectionViewCell 객체.

    ### 셀을 섹션으로 그룹화 할 수 있으며 섹션과 셀을 선택적으로 보조 보기를 가질 수 있음.

    ### [Collection View Cell]

    ### 컬렉션 뷰에서 하나의 셀을 나타내는 단일 뷰. 모양을 제공하려면 Label 및 Image View 와 같은 하위 View로 채움.

    ### [Collection Reusable View]

    ### Collection View에서 재사용 가능한 View의 특성 및 동작을 정의

    ### [Text View]

    ### 응용 프로그램별 방식으로 입력을 처리. 사용자가 텍스트 보기를 누르면 키보드가 나타나고 Return을 누르면 키보드가 사라짐.

    Text Field VS Text View

    • Text Field: 한줄로만 작성 가능
    • Text View: 여러줄로 작성 가능하고 텍스트가 길어지면 자동으로 스크롤 기능을 제공

    ### [Scroll View]

    ### 응용 프로그램 창 크기보다 큰 콘텐츠를 표시하는 메커니즘을 제공하며 사용자가 스와핑 제스처를 통해 해당 콘텐츠 내에서 스크롤할 수 있도록 함.

    ### [Date Picker]

    ### 날짜와 시간을 선택할 수 있도록 여러개의 회전 바퀴를 사용.

    ### 예시로는 시계 응용프로그램의 타이머가 있음.

    ### [Picker View]

    ### 행과 구성요소로 구성된 잠재적인 다차원 사용자 인터페이스 요소를 제공.

    ### 구성요소의 각 행에는 문자열 또는 Lable이나 이미지와 같은 View object 가 있음.

    ### 휠의 인덱스 위치에 일련의 항목(행)이 있는 휠.

    ### [Visual Effect View with Blur]

    ### 다른 View 뒤에 사용자 정의 가능한 혼합효과를 제공.

    ### Blur 처리할때 사용.

    ### [Visual Effect View with Blur and Vibrancy]

    ### Blur 배경을 제공하고 포함된 뷰를 생생한 효과로 렌더링.

    ### [Map Kit View]

    ### 지도 애플리케이션에서 제공화는 것과 유사한 내장형 맵 인터페이스를 제공

    ### 지정된 좌표에 지도를 가운데로 배치하고,표시할 영역의 크기를 지정하며, 지도에 사용자 지정 정보를 주석으로 달 수 있음.

    ### 클래스를 현재 상태로 사용하여 지도 정보를 표시하고 프로그램에서 지도 내용을 조작가능

    ### [MetalKit View]

    ### 3D Model, Texture등 Metal Drawing 어플리케이션을 만드는데 필요한 노력을 단순화함.

    ### MTKView 개체를 사용하면 응용 프로그램을 대신하여 MTLRenderPassDescripot(??) 개체 및 관련 렌더 타겟 첨부파일을 편리하게 관리할 수 있고, 내용을 업데이트해야 할 때 보기를 간단히 그릴 수 있음.

    ### [GLKit View]

    ### OpenGL(실리콘 그래픽스사에서 만든 2차원 및 3차원 그래픽스 표준 API 규격으로, 프로그래밍 언어 간 플랫폼 간의 교차 응용 프로그래밍을 지원)을 활용한 어플리케이션을 만드는데 필요한 노력을 단순화.

    ### 응용 프로그램을 대신하여 프레임 버퍼 object를 직접 관리.

    ### [SceneKit View]

    ### SceneKit 프레임워크를 사용하여 3D장면을 표시할 수 있음.

    ### 응용 프로그램에서 3D 장면을 쉽게 로드, 조작 및 렌더링 할 수 있음.

    ### [SpriteKit View]

    ### SpriteKit 프레임워크를 사용하여 2D장면을 표시할 수 있음.

    ### 응용 프로그램에서 2D 장면을 쉽게 로드, 조작 및 렌더링 할 수 있음.

    ARKit : iOS에서 증강현실을 가능하게 해주는 프레임워크

    ### [ARKit SceneKit View]

    ### ARkit 및 SceneKit 프레임워크를 이용해서 카메라 배경에 3D 장면을 표시 할 수 있음.

    ### 응용프로그램에서 3D 장면을 쉽게 로드, 조작 및 렌더링 할 수 있음.

    ### [ARKit SpriteKit View]

    ### ARkit 및 SpriteKit 사용할 수 있게 허용해줌.

    ### 응용프로그램에서도 장면을 쉽게 로드, 조작 및 렌더링 할 수 있음.

    ### [Web View(deprecated)]

    ### WKWebView가 최신이고 이것은 Legacy 예전 버젼을 지원하기 위해 있음.

    ### [4WebKit View]

    ### 웹 콘텐츠를 삽입하고 보여줄 수 있음.

    ### 콘텐츠 탐색을 활성화함.

    ### [Reality AR View]

    ### RealityKit 프레임워크를 사용하여 3D 대화형 AR장면을 표시할 수 있음.

    ### 이 기능을 사용하면 응용프로그램에서 3D AR 콘텐츠를 쉽게 로드, 조작 및 렌더링할 수 있음.

    ### [View]

    ### 뷰 계층 구조에서 부모의 사각형 영역 내에서 그리기, 하위 뷰 레이아웃 및 이벤트 처리를 위한 구조를 제공.

    ### [Container View]

    ### 하위 뷰 컨트롤러를 호스팅하기 위해 뷰 컨트롤러의 뷰 계층 구조 내에서 영역을 정의.

    ### [Navigation Bar]

    ### 상태 표시줄 바로 아래에 탐색 모음을 표시하는 메커니즘을 제공.

    ### 기본적으로 UINavigationBar는 왼쪽의 뒤로가기 버튼과 가운데에 제목을 표시하지만 navigation 오른쪽에 옵션 단추를 제공하는 것 외에도 사용자 지정 보기를 지정할 수 있음.

    ### [Navigation Item]

    ### 항목이 스택의 맨 위에 있을 때 탐색 모음에 표시되는 내용과 뒤로 항목 일 때 표시되는 방법을 포함하여 UINavigationBar 개체 스택의 탐색 항목에 대한 정보를 캡슐화

    ### Navigation bar에 나타내려면 Navigation Item에 제목이 있어야 함.

    ### [Toolbar]

    ### 화면 하단에 Toolbar Item을 표시하는 매커니즘을 제공하고 도구모음 항목(UIToolbarItem instance)의 표시 및 선택을 지원.

    ### UIToolbarDelegate를 사용하여 toolbar item에 대한 사용자 지정 보기를 지정

    ### [Bar Button Item]

    ### 각 bar button item은 버튼과 유사하게 동작하며 제목, 이미지, 액션, 타겟이 있음.

    ### UIBarButtonItem 클래스는 더하기 이미지와 같이 시스템에서 제공한 이미지가 있는 bar button item을 지정하는데 사용할 수 있는 방법을 제공.

    ### [Fixed Space Bar Button Item]

    ### 인접한 도구 모음 항목을 고정 된 공간으로 분리.

    ### [Flexible Space Bar Button Item]

    ### 인접한 도구 모음 항목을 유연한 공간으로 분리.

    ### [Tab Bar]

    ### 앱에서 보기, 하위 작업이나 모드를 선택하기 위한 막대를 표시.

    ### [Tab Bar Item]

    ### UITabBar의 항목을 나타냄.

    ### Tabbar 항목에는 제목과 이미지가 있으며 UITabBar에서 보기를 선택하는데 사용

    ### [Search Bar]

    ### 검색 아이콘이 포함된 편집 가능한 검색 표시줄.

    ### return을 누르면 대상 객체에 작업메시지를 보냄.

    ### [Menu Command]

    ### 명령은 메뉴의 다른 명령과 함께 그룹화되며, 이 옵션을 선택하면 첫번째 응답기를 통해 작업 메시지를 보냄.

    ### 작업 수행 외에도 명령어는 종종 체크 표시로 표시된 설정을 수정.

    ### [Main Menu]

    ### macOS의 메인 메뉴로 사용할 기본 메뉴 및 command 집합을 포함.

    ### [Sub Menu]

    ### 메뉴의 하위 항목을 표시하도록 구성된 메뉴.

    ### [Inline Section Menu]

    ### separator를 사용하여 자식 항목을 인라인으로 표시하도록 설정된 메뉴

    ### [View Controller]

    ### 도구 모음, 탐색 모음 및 응용프로그램 뷰에 대한 뷰 관리 기능을 제공.

    ### UIViewController 클래스는 장치 방향이 변경될 때 회전 보기를 지원.

    ### [Storyboard Reference]

    ### 스토리보드 참조를 통해 스토리보드를 여러 파일로 팩토링할 수 있음.

    ### 플레이스홀더에 연결된 Segue는 한 스토리보드에서 다른 스토리보드로 전활할 수 있음.

    Segue

    • Segue란 스토리보드에서 앱의 인터페이스 흐름을 나타내는 객체.
    • 쉽게 이야기 하면 스토리보드에서 뷰 컨트롤러 간의 이동을 나타내는 화살표를 추상화시킨 것.
    • 출발 뷰컨트롤러에서 적절한 요소를 골라 control + 클릭을 해주고 전환하고자 하는 뷰 컨트롤러로 드래그해주는 것만으로 쉽게 segue를 정의가능.

    ### [Navigation Controller]

    [사용예시]

    ### 뷰 컨트롤러의 스택과 내비게이션바를 관리할 수 있음.

    ### 뷰 컨트롤러를 스택에 밀어넣었다가 빼면 네비게이션 컨트롤러가 네비게이션 바를 업데이트하고 적절하게 보기를 수행.

    ### [Table View Controller]

    [사용예시]

    ### 올바른 차원과 사이즈 조절이 가능한 마스크를 통해 인스턴스를 생성하고 tableView를 관리.

    ### [Collection View Controller]

    [사용예시]

    ### UICollectionView를 관리하며, 올바른 치수와 크기 조정 mask를 사용하여 인스턴스를 자동으로 생성.

    ### Collection View의 위임자 및 데이터 원본으로 작동.

    ### [Tab Bar Controller]

    [사용예시]

    ### 각각 탭 표시줄 항목을 나타내는 뷰 컨트롤러 세트를 관리.

    ### 뷰 컨트롤러는 탭 바 아이템에 대한 정보를 제공하고 아이템을 선택할때 표시할 view를 제공.

    ### [Split View Controller]

    [사용예시]

    ### 스플릿 뷰 컨트롤러는 마스터 뷰 컨트롤러 (가끔씩 목록)가 하위 뷰 컨트롤러에서 변경을 시작하는 마스터 세부 인터페이스를 만드는데 사용.

    ### [Page View Controller]

    [사용예시]

    • 사용자의 스와이프로 페이지가 넘어가는 것.

    ### 데이터 소스와 델리게이트를 통해 뷰 컨트롤러 시퀀스를 페이지로 표시

    ### 페이지 간 스와이프 탐색은 사용자의 손가락을 추적하는 페이지 컷 전환으로 자동으로 처리

    ### 탐색 방향은 책의 페이지와 같이 수평이거나 벽 달력의 페이지와 같은 수직일 수 있음.

    ### [Hosting View Controller]

    ### 커스텀된 SwiftUI 뷰는 root view를 프로그래밍 방식으로 할당하는 UIHostingController의 사용자 지정 하위 클래스를 선언하여 계층 내용을 봄.

    ### 원하는 root view로 초기화된 대상 호스팅 컨트롤러를 프로그래밍 방식으로 반환하는 소스 뷰 커트롤러에 Segue Action을 선택적으로 정의할 수 있음.

    ### [GLKit View Controller]

    ### GLKViewController 클래스는 모든 표준 뷰 컨트롤러 기능을 제공하며 OpenGL ES 렌더링 루프를 구현.

    ### GLKViewController 객체는 GLKView 객체와 함께 작동하여 애니메이션 프레임을 뷰에 표시.

    ### [AVKit Player View Controller]

    ### 시청각 콘텐츠 및 표준 재생 컨트롤을 표시할 수 있는 AVPlayer 객체를 관리하는 컨트롤러.

    ### [Object]

    ### 사용자 지정 클래스 인스펙터를 사용하여 이 객체를 특정 클래스의 인스턴스로 변환.

    ### 이 객체는 뷰 컨트롤러와 별도로 사용자 지정 컨트롤러를 인스턴스화하면서도 뷰에 대한 작업 및 아웃렛 관계를 유지하는데 자주 사용.

    ### [Tap Gesture Recognizer]

    ### 사용자가 탭할때 작업 메시지를 보냄.

    ### 한번 또는 여러 번 터치하여 한 번 또는 여러 번 탭할 수 있도록 구성할 수 있음.

    ### [Pinch Gesture Recognizer]

    ### 2개의 손가락으로 Pinch를 하는 동안 계속해서 작업 메세지를 보냄.

    ### 콘텐츠를 확대축소하는데 사용.

    ### [Rotation Gesture Recognizer]

    ### 사용자가 두 손가락으로 회전을 수행하는 동안 계속해서 작업 메시지를 보냅니다. 종종 콘텐츠를 회전하는 데 사용.

    ### [Swipe Gesture Recognizer]

    ### 사용자가 스와이프 할때 작업 메시지를 보냄.

    ### 한 방향으로 한번 또는 여러번 터치할 수 있도록 구성되어 있음.

    ### 여러 방향을 인식하려면 여러개의 recognizer가 필요.

    ### [Pan Gesture Recognizer]

    ### 사용자가 드래그 하는 동안 작업 메시지를 계속 보냄.

    ### 일 또는 여러번의 터치로 구성할 수 있음.

    ### [Screen Edge Pan Gesture Recognizer]

    ### 사용자가 화면 가장자리에서 드래그 하는 동안 작업 메시지를 보냄.

    ### [Long Press Gesture Recognizer]

    ### 사용자가 길게 누르는 동안 계속해서 작업 메시지를 보냄.

    ### [Custom Gesture Recognizer]

    ### 사용자가 사용자 지정 제스처를 수행할 때 작업 메시지를 보냄.

    https://velog.io/@rlawnstn01023/UIKitUI-component

    # 🥵AutoLayout 이 왜 중요한지

    오토 레이아웃(Auto Layout)이란,

    제약 조건(Constraints)에 따라  뷰 계층 구조에 있는 모든 뷰의 크기와 위치를 동적으로 지정하는 것이다

    이게 중요한 이유는 멘토님께서 말씀해 주셨듯이 단말기마다 화면 비율이 다르기 때문에 실제 같은 앱을 구동하더라도 다른 화면(주로 깨지거나 이상한 화면)이 나타날 수 있기 때문이다

    그래서 컴포넌트간에 제약을 걸어 서로 위치를 고정함으로써 화면 전체 비율에 따라 동일한 화면이 나타날 수 있도록 하는 것이 주된 역할이다.

    게다가 굉장히 편리한 점은 오류가 바로바로 떠서, 자동으로 오류를 수정할 수도 있다는 점이다

    # 😎 좀 더 알아보면 좋을 것들

    ## Cocoa touch Framework 스크린샷 2022-09-26 오후 8 25 58

UIKit

사용자의 이벤트 처리(주로)

UI붙은 거 사용하려면 UIKit 반드시 import 스크린샷 2022-09-26 오후 8 26 22

UIKit 앱의 구조는 기본적으로 MVC 디자인 패턴 사용

M은 Model

V는 View

C는 Controller

모델은 앱의 데이터와 비즈니스 로직을 갖고 있고

뷰는 사용자에게 데이터를 보여주는 UI를 담당

마지막으로 컨트롤러는 모델과 뷰의 중간다리 역할(뷰로부터 사용자의 액션 전달받아 모델 업데이트 하거나, 모델로부터 데이터의 변화를 가져와 뷰에 반영)

MVC의 패턴의 가장 이상적인 형태는 Model 과 View 사이에 Controller가 껴서 둘 사이를 조율하는 것

스크린샷 2022-09-22 오후 12.31.05.jpg

하지만 현실의 UIKit 구조는 스크린샷 2022-09-26 오후 8 27 32

이렇게 뷰와 컨트롤러가 딱 붙어있다

뷰컨트롤러가 거의 모든 것을 컨트롤 하는 중

프로젝트가 커질 수록 컨트롤러가 비대해지고 내부 구조가 복잡해져 유지보수가 힘들 수 있다!

—> 그래서 등장한 것이 MVVM

UIView

화면의 직사각형 영역에 대한 내용을 관리하는 객체

즉 화면을 구성하는 요소의 기본 클래스 스크린샷 2022-09-26 오후 8 27 48

위치와 크기를 갖는 사각형

문자 이미지 넣을 수 있다, 배경색도 가능

여러 UIComponent를 보여주는 것에 사용

ViewController

앱의 근간을 이루는 객체 (위에서 말한 MVC 패턴에서 C)

모든 앱은 최소한 하나 이상의 뷰 컨트롤러를 갖고 있다

사용자가 화면을 보는 영역에 대한 관리 기능을 제공

주요 역할)

-데이터 변화에 따라 뷰 컨텐츠 업데이트

-뷰들과 함께 사용자 상호작용에 응답

-뷰를 리사이징, 전체적인 인터페이스 레이아웃 관리

-다른 뷰 컨트롤러들과 함께 앱을 구성 스크린샷 2022-09-26 오후 8 29 24 스크린샷 2022-09-26 오후 8 29 43

  • UIWindow의 정의는 나의 View 들에서 일어난 이벤트를 처리하고 사용자 인터페이스와 객체에 배경을 제공하는 것이다.
  • Window는 시각적인 모습을 가지고 있지는 않지만 앱 view 의 프레젠테이션에 중요하다.
  • 스크린에 나타나는 모든 view 들은 Window 로 묶여 있으며, 각 Window 는 앱의 다른 view 와 독립적 이다.
  • 앱에서 이벤트를 받았을 때 처음에 해당 View 객체로 라우팅()* 되고 해당 이벤트는 해당 View로 전달이 된다. Window 는 ViewController를 이용하여 방향 변경을 구현합니다.
    • 라우팅 : 근원지에서 목적지로 데이터가 전달될 수 있도록 하는 기능

    iOS 앱은 모든 View 들의 컨테이너 역할을 하는 UIWindow 인스턴스 를 가지는데 이는 AppDelegate에 정의되어 있으며 UIWindow 는 UIView 의 하위 클래스 이므로 Window 는 그 자체가 View라고 할 수 있다

    ## 😎[챌린지 미션]기존에 있던 앱의 시작 화면 구성하기

위의 링크를 클릭하면 챌린지 미션 xcode 압축 파일이 다운됩니다!

인스타그램 화면 따라하기

기본적으로 간단한 인스타그램 시작화면을 따라해 보고자 마음먹었다

(이때 마음을 단단히 먹었어야 했다…그것을 깨달았을 땐 너무 늦은 뒤였다)

구성은 imageView를 이용해서 멋들어지게 생긴 인스타그램 영문 폰트를 사진으로 따와

똭!

박아넣었다

그리고 인스타그램 시작화면이 여러 개가 있는데

필자는 기존 계정이 있어서 바로 로그인이 가능한 화면과

직접 로그인을 input하여 들어갈 수 있는 화면을 구성했다

두 화면 모두 공통점이 하단에 작은 공간이 마련되어 있어서

이건 Tab bar Controller로 따라해 보았다(실제 모양과 약간은 다를 것이다)

각종 버튼과 Label을 이용해 화면을 구성한 다음

버튼의 radius를 설정하기 위해

각각의 viewcontroller.swift 파일에다

viewDidLoad에

LoginButton.layer.cornerRadius = 10

추가해줬다.

마지막으로 가장 고난이도였던…

오토 레이아웃

언제나 어렵고도 어려운 스킬이다

우선순위며 화면 비율까지 고려해야할 요소가 너무 많았다.

역시나 발생한 문제

문제1.

스크린샷 2022-09-20 오후 8 03 51

실제 시뮬레이션 구동 시 닉네임이 잘린다;;;

우선순위가 문제인가…해서 Content hugging priority와 Content Compression Resistance Priority만 만지작 거렸는데

알고보니 width와 height 제약사항을 걸어주지 않아서 생긴 일이었다;;;

이렇게 간단하게 끝날 줄 알았으면…(중간생략)

문제2.

스크린샷 2022-09-20 오후 7 58 11

instagram image view가 말도 안되게 커졌다.

이건 어쩔 수 없이 해당 레이아웃을 다시 맞춰주었다.

height 과 width 다시 설정하고…

왼쪽 오른쪽 공백 맞춰주고

결론

어쨌든 해결 스크린샷 2022-09-20 오후 8 26 50 스크린샷 2022-09-20 오후 8 26 44

12와 13 에서는 제대로 구동하는 것을 보았지만

화면 비율이 크게 달라지면 또 어떻게 될지 모르겠다

오토 레이아웃은 너무나도 어렵다

다음 강의 시간에 확실하게 종지부를 찍는 기회가 오길 바란다.

태그: ,

카테고리:

업데이트:

댓글남기기

참고

[GDSC] GDSC

최대 1 분 소요

[GDSC] GDSC