UIKit 기초 공부

shstl98·2022년 3월 19일
UIkit
post-thumbnail

iOS 1주차 워크북 (Auto Layout)

🎯핵심 키워드

  • 절차 지향 언어 And 객체 지향 언어
  • Optional
  • UIKit
  • 변수 선언
  • Func
  • Class
  • Struct
  • What is “init()”
  • Break Point

학습 목표

  1. Xcode 설치방법을 안다.
  2. Project 생성 방법을 이해한다.
  3. Project Editor 컴포넌트에 대해 이해한다.
  4. Swift 기초 문법에 대해 이해한다.
  5. UIKit이 무엇인지 이해한다.
  6. UIComponent의 종류와 속성에 대해 이해한다.

UIComponent 관련 레퍼런스

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

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

→ Controls 메뉴에 있는 모든 컴포넌트에 대해 조사 진행하시면 됩니다.

🤔이것도 한 번 생각해봐요!

  • Optional을 공부하셨나요? 그럼 Optional을 어떻게 벗길까요?

  • UIKit에는 엄청 많은 컴포넌트들이 존재해요! 여러분들이 자주 사용하게 될 컴포넌트 다섯개를 정해보고 왜인지 생각해봅시다! Ex. UILabel: 모든 앱에는 고정된 텍스트들이 들어가니깐 제일 많이 사용할 것 같다.

  • 변수 선언에는 let 과 var이 있죠? 무슨 차이일까요?

iOS 2주차 워크북 (Auto Layout)

🎯핵심 키워드

  • AutoLayout
    기기가 변경되거나, 화면이 회전되었을 때 view를 안정적으로 정돈시켜주는 도구

  • Inspector 영역
    background color, scale. constraint등을 설정하여 view를 꾸미는 영역

  • Constraint
    autolayout에서 width, height, horizontal, vertical 등을 통해 view를 정리하는 것

학습 목표

  1. Frame 기반 레이아웃과 AutoLayout의 차이점에 대해 이해한다.
  2. Autolayout의 주요 속성에 대해 이해한다.
  3. Autolayout으로 비율코딩을 하는 방법에 대해 이해한다.

🤔이것도 한 번 생각해봐요!

  • AutoLayout은 왜 필요할까요?

기기가 변경되거나, 화면이 회전되었을 때 view를 정돈시키기 위하여

  • Constraint의 요소는 어떤 것들이 있어요?
    width, height
    horizontal, vertical
    leading, trailing, top, bottom

  • Inspector 영역에는 어떤 것들 있나요?
    text 세부 설정
    background color, tint color
    constraint

  • SuperView vs SafyArea
    superView : 현재의 view를 가지는 parent view

safe area : 아이폰 상단과 하단의 바를 포함한 영역

iOS 3주차 워크북 (로그인 & 회원가입 화면 만들기)

🎯핵심 키워드

  • UIImageView.contentMode
  • textField.placeholder
  • layer
  • IBAction
  • IBOutlet
  • Gesture
  • 화면 전환
  • UINavigationController
  • 화면 생명 주기
  • StackView

학습 목표

  1. Autolayout으로 실제 프로덕트 레이아웃을 짜는 방법에 대해 이해한다.
  2. 주요 UI컴포넌트 (UIImageView, UITextField ..) 의 속성과 사용 방법에 대해 이해한다.
  3. IBOutlet, IBAction에 대해 이해한다.
  4. Gesture에 대해 이해한다.
  5. layer, cornerRadius 속성에 대해 이해하고 활용할 수 있다.
  6. UINavigationController에 대해 이해한다.
  7. UINavigationController를 통해 화면 전환 및 데이터 전달하는 방법에 대해 이해한다.

🤔이것도 한 번 생각해봐요!

  • contentMode에는 어떤 것들이 있을까요?

  • 반대로 contentMode가 있는 컴포넌트는 뭐가 있을까요?

    Hint. ContentMode는 컴포넌트를 구성하는 image를 보여주는 방식입니다.

  • 특정 컴포넌트를 layer를 사용해서 꾸며보세요 Ex. 테두리 만들기, 그림자 만들기 등

  • UIButtion, UITextField에 존재하는 IBAction이 존재합니다. 어떤 것들이 있나요?

  • Control키를 누르고 swift파일로 드래그 앤 드랍했더니 자동으로 IBOutlet이 생겼어요! 반대로는 불가능할까요? (swift 파일에 코드를 먼저 쓴다면?)

  • IBAction이 아니더라도 다른 컴포넌트들에게 Gesture를 통한 Event를 줄 수 있어요! 어떻게 하는 걸까요?

  • 화면 전환에는 어떤 방법들이 있나요?

  • 화면의 전환에도 애니메이션을 선택할 수 있다?! 다음 화면의 보여주는 방식도 선택할 수 있다?!

    Hint. OOOOViewController().~style

  • 화면 생명 주기를 한번 공부해보세요!

  • 화면 전환에서 FullScreen과 FormSheet의 차이는 뭘까요?

  • NavigationController는 대체 뭘까요? 구조를 찾아보세요!

  • StackView가 무엇인지 다시 한 번 생각해보세요!

  • 카카오톡 친구 뷰는 StackView로 만든 것일까요?(Y/N) 그 이유는요?

