[Udemy iOS & Swift Bootcamp] H4XOR News(List, ObservedObject, WKWebView)

Algolia Search's API 를 이용해서 Hacker News 사이트의 데이터를 iOS 앱에서 리스트와 웹뷰로 보여주자.

---

[Hacker News 사이트]

https://news.ycombinator.com/

Hacker News

[Algolia Search's API]

https://hn.algolia.com/api

HN Search powered by Algolia

---

1. Project 생성

H4XOR News 라는 이름으로 iOS 프로젝트를 생성해주자. SwiftUI 로 만들 것이다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
    	Text("Content")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ContentVIew.swift 파일의 기본 코드

 

 

2. List View, NavigationView 만들기

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            List {
                Text("Content")
                Text("Content")
                Text("Content")
            }.navigationTitle("H4XOR NEWS")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

List는 흰색 줄 리스트가 만들어지고

NavigationView는 리스트 위에 공간이 생긴다. 이 때 navigationTitle을 추가해주면 굵은 글씨로 제목처리 된다.

 

 

3. Post 객체 만들기

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            List {
                Text("Content")
                Text("Content")
                Text("Content")
            }.navigationTitle("H4XOR NEWS")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Post: Identifiable{
    let id: String
    let title: String
}

let posts = [
    Post(id: "1", title: "Hello"),
    Post(id: "2", title: "Bonjour"),
    Post(id: "3", title: "Hola")
]

 

Post 객체에 id와 title 속성을 추가했다.

 

Struct, Class 를 정의할 때 ID 값이 필요한 경우, Identifiable 프로토콜을 추가하면 ID 값에 기반하여 순서를 식별할 수 있다.

https://developer.apple.com/documentation/swift/identifiable

Identifiable | Apple Developer Documentation

Identifiable 프로토콜에서 ID를 제공하므로 id 값을 필수로 정의해줘야 한다.

즉 let id: String 구문이 없으면 에러난다.

 

 

4. List에 Identifiable 프로토콜을 적용한 Post 객체들 띄우기

 

1) List 생성 유형에서 Identifiable 객체를 사용하는 선언 버전을 선택한다.

 

2) 속성 채우기

속성으로 data: RandomAccessCollection 과 rowContent: (Identifiable) -> View 가 필요하다.

 

3) in 키워드 이용해서 리스트 반복문 설정하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            List(posts) { post in
                Text(post.title)
            }
            .navigationTitle("H4XOR NEWS")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Post: Identifiable{
    let id: String
    let title: String
}

let posts = [
    Post(id: "1", title: "Hello"),
    Post(id: "2", title: "Bonjour"),
    Post(id: "3", title: "Hola")
]

 

collection data에는 리스트명 posts 를 입력해주고, rowContent는 괄호를 닫고 in 키워드를 사용해서 반복문 형식으로 만들어주었다.

사실 이렇게 변형하는 부분은 완전히 와닿지는 않아서 계속 들여다봐야겠다.

 

 

5.  Algolia Search's API의 Json 데이터 가져오기 

https://hn.algolia.com/api

HN Search powered by Algolia

API Documentation을 보면 Json 데이터를 가져올 수 있는 URL 리스트들이 있다.

여기서 우선 첫 페이지의 모든 내용을 가져올 수 있는 http://hn.algolia.com/api/v1/search?tags=front_page URL을 이용해보자.

 

https://hn.algolia.com/api/v1/search?tags=front_page 가 전달하는 Json 데이터 구조는 아래와 같다.

데이터 구조 만들 때 사용해야 하니 한번 봐두자.

hits 리스트들이 데이터를 갖고 있고, hits 리스트 한개는 오른쪽과 같이 생겼다. title, url, created_at, objectID, points 등의 정보가 주어진다.

 

 

6. Json 데이터를 가져올 Models 클래스들 만들기

H4XOR 폴더에 Models 폴더를 만들고 그 안에 NetworkManager와 PostData swift 파일을 추가한다.

NetworkManager.swift 는 API 호출 코드를 담당하고, PostData.swift 는 Data 객체를 담당할 것이다.

 

import Foundation

struct Results: Decodable {
    let hits: [Post]
}

struct Post: Decodable, Identifiable {
    var id: String{
        return objectID
    }
    let objectID: String
    let points: Int
    let title: String
    let url: String?
}

위에서 ContentView.swift 에 정의한 Post 구조체를 지우고 PostData.swift 파일에 데이터를 재정의 해주자.

또한 Decodable 프로토콜로 Json 데이터를 바로 객체로 받아올 수 있게 해준다.

 

hits 라는 이름의 리스트에 Post 데이터가 있고, Post 데이터에서 사용할 objectID, points, title, url 을 선언해준다.

이 때, Identifiable 프로토콜을 사용하려면 id 를 정의해줘야하는데, objectID 와 내용이 겹치니까 id 속성을 objectID 값으로 바로 넣어주도록 위와 같은 구문을 사용했다.

 

