UITableView

여러 아이템을 리스트 형태로 보여주는 UIView를 의미합니다.

Recycle Cell

테이블 뷰는 Cell을 재활용 해서 화면에 띄웁니다 .화면에서 볼수 있는 Cell은 한정적이기 때문에 모든 Cell을 사용하는 것이 아닌 재활용하는 정책을 사용하는 것입니다.

예를 들면 :

• 5개의 Cell 을 화면에 표시하고
• 스크롤을 해서 맨 위에 1번 Cell이 안보이게 되었고 6번 Cell을 보여줘야 한다면
• 1번 Cell을 재활용 해서 6번 Cell을 보여주게 됩니다.

프로토콜

화면에 리스트를 보여주기 위해서 몇가지 정보가 필요합니다.

• 테이블뷰 셀 몇개?
• 테이블 뷰 어떻게 보여주지?
• 테이블 뷰 클릭하면 어떡해야하지?
• …

모든 정보를 명시해야 하는 것은 아니지만 필수적으로 테이블 뷰 셀을 몇개 보여줄지랑 테이블 뷰를 어떻게 보여줄지는 정해야 합니다. 프로토콜을 구현하는 방식으로 기능을 구현할 수 있습니다.

UITableViewDataSource

데이터에 관련된 프로토콜로서 테이블뷰의 셀은 몇개인지, 테이블 뷰를 어떻게 보여줄지? 등의 작업을 여기서 정의합니다.

UITableViewDelegate

테이블 뷰 동작에 관련된 프로토콜로서 테이블 뷰를 클릭하면 어떡해 작동할지 등의 작업을 여기서 정의합니다.

GCD

Grand Central Patch 의 약자이다.

어떤 처리해야할 일을 GCD의 넘기면 GCD는 FIFO 정책을 수용하는 queue에 담고 시스템에 의해 안전하게 실행 될 수 있도록 한다.

GCD 에서 사용하는 큐를 DispatchQueue 라고 한다.

타입

1. Main Queue
   1. 메인 쓰레드에서 작동하는 큐, UI 작업이나 사용자 언터렉션을 여기서 처리한다.
2. Global Queue
   1. 시스템에 의해 관리되는 큐
   2. QoS(Quality of Service) 에 의해서 처리할 작업의 순서가 정해짐
      1. userInteractive : 바로 수행되어야 할 작업, 급한 것
      2. userInitiated : 사용자의 결과를 기다리는 것, 거의 바로 수행되어야 할 것
      3. default
      4. unility : 무거운 작업. 네트워킹이나 파일 불러오기
      5. background : 사용자에게 당장 인식 될 필요가 없는 작업
3. Custom Queue
   1. 개발자가 직접 생성한 큐

Sync & Async

Async : 비동기 실행으로서 앞에 결과가 끝나기도 전에 뒤에 결과가 실행됨. QoS 에 의해 우선순위가 정해짐

Sync : 동기 실행은 앞에 작업이 끝나야 뒤에 적힌 코드가 실행됨.

OAuth2.0

용어 정리

• client: 사용하는 앱, 만들고 있는 서비스를 의미한다.
• Resource Owner : 리소스를 가지고 있는 오너로서 사용자의 해당한다.
• Resource Server: 사용자의 정보를 가져올 Server를 의미한다. gihub, facebook, google 등이 될 수 있다.
• Client ID: 클라이언트를 식별할 수 있는 아이디이다.
• Client Secret : 클라아인트 비밀번호이다. 절대로 외부에 노출되면 안되는 정보이다.
• Authorized redirect URLs : Resrouce Server가 권한을 부여하는 과정에서 Authorized Code를 전달해 주는데 전달할 주소이다.

등록

OAuth를 제공하는 Resource Server 에서 프로젝트를 만들어서 Client ID, Client Secret, Authrozied redirect URLs 설정한다.

클라이언트에서 환경 변수 등으로 Client ID, Client Secret 을 저장한다.

Resource Owner 승인