iOS 4주차 워크북 (TableView & CollectionView)

🎯핵심 키워드

프로토콜 지향 언어

필요한 부분만을 프로토콜로 분리하여 프로그래밍 하는 것
기능, 능력, 특징이 중심

ArrayList

순서가 있는 데이터의 모임
빈 엘리먼트는 허용하지 않는다.
처음, 끝, 중간에 엘리먼트를 추가/삭제 하는 기능이 있음

DataSource

ViewController에게 데이터를 전달해주는 객체

Delegate

기능을 다른 곳에서도 사용을 할 수 있게 만들어주는 객체

학습 목표

1. Protocol의 개념을 이해한다.

Tackable이라는 프로토콜의 정의한다.

protocol Talkable {
    var topic: String { get set }
    func talk(to: Self)
}

Tackable 프로토콜을 채택한 구조체를 정의한다.

struct Person: Talkable {
    var topic: String
    var name: String

    func talk(to: Person) {
        print("\(topic)에 대해 \(to.name)에게 이야기합니다")
    }
}

Person 구조체는 Talkable 프로토콜을 채택하고 있다. 프로토콜을 채택한다는 것은 프로토콜이 가지고 있는 내부 프로퍼티와 메소드를 반드시 구현해야한다는 것을 의미한다. Talkable을 채택한 Person 클래스는 talk(to:) 메소드를 사용할 수 있다.

프로토콜의 메소드 호출한다.

let elly = Person(topic: "Swift", name: "elly")
let coco = Person(topic: "Java", name: "Coco")

elly.talk(to: coco)
coco.talk(to: elly)

Person의 내부 코드를 알지 못 하더라도, Talkable을 채택하고 있으니 talk(to:) 메소드를 호출 하는 것이 가능하다.

출처

2. Datasource와 Delegate의 개념을 이해한다.

DataSource는 데이터를 받아 뷰를 그려주는 역할을 한다고 생각하면 됩니다.

너는 뭘 어떻게 보여줄거냐? 그것을 해주는것이 DataSource.

TableView를 예로 들자면, DataSource메소드로는, 

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: IndexPath) -> UITableViewCell // return a cell ie UITableViewCell
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int // return a number ie an Int
func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? // return the title ie a String

이런것들이 있습니다.

하지만 delegate는 어떤 행동에 대한 "동작"을 제시합니다. DataSource는 "보여주는" 것들 담당했다면, delegate는 사용자가 그 보이는 부분중 어떤것을 클릭하거나 어떤 행동을 했을 때, 그 행동에 대한 동작을 수행하게 됩니다.
역시 TableView로 예를 들자면, delegate메소드에는 

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: IndexPath)
func tableView(tableView: UITableView, willBeginEditingRowAtIndexPath indexPath: IndexPath)
func tableView(tableView: UITableView, willBeginEditingRowAtIndexPath indexPath: IndexPath)

이런것들이 있습니다. 이 row를 클릭하면 뭘 할래? 이런 것이죠.

출처

3. TableView와 CollectionView가 무엇이며, 언제 활용되는지 이해한다.

UIScrollView의 서브클래스로 무한한 양의(unbounded) 정보에 무한한 접근을 제공하기 위해 사용됩니다. 하지만 자료를 보여주는 방식에서 차이가 발생합니다.

Table View: 정보를 하나의 긴 리스트로 보여줍니다(섹션 분리는 가능합니다).
Collection View: 다양한 방식이 가능하지만 기본적으로 정보를 2D 포맷으로 보여줍니다. 컬렉션 뷰는 커스터마이징이 가능합니다.

결국 두 View의 차이는 하나는 행으로 나열하여 자료를 보여주는 것이고, 다른 하나는 2차원으로 놓여진 무작위의(arbitrary) 아이템이라는 것입니다.

