Review of Build a Basic UI - Food Tracker

사소하더라도 새로 알게 된 점을 적고, 복습 차원에서 중요한 점을 되짚어 보고 싶었습니다.

 

특히 용어들과 그 용어들에 대한 개념을 놓치지 않고 싶습니다.

 

공식 문서에서 사용하는 용어를 아는 것은 소통에 있어서 아주아주 critical 한 factor라고 생각하기 때문입니다.

---

 

Project navigator

Navigator selector bar 중에 가장 왼쪽에 위치한 navigator로 프로젝트를 구성하는 파일 전체를 볼 수 있습니다.

 

 

---

 

The App Delegate Source File

#앱 상태변화 처리 #앱 레벨 이벤트 처리 #앱 생명주기 관리

 

`system`이라는 용어가 등장합니다.

앱을 구동하는 OS 라고 생각하고 글을 작성하였습니다.

 

AppDelegate.swift 파일은 두 가지 주요 기능이 있습니다.

 

1. AppDelegate 클래스를 정의합니다. App Delegate는 window를 만듭니다. Window는 앱의 콘텐츠가 그려지는 곳입니다. App Delegate는 또한 앱의 상태변화에 대응할 공간을 제공합니다.

 

2. 앱의 entry point 를 생성하고, 앱에 이벤트를 전달해주는 run loop을 만듭니다. 이 동작은 UIApplicationMain 속성 (@main)에 의해 행해집니다.

 

@main attribute

 

@가 앞에 붙은 키워드들을 attribute라고 부릅니다. 자세한 내용은 따로 글을 다루어야 할 것 같습니다.

 

" Using the UIApplicationMainattribute is equivalent to calling the UIApplicationMain function and passing your AppDelegateclass’s name as the name of the delegate class. " - developer.apple.com

UIApplication이라는 함수가 있고 이 함수는 파라미터로 앱의 delegate를 받는데, @main을 사용하는 것은 delegate 로 AppDelegate를 전달하면서 UiApplication 이라는 함수를 호출하는 것과 같다고 말하고 있습니다.

 

그 호출에 대한 대답으로 시스템은 application object를 생성합니다.

 

이 Application object는 앱의 생명 주기 관리를 담당합니다.

 

시스템은 또한 AppDelegate 클래스의 인스턴스를 생성하는데, 이것을 Application object에 할당합니다. 이후 시스템이 앱을 실행합니다.

 

AppDelegate 클래스는 프로젝트를 새로생성하면 자동적으로 생성됩니다.

 

일반적이지 않은 작업을 할때도, 우리는 반드시 Xcode가 제공한 이 클래스를 이용하여 앱을 초기화하고 app-level 이벤트를 처리해야 합니다.

 

AppDelegate 클래스는 UIApplicationDelegate 프로토콜을 채용합니다.

 

그러므로 앱 (Application Object)의  Delegate는  AppDelegate 클래스입니다.

 

이 프로토콜에는 앱을 set up 하고, 앱의 상태의 변화에 대응하고, 다른 app-level 이벤트를 다룰 수 있는 다양한 메서드를 제공합니다.

 

AppDelegate 클래스는 `window`라는 이름의 프로퍼티를 하나 가지고 있습니다.

App Deleagate는 window를 만듭니다. Window는 앱의 콘텐츠가 그려지는 곳입니다.

이 속성에 앱의 window의 참조를 저장합니다. 이 window는 앱의 뷰 계층의 루트입니다.

 

이곳이 앱 내의 모든 콘텐츠가 그려지는 곳입니다.

 

그런데 이 글을 작성하는 시점에서는 SceneDelgate가 window라는 프로퍼티를 가지고 있었습니다.

일단 이 부분은 넘어가도록 하겠습니다.

 

옵셔널 타입의 window. 특정 시점에는 nil이 들어있다.

 

AppDelegate 클래스가 제공하는 (엄밀히 말하면 그것이 채용한 프로토콜의 요구사항을 구현한) 메서드들은 여러 가지이고,

 

Documentation에 메서드들의 사용방법이 적혀 있습니다.

 

이  Food Tracker 앱의 기능상  AppDelegate.swift 파일을 수정할 일은 없습니다.

 

이후에 Note 앱에서 수정해볼 예정입니다.

---

 

The View Controller Source File

프로젝트를 처음 생성하였을 때 기본적으로 생성되는 파일입니다.

 