• Resource Server를 통해 로그인할 수 있는 화면을 구성하거나 API를 구현한다.
• Resource Server로 요청을 보내면 되는데, [https://resource.server/?client_id=1&scope=<기능들>&&redirect_uir=<RedirectURI>](https://resource.server/?client_id=1&scope=<기능들>&&redirect_uir=<RedirectURI>) 이런 형태의 요청을 보내면 된다.
• Resource Server 에서 요청을 받으면 client_id 를 확인하고 등록된 아이디가 있다면 요청받은 redirect URL 과 등록된 redirect URL 이 맞는지 확인한다. 여기서 틀리면 종료된다.
• 그다음, 요청한 기능에 대한 허용 할 것인지에 화면을 Resource Server에서 보여준다.
• Resource Owner 가 승인하면 Resource Server에 승인 했다는 정보를 전달하고 Server는 Owner에 id 와 기능 scope 를 저장한다.

Resource Server 승인

• Server 는 authorization code 를 담아서 Owner 에게 전달한다. 이때 헤더에 Location을 추가해서 응답할때에는 Client로 리다이렉트 할 수 있도록 한다. Location: [https://client/callback?code=3](https://client/callback?code=3)
• Client 는 콜백 주소를 통해서 authorization code 를 알 수 있게 된다.
• Client 는 Resouce Server에게 직접 token을 요청하게 된다. 이때, authorization code, client_id, client_scret, redirect_uri 를 전달한다.
• Server는 정보를 모아서 client 와 user를 식별해서 access Token 을 발급및 응답한다.

API 사용

요청을 보낼때 Authorization: Bearer 설정하여 보낸다.

refresh token

리프레쉬 토큰을 이용해서 토큰이 만료 되었을때 다시 받아올 수 있다.

• Resource Server 와 별개로 Authorization Server 를 두어서 Access Token과 Refresh Token 을 Client 에게 전달한다.
• 클라이언트는 Access Token을 이용해서 Resource Server에 자원을 흭득한다.
• Access Token이 만료되게 되면 Resource Server로 부터 Invalid Token Error를 받게된다.
• Client는 이때 Authorization Server로 부터 받은 Refresh Token을 이용해서 Access Token 을 요청하고 다시 받아온다. 처음부터 리소스 허가 요청 하는 과정을 생략할 수 있다.

백엔드-Authentication

• 인증이란? : you are who you say you are, 다양한 방법으로 인증 가능하다 통상적으로 password, id 로
  • 먼저 회원가입을 진행해서 서버에 id, passwrod 를 저장한다.
  • 클라이언트는 로그인 할때 회원가입한 id, password를 서버에 전송한다.
  • 어떻게 로그인 상태를 유지할 수 있을까?
• 세션과 쿠기 (서버에서 사용할 수 있는 전통적인 옵션- 어떻게 로그인 상태를 유지할지에 대한 방법)
  1. 세션
     • 서버에서 확인후 세션을 만든다 (userId, sessiontId, expiration) - Session DB에 저장 or 파일시스템이나 메모리도 될 수 있음
     • 쿠키에 HTTP Only로 sessiontId 정보를 전달함.
     • 다음 요청때마다 쿠키 정보를 전달해줌
     • 장점 : 브라우저에 전달만 하면 되서 간단하고, sessionId 만 전달하면되서 사용자의 정보를 전달하지 않아도 된다. HTTP Only를 사용하면 스크립트로 못읽기 때문에 보안상의 이점도 있다.
     • 단점 : Stateful 하기 때문에 다양한 서버들이 SettionDb를 읽어야 하고 많은 요청이 들어오게 된다. 내부적으로 네트워킹이 많아짐. 성능 하락
  2. JWT (Json Web Token)
     • 다음과 같은 정보를 JSON으로 만들고 토큰화해서 보낸다. header, payload, signature, 모든 정보는 인코딩해서 보내고 서버에서 secrete으로 사용하는 키도 인코딩해서 signature에 포함해서 보낸다.
     • 로그인 하면, 로그인 정보 + 만료 시간 등등 합쳐서 JWT를 만듦.
     • 클라이언트는 Header를 이용하여 모든 request마다 JWT를 포함해서 전달해 줌.
     • 서버는 JWT를 검증한 후에 데이터를 반환함.
     • 장점 : 서버에 State가 없다. 서버를 확장하거나 분산하기에 용이하다.
     • 단점 : JWT 자체가 단점이 될 수 있다. → 계속 JWT를 주고 받아야 한다. 만약 영원히 만료되지 않은 JWT를 헤커가 탈취한다면.. 사용할때 보안에 신경써야 한다.
• bcrypt 란? : 사용자 정보를 그대로 저장하는 것이 아니라 암호화 해서 저장하기 위해 사용함. → 암호화만 가능한데 (암호화 한것을 비교하는 것), salt 가 없다면 경우의 수로 암호화 해 보면서 유추할 수 있어서 salt를 포함하여 경우의 수를 늘림. 10~12 정도로 설정. 길어지면 cpu 부하 심해짐..
• JWT, 32 시크릿 키로 권고 됨. 한번 발행된 토근은 변경되면 안된다. → 만약 한버이라도 변경 한다면 최종적으로 붙은 signature도 변경되어서 verify시 오류 발생하고 누군가 변경한 토큰인지 확인 가능하다.
  • 만료될 수 있도록 만들어야 한다. → option으로 전달함. {expiresIn: 2} 이런식으로 → 2초 후에 만료

코로나 현황판 앱 만들기 Alamofier, Cocoapods

활용 기술

• 굿바이 코로나 19API
• Alamofier → HTTP 통신
• Cocoapods → 외부 라이브러리 설치

Alamofire 을 이용한 HTTP 통신

Swift 기반의 HTTP 네트워킹 라이브러리.

왜 사용하는가 ? 코드의 간소화, 가독성 높음, 여러기능을 직접 구축하지 않아도 쉽게 사용할 수 있음.

Axios 같은 느낌임.

코로나 19API

https://github.com/dhlife09/Corona-19-API?utm_source=keygen-email

Cocoapods

• sudo gem install cocoapods 을 설치하고 프로젝트 파일로 이동한 후에 pod init을 실행한다.
• 프로젝트 파일에 Podfile 이 생기고 필요한 라이브러리를 pod 'Alamofire' 와 같은 방식으로 추가한다.
• pod install 명령어를 통해 라이브러리를 섫치한다.
• .xcworkspace 파일을 열어서 설치한 라이브러리를 사용한다.

기타

• UITabelView 에서 Static Tabel View를 사용하면 이미 Cell에 갯수가 정해지기 때문에 Cell 을 아울랫 변수로 설정해서 값을 관리 할 수 있다.
• 비동기 작업을 함수 안에서 수행한다면 이스케이핑 클로저를 사용하여 함수가 반환된 후에도 실행되게 만들어야 한다. 왜냐면 함수가 반환되는 시점과 서버에서 응답을 받아오는 시점이 다르기 때문이다. 따라서 정의하는 클로저 앞에 @escaping 을 붙혀서 이스케이핑 클로저로 선언한다.
• Alamofire 는 URLSession 과 달리 UI 쓰레드에서 동작하기 때문에 따로 DispatchQueue 를 안만들어도 된다.

날씨앱 만들기

활용 기술

• Current Weather API
• URLSession → HTTp 통신

웹 통신과 Protocol

웹 통신에서 주로 HTTP 프로토콜을 사용한다. (요청과 응답으로 이루어진다)

계속 연결되지 않고 응답후에 연결을 종료한다.

header와 body로 패킷이 구성된다.

HTTP 메서드에 따라 다르게 동작한다.

• GET :서버에 리소스를 요청할때
• POST : 서버의 리소스를 생성할때
• PUT : 서버의 리소스 전체 수정할때
• PATCH: 서버의 리소스 일부를 수정할때
• DELETE : 서버의 리소스를 삭제할때
• HEAD : 서버의 정상 작동 여부를 확인할때
• OPTIONS : 클라이언트가 서버에서 해당 URL 이 어떤 메소드를 지워하는지 확인 할 때
• CONNECT: 클라이언트가 프록시를 통하여 서버와 SSL 통신을 하고자 할때 사용
• TRACE : 클라이언트와 서버간 통신 관리 및 디버깅을 할 때 사용

URLSession

특정한 Url을 이용하여 데이터를 다운로드하고 업로드하기 위한 API

• URLSeesionConfiguration - 인터턴스 생성
• URLSessionTask - 인스턴스
• Shared Session URLSession.shared() 공유 세션 싱글톤으로 사용 가능.
  • 맞춤 설정 x
• 기본세션 DafultSession, URLSession(configuration: .default),
  • 직접 캐시와 쿠기 인증등을 저장하고 설정할 수 있다.
  • 순차적으로 데이터를 처리하기 위해 delegate를 지정할 수 있다.
• 임시 세션 (Ephemeral Session) URLSession(configuration: .ephemeral)
  • 캐시 쿠기 사용자 정보 같은 정보를 디스크에 저장하지 않는다.
  • 메모리에 올려서 연결
• 백그라운드 세션 (Background Session) URLSession(configuration: .background)
  • 앱이 실행되지 않는 동안 백그라운드에서 실행

→ URLSeesionTask 이용하여 각 세션에서 작업을 추가할 수 있다.

• URLSessionDataTask
• URLSessionUploadTask
• URLSessionDownloadTask
• URLSessionStreamTask
• URLSessionWebSocketTask

라이프 사이클

1. Session Configuration을 결정하고, Session을 생성
2. 통신할 URL과 Request 객체를 설정
3. 사용할 Task를 결정하고 그에 맞는 Compeletion Handler나 Delegate 메소드를 작성
4. 해당 Task를 실행
5. Task 완료 후 Compeletion Handler 클로저가 호출됨.

기타

• Codable 자신을 변환하거나 외부타입으로 변환활수 있는 프로토콜, 외부타입 → JSON 과 같은 형태
  • 채택하면 decode incode 모두 가능하다. json.parse json.stringfy 와 비슷한 것
• 네트워크 작업은 main 쓰레드에서 동작하지 않으므로 네트워크 작업을 완료한 후에 결과를 띄우기 위해서 main 쓰레드에서 추가적인 작업을 해주어야 한다.

1
2
3
4

DispatchQueue.main.async {
        self?.weatherStackView.isHidden = false
        self?.configureView(weatherInfomation: weatherInformation)
      }

뽀모도로 타이머 만들기

활용 기술

• DispatchSourceTimer
• UIView Animation

DispatchSourceTimer

GCD : Grand Central Dispatch → 작업을 병렬적으로 진행하기 위해 제공하는 API이다.

DispathcSourceTimer는 GCD API 안에 존재한다.

uI 관련된 스레드는 main 쓰레드 에서 시작된다. GCD에서 main 쓰레드는 오직 1개만 가진다. 유저가 인터페이스에 접근하면 main 쓰레드에서 알수 있다.

timer를 선언하고 schedule과 eventHandler 를 정한다.

UIVewAnimation

1
2
3

UIView.animate(withDuration: 0.5, delay: 0, animations: {
          self.imagView.transform = CGAffineTransform(rotationAngle: .pi)
        })

UIView 에서 동작할 에니메이션을 설정할 수 있다.

일기장 앱

• UITabBarController
• UICollectionView
• NotificationCenter

UITabBarController

UITabBar : 앱에서 서로 다른 하우작업, 뷰, 모드 사이의 선택을 할 수 있도록, 탭바에 하나 혹은 하나 이상의 버튼을 보여주는 컨트롤

UITabBarContoller : 다중 선택 인터페이스를 관리하는 컨테이너 뷰 컨트롤러로, 선택에 따라 어떤 자식 뷰 컨트롤러를 보여줄 것인지가 결정 → UIViewController 를 상속 받아서 커스텀 뷰를 보여줄 수 있다.

UICollectionView

데이터 항목의 정렬된 컬렉션을 관리하고 커스텀한 레이아웃을 사용해 표시하는 객체

• Cell : 컬렉션 뷰의 콘텐츠를 표시
• Supplementary View : 섹션에 대한 정보를 표시
• Decoration View : 컬렉션 뷰에 대한 배경을 꾸밀 때 사용

UICollectionVIewLayout(배치), UICollectionVIewFlowLayout(플로우에 관한것)

UICollectionViewDataSource : 컬렉션 뷰로 보여지는 콘텐츠들을 관리하는 객체

UICollectionViewDelegate : 콘텐츠의 표현, 사용자와의 상호작용과 관련된 것들을 관리하는 객체

NotificatonCenter

데이터를 등록하면 NotificationCenter 를 구독하는 화면에서 데이터를 받아서 사용할 수 있다.

한마디로 이벤트 버스이고 구독하는 화면에서 옵저버를 이용하여 확인한다.

TodoList

활용 기술

• UITableView
• UIAlertController
• UserDefaults

UITableView

데이터를 목록 형태로 보여 줄 수 있는 가장 기본적인 UI 컴포넌트 → UIScrollVIew 를 상속받고 있어서 스크롤 가능하다.

• 여러개의 Cell을 가지고 있고 하나의 열과 여러 줄의 행을 지니고 있으며, 수직으로만 스크롤 가능하다.
• 센션을 이용해 행을 그룹화하여 콘텐츠를 좀 더 쉽게 탐색할 수 있다.
• 섹션의 헤더와 푸터에 View를 구성하여 추가적인 정보를 표시할 수 있다.

Delegate와 DataSource로 구성된다.

UITableViewDataSource : 테이블 뷰를 생성하고 수정하는데 필요한 정보를 테이블 뷰 객체에 제공, UITabelView 자체에서는 데이터를 관리하지 못한다.

UITableViewDelegate : 테이블 뷰의 시각적인 부분을 설정하고, 행의 액션 관리, 엑세서리 뷰 지원 그리고 테이블 뷰의 개별 행 편집을 도와줌

UIAlertController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@IBAction func tabBarAddButton(_ sender: UIBarButtonItem) {
    let alert = UIAlertController(title: "할일 등록", message: nil, preferredStyle: .alert)
    let registerButton = UIAlertAction(title: "등록", style: .default, handler: { [weak self] _ in
      guard let title =  alert.textFields?[0].text else { return }
      let task = Task(title: title, done: false)
      self?.tasks.append(task)
      self?.tableView.reloadData()
    })
    let cancleButton = UIAlertAction(title: "취소", style: .cancel, handler: nil)
    alert.addAction(cancleButton)
    alert.addAction(registerButton)
    alert.addTextField(configurationHandler: {textField in
      textField.placeholder = "할 일을 입력해주세요"
    })
    self.present(alert, animated: true, completion: nil)
    
  }

UIAlertContoller 로 alert 생성

UIAlertAction 으로 action button 정의

alert.addAction 으로 action button 추가하기 ,self 사용할떼 강한 순환참조 막기 위해서 weak 선언하기

alert.addTextField 로 alert에 textFiled 추가하가기

self.present 로 화면에 띄어주기

UserDefaults

런타임에 동작하여 기본 저장소에서 정보를 저장하거나 가져오는 기능을 한다. 키 값 형태로 값을 저장하고 싱글톤 패턴으로 구현되어서 앱내의 하나의 인스턴스만 존재한다.

LED

배울 기술

• UINavigationController
• 화면 전환 개념
• ViewController Life Cycle
• 화면간 데이터 전달 하는 방법
• 에셋 카탈로그

UINavigationController

• Content View Conroller : 화면을 구성하는 뷰를 직접 구현하고 관련된 이벤트를 처리하는 뷰 컨트롤러
• Container View Controller : 하나 이상의 Child View Conroller를 가지고 있다. 레이아웃하고, 화면 전환을 담당한다.
• 화면 구성과 이벤트 관리는 child view Controller에서 한다.
• 대표적으로 Navigation Controller 와 TabBar Controller가 있다.

계층 구조로 구성된 content를 순차적으로 보여주는 container view controller

Navigation Stack 을 가짐

Navigation Bar를 가짐. backItem ,topItem prompt, topItem Title, topItem rightBarButtonItem 등을 구성요소로 가진다.

화면 전환 개념

3가지 정도 사용됨.

• View Controller 에서 다른 View Controller를 호출하여 전환하기 (프레젠테이션 방법) → 비동기로 동작함 (화면을 덮고, 걷어내는 개념)
• Navigation Contoller 를 사용하여 화면 전환하기 ( stack 으로 push, pop 하는 방식)
• 화면 전환용 객체 세그웨이(Segueway)를 사용하여 화면 전환하기, strory board 이용 화면과 화면 사이에 SegueWay 객체를 둠

ViewContoller Life Cycle

• Appearing : 뷰가 화면에 나타나는 중
• Appeard: 뷰가 화면에 나타나는게 완료 된 상태
• Disappearing: 뷰가 화면에서 사라지는 중
• Disappeared: 뷰가 화면에서 사라진 상태

관련 메서드

viewDidLoad()

• 뷰 컨트롤러의 모든 뷰들이 메모리에 로드됐을 때 호출(메모리 처음 로드시 한번만 호출)
• 보통 딱 한번 호출될 행위들을 이 메소드 안에 정의 함
• 초기화나, 네트워크 호출등의 작업

viewWillAppear()

• 뷰가 뷰 계층에 추가 되고, 화면에 보이기 직전에 매 번 호출
• 다른 뷰로 이동했다가 다시 오면 다시 호출
• 뷰와 관련된 추가적인 초기화 작업을 여기서

viewDidAppear()

• 뷰가 뷰 계층의 추가된 후 호출
• 뷰를 나타낼때 필요한 추가 작업을 여기서(애니메이션 시작 작업 등..)

viewWillDisappear()

• 뷰 컨트롤러의 뷰가 뷰 계층에서 사라지기 전에 호출
• 작업한 내용을 되돌리거나, 데이터를 저장하는 작업

viewDidDisappear()

• 뷰 컨트롤러의 뷰가 뷰 계층에서 사라진 뒤에 호출
• 뷰가 사라지는 것과 관련된 추가 작업

화면간 데이터를 전달하는 방법

• viewController 프로퍼티를 생성하고 → viewContoroller를 인스턴스화 해서 사용하는 변수에 타입 케스팅을 한 다음 → 프로퍼티를 추가하는 형태로 데이터를 전달 할 수 있다.
• 반대로 뒤로 가기 할때나 pop 할때 전달하는 법 : delegate 패턴을 활용한다. (다른 객체에게 자신의 일을 위임하는 형태의 디자인 패턴)
• delegate 변수를 사용할때에는 week 키워드를 사용해서 강한 순환 참조를 막는다. → 데이터를 전달하는 곳에서 delegate 프로토콜을 만들고 전달받을 뷰에서 프로토콜을 준수하게 하면 전달하는 곳에서 메서드가 실행되게 할 수 있다.
• 리엑트에서 부모 요소에서 실행할 메서드를 자식에게 props로 전달해서 실행 시키는것과 비슷하다.
• 세그웨이를 사용할때에는 prepare 메서드를 사용해서 시스템에 의해서 호출될 수 있도록 해서 전달한다

에셋 카탈로그

Assets 폴더 안에 리소스를 추가할 수 있다. 리소스 추가 시에 1x 2x 3x 등의 크기에 이미지를 넣어주어야 하는데 이는 다양한 해상도의 깨지지 않는 이미지를 제공하기 위해서이다.

기타

• action 함수에서 sender 변수를 이용해서 어떤 인스턴스에서 발생한 액션인지 알 수 있다.