[ Project ] WishListApp #1 / URLSession을 이용해 데이터 불러오기

​​

 

 

 

 

 

안녕하세요!

오늘은 WishListApp의 첫 단추를 꿰매는 날이었어요!!

URLSession에 대한 충분한 공부를 한 후에 프로젝트를 시작하였습니다~!

그럼 저와 URLSession을 통한 데이터를 불러오는 과정을 함께 살펴봅시다~! ✨

 

 

 

URLSession

 

Data 구조

우선 URLSession을 하기 위해서는 Data 구조를 만들어야 합니다!

 

https://dummyjson.com/products

위의 json으로 이루어진 url 데이터를 아주 쉽게 Data 구조로 바꾸어주는 웹사이트가 있는데요!

저는 아래의 quicktype을 활용하여 JSON 데이터를 Swift 데이터 구조로 변환해주었어요!

https://app.quicktype.io/

Instantly parse JSON in any language | quicktype

 

 

JSON 데이터 구조 -> Swift 데이터 구조로 변환

[ JSON 데이터 구조 ]

{
  "products": [
    {
      "id": 1,
      "title": "iPhone 9",
      "description": "An apple mobile which is nothing like apple",
      "price": 549,
      "discountPercentage": 12.96,
      "rating": 4.69,
      "stock": 94,
      "brand": "Apple",
      "category": "smartphones",
      "thumbnail": "https://cdn.dummyjson.com/product-images/1/thumbnail.jpg",
      "images": [
        "https://cdn.dummyjson.com/product-images/1/1.jpg",
        "https://cdn.dummyjson.com/product-images/1/2.jpg",
        "https://cdn.dummyjson.com/product-images/1/3.jpg",
        "https://cdn.dummyjson.com/product-images/1/4.jpg",
        "https://cdn.dummyjson.com/product-images/1/thumbnail.jpg"
      ]
    },
    ...
}

 

[ Swift 데이터 구조 ]

import Foundation

// MARK: - Welcome
struct Welcome: Codable {
    let products: [Product]
    let total, skip, limit: Int
}

// MARK: - Product
struct Product: Codable {
    let id: Int
    let title, description: String
    let price: Int
    let discountPercentage, rating: Double
    let stock: Int
    let brand, category: String
    let thumbnail: String
    let images: [String]
}

 

 

 

https://dummyjson.com/products/{id값}

 

id값이 1에서 100사이의 랜덤한 값을 갖도록 데이터 구조를 짜주기 위해 Welcome 데이터 구조를 제외한 Product 데이터 구조만을 사용하였어요~!

 

import Foundation

// MARK: - Product
struct Product: Codable {
    let id: Int
    let title, description: String
    let price: Int
    let discountPercentage: Double
    let brand, category: String
    let thumbnail: String
    let images: [String]
}

 

 

 

URLSession을 통한 Data 요청

 

 

우선 Data를 관리해주는 ProductDataManager를 생성해주었습니다. 

 

struct ProductDataManager: Codable{
    
}

 

위의 구조체안에 JSON 데이터를 Swift 데이터로 바꾸어주는 함수를 만들어 주었어요.

 

func getProductData(id:Int, completion: @escaping (Product?) -> Void) {
       
}

 

지금 다루고 있는 URLSession에서의 dataTask 작업은 시간이 오래걸릴 수도 있으므로 자체적으로 비동기적으로 실행을 합니다. 비동기적으로 실행을 한다는 것은 해당 작업을 메인 쓰레드가 아닌 다른 쓰레드로 보내어 작업을 수행하는 것입니다. 비동기적으로 작업을 한다면 해당 작업이 끝나지 않더라도 다른 작업들을 동시에 수행할 수 있습니다.

 

따라서 비동기적으로 작업을 수행하면 코드가 순차적으로 실행되지 않기 때문에 해당 함수에서 값을 다른 변수에 저장하거나 return 하는 과정이 불가능합니다. 현재 작업이 끝나지 않더라도 다음 작업을 수행하기 때문에 해당 작업이 끝나는 시점과 값을 다른 변수에 저장하거나 return 하는 시점이 다른 것이죠! 그래서 URLSession에서 가져온 데이터를 저장하기 위해서는 콜백함수를 사용해야합니다.

 

guard let url = URL(string: "https://dummyjson.com/products/\(id)") else {
    print("Error: URL 주소를 불러오는데 실패했습니다.")
    completion(nil)
    return
}

var request = URLRequest(url: url)
request.httpMethod = "GET"

let session = URLSession.shared

session.dataTask(with: request) { data, response, error in
    guard error == nil else {
        print("Error: 실패")
        completion(nil)
        return
    }
    
    guard let response = response as? HTTPURLResponse, (200 ..< 299) ~= response.statusCode else {
        print("Error: 응답이 없습니다.")
        completion(nil)
        return
    }
    
    guard let safeData = data else {
        print("Error: 데이터를 가져오는데 실패하였습니다.")
        completion(nil)
        return
    }
    
    do {
        let decoder = JSONDecoder()
        let product = try decoder.decode(Product.self, from: safeData)
    
        completion(product)
    } catch {
        print("Error: 데이터를 decoder하는데에 실패하였습니다.")
    }
}.resume()

 

위의 함수 안에 넣어준 url 주소를 이용하여 URLSession에게 data를 요청하는 로직을 넣어주었습니다!

 

 

하나하나 코드를 뜯어봅시다.

1) URL 구조체 만들기

