DSC PNU #4 - 4주차 iOS 세션 노트

week4

DSC PNU 2기 iOS 세션 계획

 

DSC PNU #1 - iOS 세션 시작전 준비 (preparation before iOS Study)

DSC PNU #1 - 1주차 iOS 세션 노트

DSC PNU #2 - 2주차 iOS 세션 노트

이전까지 배운 내용

• 개발환경 세팅
• iOS 운영체제 특징
• Xcode 프로젝트 종류 및 생성 방법
• Xcode Single View app 프로젝트 기본 구성 파일
• info.plist
• Autolayout
• Hello world 앱
• 코드로 constraint 주는법
• 화면 전환 방법 : push, present
• iOS 아키텍쳐 패턴
• UITableView 사용법
• ViewController life cycle
• UILabel
• UIButton
• UITextfield
• UISegmentedControl
• UIAlertViewController
• UISlider
• UISwitch
• UIStepper
• ActivityIndicator
• UIPageControl

---

Cocoapod

 

코코아팟

• CocoaPods is a dependency manager for Swift and Objective-C Cocoa projects.
• It has over 27 thousand libraries and is used in over 1.6 million apps.
• CocoaPods can help you scale your projects elegantly.
• 라이브러리 의존성 관리 매니저
• 수많은 xcode 프로젝트 라이브러리들이 cocoapods으로 관리되어짐
• 안드로이드에서의 gradle과 같은 역할
• ios/mac app개발시 필수적으로 널리 이용됨

자주쓰는 라이브러리 소개

[SwiftyJson] : 스위프트에서 JSON 을 쉽게 다룰수 있는 기능이 구현된 라이브러리

SwiftyJSON/SwiftyJSON

 

[Kingfisher] : 웹 서버에 있는 이미지를 손쉽게 가져올 수 있고, 캐싱 등의 처리를 알아서 관리하주는 라이브러리

onevcat/Kingfisher

 

[SCAlertView]: 손쉽게 Alert 를 보여줄 수 있는 라이브러리

vikmeup/SCLAlertView-Swift

 

[Charts]: 차트를 손쉽게 그리고 관리할 수 있는 라이브러리

danielgindi/Charts

---

프로젝트에 코코아팟 적용시키기

1. 맥에 코코아팟을 설치한다.

	sudo gem install cocoapods

2. 만들어져있는 Xcode 프로젝트에 cocoapod를 적용한다.

//프로젝트 폴더로 이동한 뒤
pod init

pod init

Podfile

3. 만들어진 Podfile 에 쓸 라이브러리를 명시해준다.

 pod 'Alamofire', '~> 4.9.1'
 pod 'Kingfisher', '~> 5.0'
 pod 'SwiftyJSON'

4. Podfile 을 바탕으로 프로젝트에 필요한 라이브러리를 다운받는다.

pod install //또는
pod update

설치된다.

5. workspace 로 프로젝트를 연다.

프로젝트에 Pods 가 추가된 걸 볼 수 있다.

실습 - Alamofire + SwiftyJSON

[API 주소]

POSTMAN 으로 확인해볼 수 있다.

Import 해준다.

import Alamofire
import SwiftyJSON

다운로드 부분을 Alamofire와 SwiftyJSON으로 구현한다.

func downloadUser(){
        let url = "https://my.api.mockaroo.com/members_with_avatar.json?key=44ce18f0"
        Alamofire.request(url,method: .get).validate().responseJSON { (response) in
            switch response.result{
            case .success(let value):
                let json = JSON(value)
                print(json)
                break
            case .failure(let err):
                print(err)
                break
            }
        }
    }

데이터가 찍히는 걸 볼 수 있다.

 

해당 json 에서 필요한 이름과 job 만 뽑아서 ArrayList로 저장한다.

let json = JSON(value)
let list: Array<JSON> = json.arrayValue
for index in 0..<list.count{
          let item = list[index]
          let name = item["name"].stringValue
          let job = item["job"].stringValue
          let profile = FriendData(name,job)
          self.friendArrayList.append(profile)
}

 

 

만들어진 ArrayList를 UITableView 에 update 시켜준다.

self.friendListTableView.reloadData()

화면에 표시가 된다.

---

실습 - KingFisher

앞의 프로필 이미지도 나오게 해볼 것이다.

 

FriendData 에 이미지의 URL 을 담을 항목을 추가한다.

import Foundation

struct FriendData : Decodable {
    var name : String?
    var content : String?
    var imageURL : String?
    init (_ str : String, _ content : String, _ imageURL : String){
        self.name = str
        self.content = content
        self.imageURL = imageURL
    }
}

 

방금전 만들어준 ArrayList 에도 이미지 url 을 넣어준다.

 

let json = JSON(value)
let list: Array<JSON> = json.arrayValue
for index in 0..<list.count{
    let item = list[index]
    let name = item["name"].stringValue
    let job = item["job"].stringValue
    let imageURL = item["avatar"].stringValue
    let profile = FriendData(name,job,imageURL)
    self.friendArrayList.append(profile)
                }
print(self.friendArrayList)
self.friendListTableView.reloadData()

 

그리고 UITableVIewCell에서 이미지를 뿌려준다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FriendListTVC") as! FriendListTVC
        cell.selectionStyle = .none
        let item = friendArrayList[indexPath.row]
        cell.lbContent.text = item.content
        cell.lbName.text = item.name
        cell.imageView = //이미지 추가
        
        return cell
    }

 

url 만 가지고 이미지를 뿌려줄 때 킹피셔가 사용된다.

 

Kingfisher를 import 한다.

import Kingfisher

 

cell 의 imageView 에 이미지를 뿌린다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FriendListTVC") as! FriendListTVC
        cell.selectionStyle = .none
        let item = friendArrayList[indexPath.row]
        cell.lbContent.text = item.content
        cell.lbName.text = item.name
      
        let url = URL(string: item.imageURL!)
        cell.imageView?.kf.setImage(with: url)
        cell.imageView?.kf.setImage(with: url, placeholder: UIImage(named: "Image"),  completionHandler: { (result) in
            print("download done!")
        })
        return cell
    }

 

이미지 까지 잘 나온다.