* 뒤에서 실행할 때, url 이 null 이라는 에러가 뜨면 let url: String? 이렇게 optional 을 추가해주면 해결된다.

import Foundation

class NetworkManager{
    func fetchData(){
        if let url = URL(string: "http://hn.algolia.com/api/v1/search?tags=front_page"){
            let session = URLSession(configuration: .default)
            let task = session.dataTask(with: url) { (data, response, error) in
                if error == nil{
                    let decoder = JSONDecoder()
                    if let safeData = data {
                        do{
                            let results = try decoder.decode(Results.self, from: safeData)
                        } catch{
                            print(error)
                        }
                    }
                }
            }
            task.resume()
        }
    }
}

NetworkManager.swift 코드는 위와 같다. url, session, task 를 정의하고 json data를 decoder로 객체 형태로 저장한다.

safeData를 Results.self 객체로 변경하는 것.

 

 

7. JSON 데이터 화면에 뿌리기

1) NetworkManager 클래스에 ObservableObject 프로토콜 채택하기

import Foundation

class NetworkManager: ObservableObject{
    func fetchData(){
        if let url = URL(string: "http://hn.algolia.com/api/v1/search?tags=front_page"){
            let session = URLSession(configuration: .default)
            let task = session.dataTask(with: url) { (data, response, error) in
                if error == nil{
                    let decoder = JSONDecoder()
                    if let safeData = data {
                        do{
                            let results = try decoder.decode(Results.self, from: safeData)
                        } catch{
                            print(error)
                        }
                    }
                }
            }
            task.resume()
        }
    }
}

클래스에 ObservableObject 프로토콜을 채택하면 클래스의 인스턴스를 관찰하고 있다가 값이 변경되면 뷰를 업데이트 한다.

 

2) 변하는 변수에 @Published 키워드 붙여주기.

import Foundation

class NetworkManager: ObservableObject{
    
    @Published var posts = [Post]()
    
    func fetchData(){
        if let url = URL(string: "http://hn.algolia.com/api/v1/search?tags=front_page"){
            let session = URLSession(configuration: .default)
            let task = session.dataTask(with: url) { (data, response, error) in
                if error == nil{
                    let decoder = JSONDecoder()
                    if let safeData = data {
                        do{
                            let results = try decoder.decode(Results.self, from: safeData)
                            self.posts = results.hits
                        } catch{
                            print(error)
                        }
                    }
                }
            }
            task.resume()
        }
    }
}

posts 리스트 변수를 만들어서 results.hits 데이터를 받아올 때마다 post 객체를 변경한다.

그리고 @Published 키워드를 붙여주면 이 변수를 구독하는 객체들은 요 변수가 변할 때마다 자동으로 소식을 받을 수 있다.

 

https://developer.apple.com/documentation/combine/observableobject

ObservableObject | Apple Developer Documentation

https://developer.apple.com/documentation/combine/published

Published | Apple Developer Documentation

 