출처

🤔이것도 한 번 생각해봐요!

  • 다시 한번 묻겠습니다. 카카오톡의 친구 뷰는 어떤 것으로 이루어져 있을까요? 그 이유는요?

  • 실습과 같이 A View에서 B View에 관여하는 방법은 Protocol뿐이 아닙니다! “Notification”이라는 키워드로 한번 찾아보고 공부해보세요!

  • 여러분들이 생각하시기에 Notification과 Protocol 중 어떤 것이 더 효율적인 것 같나요? 그 이유는요

iOS 5주차 워크북 (홈화면 만들기)

🎯핵심 키워드

TableView

iOS 프로그래밍에서 테이블 뷰(Table View)란 위의 그림처럼 목록이 있고 그 목록을 클릭할 수 있는 구성요소를 말합니다.

CollectionView

컬렉션 뷰(Collection View)란 위의 그림에서 볼 수 있듯이 테이블처럼 일정한 가로 세로 개수를 가진 목록 오브젝트를 뜻합니다.

Navigational controls that display in a bar along the top of the screen, usually in conjunction with a navigation controller.

BarButton

UIToolBar / UINavigationBar (backBarButtonItem, leftBarButtonItem, rightBarButtonItem 등) 에 배치할 수 있는 특수한 버튼 = Bar Button Item

학습 목표

  1. TableView, CollectionView의 차이점에 대해 이해한다.
  2. TableView, CollectionView를 상황에 맞게 구현할 수 있다.
  3. extension에 대해 이해한다.
  4. NavigationBar에 대해 이해한다.
  5. BarButton에 대해 이해하고 UI를 커스텀할 수 있다.
  6. BarButton에 액션을 연결할 수 있다.

🤔이것도 한 번 생각해봐요!

저희는 UIView로 상단 Bar를 꾸몄죠? NavigationBar로 한번 꾸며보세요!

UITableView와 UICollectionView에는 “ItemForRowat”, “numberofItemInSection” 말고도 다양한 메소드(함수)들이 존재합니다.어떤 것들이 있는 지 찾아보고 어떤 기능을 하는 것인지 생각해보세요!

numberOfRowsInSection

하나의 Section안의 row가 몇개인지를 return하는 메서드다.

cellForRowAt

UITableViewCell을 return하는 함수다.

heightForRowAt

row의 높이를 지정하는 메서드

다양한 앱들이 돈을 벌기 위해 광고를 사용하죠! 광고 뷰는 어떻게 구현되는 것일까요?

iOS 6주차 워크북 (마이페이지 만들기)

🎯핵심 키워드

HIG(Human Interface Guidelines)

UITabBarController

학습 목표

1. HIG란 무엇이며, 왜 사용하는지에 대해 이해한다.

Apple은 개발자 사이트에 Human Interface Guidelines라는 것을 제공한다. 아마 인간 친화적인 Interface를 구성하는 가이드라인을 제시한다는 의미로 이름을 이렇게 지은 것 같다.

이미지에서도 보이는 한 문장짜리 설명을 보면,

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

= Apple의 플랫폼과 원활하게 통합되는 훌륭한 앱을 디자인하기 위한 깊이 있는 정보와 UI 리소스를 얻어갈 수 있다

이 문장에서 HIG가 무엇을 위해 존재하는지 알 수 있을 것이다.

첫 번째는 designing great apps 다.
Apple이 제시하는 훌륭한 앱을 만들기 위한 포인트들을 담고 있다는 뜻이다. 조금 더 좋게 보이기 위한 UI에 대한 리소스들, 조금 더 좋은 사용성을 사용자에게 선사하기 위한 여러 정보를 가지고 있다. Apple은 이 HIG를 제공함으로써 앱 개발자들이 보다 좋은 앱을 만들 수 있을 것이라고 기대하는 것으로 보인다.

두 번째는 integrate seamlessly with Apple platforms이다.
Apple은 이 HIG를 통해 앱들이 iOS 환경과 통일성을 가질 수 있도록 하는 것이 목적이다. iOS 환경에 맞게 앱의 여러 디자인 요소를 맞추게 하고, 다른 iOS 앱들과 통일성 있는, 유저가 익숙해져있는 사용자 경험을 할 수 있도록 맞추기 위함이다.

내용 출처

2. UITabbarController에 대해 이해하고 구현할 수 있다.

tab bar와 다른 view controller가 들어있는 container