먼저 정보가 담긴 URL의 주소를 문자열로 받아와 URL 구조체를 만들어줍니다.

guard let url = URL(string: "https://dummyjson.com/products/\(id)") else {
    print("Error: URL 주소를 불러오는데 실패했습니다.")
    completion(nil)
    return
}

 

 

2) URLRequest 만들기

URLSession의 요청 메서드의 종류를 정하는  코드입니다!

var request = URLRequest(url: url)
request.httpMethod = "GET"

"GET" 자리에는 다른 요청 메서드를 쓸 수 있습니다.

• "POST" - 새로운 데이터를 쓰기
• "PUT" - 기존에 있던 데이터의 정보를 업데이트하기
• "DELETE" - 데이터를 삭제하기

사실 URLSession에는 Default 값으로 "GET" 요청 메서드가 들어가있어요! 그래서 "GET" 요청서를 쓰지 않아도 됩니다!

 

 

3) URLSession 만들기

let session = URLSession.shared

let session = URLSession(configuration: .default)

위의 두 가지 중 하나만 사용하셔도 됩니다. 같은 의미를 가지고 있는 코드에요!!

 

 

4) dataTask 및 resume

URLSession의 dataTask 함수를 통해 data를 불러오는 코드입니다!

session.dataTask(with: request) { data, response, error in
    guard error == nil else {
        print("Error: 실패")
        completion(nil)
        return
    }
    
    guard let response = response as? HTTPURLResponse, (200 ..< 299) ~= response.statusCode else {
        print("Error: 응답이 없습니다.")
        completion(nil)
        return
    }
    
    guard let safeData = data else {
        print("Error: 데이터를 가져오는데 실패하였습니다.")
        completion(nil)
        return
    }
}.resume()

 

data와 response, error를 옵셔널 바인딩하였어요!

이 때, dataTask라는 작업은 URLSession에 작업을 부여하는 과정으로 일시적으로 정지가 된 상태입니다! 그렇기 때문에 꼭 task를 시작한다는 resume() 작업 꼭 실행해주셔야해요!!! ⭐️ ( 저도 오늘 까먹고 안적었다가 error 났습니다 ㅎ )

 

 

이제 코드 처리 단계에서 해당 데이터를 사용하기 위해 Decoder 하는 과정이 필요합니다!

Decoder 로 데이터 변환하기

    do {
        let decoder = JSONDecoder()
        let product = try decoder.decode(Product.self, from: safeData)
    
        completion(product)
    } catch {
        print("Error: 데이터를 decoder하는데에 실패하였습니다.")
    }

 

데이터를 우리가 원하는 형태로 바꾸기 위해서는 JSONDecoder이라는 클래스를 사용해야합니다. JSONDecoder메서드는 에러처리가 가능한 메서드임으로 do-catch 문을 사용했습니다! JSONDecoder의 decode메서드를 사용하면 해당 클래스의 형태로 JSON데이터를 변경할 수 있어요!

 

decode( 변형하고 있은 형태.self, from: 원래의 데이터 )

이 때, .self는 클래스 그 자체 ( 붕어빵 틀 자체 )를 의미합니다.

 

여기서 주의할 점 JSONDecoder를 사용하기 위해서는 Swift Data가 채택해야할 프로토콜이 있어요!

• Decodable : 데이터를 코드로 변형하는 프로토콜
• Encodable : 구조체나 클래스를 데이터의 형태로 변형하는 프로토콜
• Codable : Decodable + Encodable 가지고 있는 프로토콜

위의 데이터에 Codable이라는 프로토콜을 채택한 것을 확인할 수 있습니다!

 

 

[ 전체 코드 ]

struct ProductDataManager: Codable{
    

    // MARK: - getProductData
    func getProductData(id:Int, completion: @escaping (Product?) -> Void) {
        
        guard let url = URL(string: "https://dummyjson.com/products/\(id)") else {
            print("Error: URL 주소를 불러오는데 실패했습니다.")
            completion(nil)
            return
        }
        
        var request = URLRequest(url: url)
        request.httpMethod = "GET"
        
        let session = URLSession.shared
        
        session.dataTask(with: request) { data, response, error in
            guard error == nil else {
                print("Error: 실패")
                completion(nil)
                return
            }
            
            guard let response = response as? HTTPURLResponse, (200 ..< 299) ~= response.statusCode else {
                print("Error: 응답이 없습니다.")
                completion(nil)
                return
            }
            
            guard let safeData = data else {
                print("Error: 데이터를 가져오는데 실패하였습니다.")
                completion(nil)
                return
            }
            
            do {
                let decoder = JSONDecoder()
                let product = try decoder.decode(Product.self, from: safeData)
            
                completion(product)
            } catch {
                print("Error: 데이터를 decoder하는데에 실패하였습니다.")
            }
        }.resume()
    }
    
}

 

 

 

이렇게 URLSession을 통한 데이터를 불러와 Swift 데이터 구조로 변환하는 것을 완료하였습니다!

이제 URLSession과 조금 친해진 느낌이 나네용!!ㅎㅎㅎ