아무 작업도 하지 않고 빌드 앤 런 하였을 때 보이는 비어있는 흰색 씬(Scene)과 연결되어있는 View controller입니다.

 

이후에 스토리보드에 추가하는 씬 들에 연결할 VC들은 모두 UIViewController 클래스를 서브 클래싱 하고 있습니다.

 

이 클래스들의 구현에서 custom 한 동작들과 자료구조들을 정의합니다.

---

 

Open Your Storyboard

 

스토리보드는 `. storyboard`라는 확장자를 가지고 있습니다.

 

스토리보드를 통해서 UI element를 간단하게 추가하고 원하는 위치에 배치할 수 있습니다.

 

Xcode는 스토리보드 파일을  Interface Builder라는 에디터로 엽니다.

 

씬 (Scene) 이란, 앱에서 콘텐츠를 담고 있는 하나의 화면을 스토리보드 방식으로 표현한 용어 입니다.

 

하나의 씬은 하나의 UIViewcontroller 커스텀 클래스와 연결되어 있습니다.

 

이 캔버스에서 보여주는 화면은 특정 기기에서 보이는 화면을 나타냅니다.

 

기기에 따라 보이는 화면이 바뀔 수 있기 때문에, Adaptive 한 interface를 만드는 것이 중요합니다.

 

" an interface that automatically adjusts so that it looks good on any device and in any orientation. "
다른 문서들에서도 애플은 다른 화면 크기를 가진 기기들을 모두 지원한다는 의미에서 Adaptive라는 용어를 자주 사용합니다.

 

하나의 씬 과 연결되어 있는 Custom Class (ViewController)

사진에 대한 설명

프로젝트를 생성하고 어떠한 코드 작업을 하지 않고 Main.storyboard를 열면 왼쪽 사진과 같이 canvas 위에 하나의 씬이 나옵니다.

 

이 씬의 file's owner를 클릭하면 화면의 오른쪽에 attribute inspector가 나오는데, 이곳에서 연결된 Custom Class를 확인할 수 있습니다.

 

file's owner는 흰색 화면 상단 짙은 회색의 두꺼운 가로 줄을 클릭하면 파란색 실선으로 하이라이팅 되는 부분을 가리킵니다. 

 

여기서 ViewController 클래스는 UIViewController를 서브 클래싱 하고 있습니다.

---

 

Build the Basic UI

이 부분은 보고 따라 하면 되는 간단한 내용들입니다. 따로 리뷰할 게 없다고 생각됩니다.

 

용어 위주로 간단하게 정리하였습니다.

 

씬에 추가할 수 있는 View 목록들을 이것을 Object Library 라고 합니다.

 

단축키는 ` shift + cmd + L ` 입니다.

 

Object Library

 

 

View (혹은 Control) 들을 드래그하여 씬내에서 이리저리 움직이면 보이게 되는 파란색 점선들을

Layout Guides 라고 합니다.

 

The blue layout guides

 

아래 사진에서 등장하는 세 종류의 vertical layout guides의 이름은

왼쪽부터 각각 the left margin alignment, the horizontal center alignment, the right margin alignment 입니다.

 

 

 

 

아래 사진에서 왼쪽의 Document outline에서는 스토리보드 내의 선택된 씬에서 뷰들의 계층 구조와 Layout Constraints 등을 확인할 수 있습니다.

 

관련 글: View Controller 의 역할

 

또한 하이라이팅된 부분이 선택된 요소임을 나타내는데, 현재는 View Controller의 Content view (혹은 Root view) 인 `View` 가 선택되어 있습니다.

 

선택된 뷰의 Configuration 은 화면 오른쪽의 Inspector selector bar를 통해 조작할 수 있습니다.

 

현재는 Attributes inspector가 선택되어 있습니다.

Main.storyboard 선택시 나오게 되는 화면

 

씬에 UITextField View를 추가하고 해당 View를 선택할시 Attribute Inspector 에서 볼 수 있게 되는 화면입니다.

Storyboard를 통한 작업은 코드로의 작업을 일정 부분 대체할 수 있습니다.

 

Storyboard를 통한 VIew Configuration

 

생략된 부분은 관련 글로 따로 게시하였습니다.

관련 글: UITextField 의 Return Key 와 Auto-enable Return Key

 

 

 

끝!

---

 

다음 글: Connect the UI to the Code (1) - Food Tracker

Connect the UI to the Code (1) - Food Tracker