3. CollectionView를 활용하여 마이페이지 프로필 및 피드 레이아웃을 구현할 수 있다.

4. UICollectionViewDelegateFlowLayout을 통해 CollectionView Cell의 크기 및 간격을 커스텀할 수 있다.

🤔이것도 한 번 생각해봐요!

다양한 앱에서 TabBar를 그대로 사용하고 있지 않아요! TabBar 부분을 한번 커스텀해보세요!

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/64b6406b-f0b4-447d-a549-9566d5013927/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/64b6406b-f0b4-447d-a549-9566d5013927/Untitled.png)

iOS 7주차 워크북 (네트워크 개요)

🎯핵심 키워드

서버

클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램

요청을 받으면 데이터를 보내주는 기계

CocoaPods

라이브러리 의존성 관리 매니저
수많은 xcode 프로젝트 라이브러리들이 cocoapods으로 관리

라이브러리 다운

링크

Method(Get, Push, Put, Patch, Delete)

get : 데이터를 받음
post : 서버로 값을 보냄
put : 데이터의 전체를 교체
patch : 데이터의 일부를 교체
delete : 데이터 삭제

Query String

사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다.

http://host:port/path?**querystring**

Path Variable

1) Query string

/users?id=123
# Fetch a user who has id of 123

위에서 보는 것처럼 ? 뒤에 id란 변수에 값을 담아 백엔드에 전달하는 방식이 Query string이다. users에 담긴 정보 중 id 123번의 자료를 달라는 요청이다.

2) Path Variable

/users/123 
# Fetch a user who has id 123

위와 동일한 요청을 경로를 지정하여 요청할 수도 있는데 이것을 Path Variable이라고 한다.

Body

PostMan

개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼

Alamofire

HTTP 네트워킹을 하는데 자주 사용하게 되는 코드나 함수를 더 쉽게 사용할 수 있도록 모아놓은 것

학습 목표

  1. 서버란 무엇인지 이해한다.
  2. API의 개념에 대해 이해한다.
  3. 외부 라이브러리를 설치하는 방법에 대해 이해한다.
  4. Cocoapods에 대해 이해하고 활용할 수 있다.
  5. Alamofire가 어떤 라이브러리인지 이해한다.
  6. 서버와 통신하는 다양한 방법에 대해 이해한다. (HTTP Method, Query String, ...)
  7. Postman을 통해 API 명세서를 보고 API를 테스트할 수 있다.

🤔이것도 한 번 생각해봐요!

  • Alamofire말고 직접 서버를 연동하는 코드를 만들 수 있어요. 하지만 엄청 어려울 것입니다. 일단 그 전에 “DispatchQueue”에 대해 공부해보시죠!

작업 항목의 실행을 관리하는 클래스

서버에서 데이터를 받고 이미지, 동영상을 외부에서 다운로드 및 처리할 때 CPU 사용량이 많아 처리를 Main Thread가 아닌 별도의 Thread에서 처리한 뒤 Main Thread로 결과만을 전달하여 화면에 표시하도록 하여 CPU를 관리할 수 있습니다.

  • 서버 연동을 할 때 Alamofire 말고도 다른 라이브러리를 사용하기도 해요! 어떤 것들이 있을까요? (요즘 핫하다는 라이브러리도 있습니다. 뭘까요? Hint. M으로 시작하는 4글자 )

Moya 라이브러리

  • 로그인은 어떻게 되는 것일까요? 뭔가 그 유저만의 키들이 있어야할 것 같은데.... 서버에서 하는 방법을 공부해보세요! 첫 번째 자료는 아래 링크입니다!

[RC]6주차개념 - RestAPI / 로그인 유지방식 / Paging

  • 자동 로그인은 그럼 어떻게 구현하는 것일까요? “UserDefalut”에 대해 공부해보시죠!

기본 개체 저장
swift안에 있는 float, Int, double, Bool, URL 등 기본적으로 제공하는 자료구조와 NSData, NSString, NSNumber NS관련 자료구조 또한 저장이 가능해서 활용성이 높다.

  • Get, Push, Put, Patch, Delete 각각 어디에 사용할까요? 사용 예시를 생각해봅시다!

CRUD에서 조회는 GET, 등록은 POST, 수정은 PUT, 삭제는 DELETE

profile
shstl98
허쓸하는 좀비
이전 포스트

[만쥬네 동아리 가게] ToDoList (2) : DetailView, NavigationBar, tabBar

다음 포스트

[알고리즘] 백준 알고리즘 문제집

0개의 댓글