3) ContentView.swift 에서 posts 객체 구독하기

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var networkManager = NetworkManager()
    
    var body: some View {
        NavigationView{
            List(networkManager.posts) { post in
                Text(post.title)
            }
            .navigationTitle("H4XOR NEWS")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

//let posts = [
//    Post(id: "1", title: "Hello"),
//    Post(id: "2", title: "Bonjour"),
//    Post(id: "3", title: "Hola")
//]

@ObservedObject키워드를 붙인다. NetworkManager가 업데이트할 때 마다 트리거한다는 뜻이다.

List 속성인 data: RandomAccessCollection를 posts -> networkManager.posts 로 변경해준다.

 

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var networkManager = NetworkManager()
    
    var body: some View {
        NavigationView{
            List(networkManager.posts) { post in
                Text(post.title)
            }
            .navigationTitle("H4XOR NEWS")
        }
        .onAppear {
            self.networkManager.fetchData()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

.onAppear() 는 body view 가 화면에 나타났을 때 실행되는 함수이다.

navigatio view 호출 -> onAppear() 호출로 화면에 실질적으로 보여주는 코드이다.

폐쇄된 공간이라 newtworkManager 앞에 self 키워드를 붙여줘야 한다.

 

결과화면

 

4) 비동기 적용하기

import Foundation

class NetworkManager: ObservableObject{
    
    @Published var posts = [Post]()
    
    func fetchData(){
        if let url = URL(string: "http://hn.algolia.com/api/v1/search?tags=front_page"){
            let session = URLSession(configuration: .default)
            let task = session.dataTask(with: url) { (data, response, error) in
                if error == nil{
                    let decoder = JSONDecoder()
                    if let safeData = data {
                        do {
                            let results = try decoder.decode(Results.self, from: safeData)
                            DispatchQueue.main.async {
                                self.posts = results.hits
                            }
                        } catch {
                            print(error)
                        }
                    }
                }
            }
            task.resume()
        }
    }
}

주의할 점, @Published 를 사용할 때는 메인 스레드를 패치하도록 늘 확인해야 한다.

self.posts 에 값을 넣어주는 부분에 DisPatchQueue.main.async 코드로 감싸주자.

 

5) 게시글의 좋아요 수도 표시하기

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var networkManager = NetworkManager()
    
    var body: some View {
        NavigationView{
            List(networkManager.posts) { post in
                HStack{
                    Text(post.points)
                    Text(post.title)
                }
               
            }
            .navigationTitle("H4XOR NEWS")
        }
        .onAppear {
            self.networkManager.fetchData()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

8. 목록의 세부사항 뷰 만들기 & 데이터 가져오기

1) SwiftUI View 만들기

Views 폴더를 만들고 ContentView를 넣어준다. SwiftUI View 템플릿을 선택하여 DetailView를 만들어준다.

 

2) ContentView 에 NavigationLink 를 추가해준다.

리스트의 세부사항 페이지는 NavigationLink 로 만들 수 있다.

 

NavigationLink 선언 목록 중에서 destination 과 label 을 인자로 갖는 선언을 선택한다. destination view를 나타내는 navigation link 를 만드는 구문이다. destination에 목적지 뷰 이름을 적어주면 된다.

 

https://developer.apple.com/documentation/swiftui/navigationlink#Link-to-a-destination-view

NavigationLink | Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/navigationlink/init(destination:label:)-27n7s 

init(destination:label:) | Apple Developer Documentation

 

import SwiftUI

struct ContentView: View {
    
    @ObservedObject var networkManager = NetworkManager()
    
    var body: some View {
        NavigationView{
            List(networkManager.posts) { post in
                NavigationLink (
                    destination: DetailView(url: post.url)){
                        HStack {
                            Text(String(post.points))
                            Text(post.title)
                        }
                    }
                }
                .navigationTitle("H4XOR NEWS")
        }
        .onAppear {
            self.networkManager.fetchData()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

전체 코드는 위와 같다.

 

NavigationLink ( destination: DetailView(url: post.url)) { } 이렇게  url 을 DetailView 인자로 넣어서 사용하는데,

이렇게도 할 수 있다는거 기억하자. label 인자를 안쓰고 {} 로 끝낼 수 있는 듯.

 

메인 화면에 Navigation Link 가 생겼고, 누르니 Detail View 로 넘어간다.

 

9. Detail View 를 웹뷰로 표현하기

1) WebView 구조 만들기

import SwiftUI
import WebKit

struct DetailView: View {
    
    let url: String?
    
    var body: some View {
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView(url: "https://www.google.com")
    }
}

struct WebView : UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        <#code#>
    }
    func updateUIView(_ uiView: UIViewType, context: Context) {
        <#code#>
    }
}

WebKit를 import 해주고 UIViewRepresentable 프로토콜을 상속받은 WebView 구조체를 만들어주어야 한다.

UIViewRepresentable은 UIKit view를 나타내는 SwiftUIView를 만들어주는 프로토콜이다.

 

UIViewRepresentable 프로토콜의 필수 Delegate 함수는 makeUIView(context: Context)와 updateUIView(_ uiView: UIViewType, context: Context) 이다.

 

makeUIView 는 View 를 WebView로 만들어준다.

updateUIView 는 View 를 업데이트하는 함수이다.

 

2) DetailView 의 body 에서 WebView에 url 을 전달한다.

import SwiftUI

struct DetailView: View {
    
    let url: String?
    
    var body: some View {
        WebView(urlString: url)
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView(url: "https://www.google.com")
    }
}

 

3) DetailView가 준 url 을 urlString 변수로 받아서 화면에 뿌려준다.

struct WebView : UIViewRepresentable {
    let urlString: String?
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let safeString = urlString{
            if let url = URL(string: safeString){
                let request = URLRequest(url: url)
                uiView.load(request)
            }
        }
    }
}

 

urlString 이 있으면 URLRequst를 통해 화면을 load 해준다.

UIViewType 은 UIWebView 대신 WKWebView 를 사용해주자. 새로 나온 라이브러리이기도 하고 웹 페이지에서 할당되는 메모리를 앱과 별도의 스레드에서 관리하여 웹 페이지의 메모리가 커도 앱이 죽지 않는다.

 

4) 코드 리팩토링: 코드의 독립성과 유연성을 위해 WebView.swift 파일로 빼주기.

import Foundation
import WebKit
import SwiftUI

struct WebView : UIViewRepresentable {
    let urlString: String?
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let safeString = urlString{
            if let url = URL(string: safeString){
                let request = URLRequest(url: url)
                uiView.load(request)
            }
        }
    }
}

 

5) 결과화면. 끗.