[iOS / Uikit] 네트워크 연결을 해보자! (Moya편)

 

iOS 프로젝트에서 네트워크 통신을 더 편하게 관리하기 위해 사용하는 Moya 라이브러리! 
해당 글은 함께 프로젝트를 진행하는 팀원들을 위해 작성되었습니다 ✌️

Moya가 모야? 🤷‍♀️

간단히 말해서… URLSession을 더 깔끔하고 구조적으로 쓰게 해주는 네트워크 추상화 라이브러리예요!
요청 만들기 / 응답 처리 / 에러 핸들링 / 로그 출력 같은 것들을 보기 좋고 일관성 있게 관리할 수 있어요.

 

그럼 이제부터 네트워크 세팅 구조를 하나씩 살펴볼까유? 👇

📌 1. BaseTargetType — 공통 설정 모아두기

//
//  BaseTargetType.swift
//

import Foundation
import Moya

protocol BaseTargetType: TargetType { }

extension BaseTargetType{

    var baseURL: URL {
        return URL(string:"<https://melon.dhxxn.dev>")!
    }

    var headers: [String : String]? {
        let header = [
            "Content-Type": "application/json"
        ]
        return header
    }

    var sampleData: Data {
        return Data()
    }
}

 

모든 API 요청의 기본 URL, 헤더, sampleData를 한 번에 정의해놓고 각 API enum이 요 프로토콜을 채택해서 사용합니다!

 

📌 2. GenericResponse — 모든 API 공통 응답 구조

//
//  GenericResponse.swift
//

import Foundation

struct GenericResponse<T: Decodable>: Decodable {
    let isSuccess: Bool
    let code: String 
    let message: String
    let result: T
}

 

우리 서버는 모든 응답이 이 구조로 오기 때문에 result 안에 우리가 원하는 실제 데이터가 들어 있어요.

 

📌 3. NetworkError — 에러 타입 정의

//
//  NetworkError.swift
//

import Foundation

public enum NetworkError: Error {
    case decoding
    case unauthorized
    case forbidden
    case notFound
    case serverError(String)
    case networkFail
    case unknown
}

코드가 길어지는 걸 방지하기 위해 자주 나오는 에러를 Enum으로 딱 정리해둔 구조예요.

로그 출력할때도 유용하게 쓰인답니당

📌 4. NetworkLogger — API 요청/응답 로그 출력

//
//  NetworkLogger.swift
//

import Foundation
import Moya

final class NetworkLogger: PluginType {
    
    // MARK: - API Calls
    
    func willSend(_ request: RequestType, target: TargetType) {
        guard let req = request.request else {
            print("❌ [REQUEST] Invalid request")
            return
        }
        
        print("\\n====== 📤 Request ======")
        print("➡️ URL: \\(req.url?.absoluteString ?? "nil")")
        print("➡️ METHOD: \\(req.httpMethod ?? "nil")")
        
        if let headers = req.allHTTPHeaderFields, !headers.isEmpty {
            print("➡️ HEADERS:")
            headers.forEach { key, value in
                print("   \\(key): \\(value)")
            }
        }
        
        if let body = req.httpBody,
           let pretty = prettyJSONString(from: body) {
            print("➡️ BODY:\\n\\(pretty)")
        }
        
        print("========================\\n")
    }
    
    func didReceive(_ result: Result<Response, MoyaError>, target: TargetType) {
        print("\\n====== 📥 Response ======")
        
        switch result {
        case .success(let response):
            print("⬅️ STATUS: \\(response.statusCode)")
            print("⬅️ URL: \\(response.request?.url?.absoluteString ?? "nil")")
            
            if let pretty = prettyJSONString(from: response.data) {
                print("⬅️ BODY:\\n\\(pretty)")
            } else {
                print("⬅️ BODY: (empty or non-readable)")
            }
            
        case .failure(let error):
            print("❌ ERROR:", error.localizedDescription)
            
            if let data = error.response?.data,
               let pretty = prettyJSONString(from: data) {
                print("❌ ERROR BODY:\\n\\(pretty)")
            }
        }
        
        print("========================\\n")
    }
    
    // MARK: - Private Methods
    private func prettyJSONString(from data: Data) -> String? {
        guard
            let object = try? JSONSerialization.jsonObject(with: data),
            let prettyData = try? JSONSerialization.data(withJSONObject: object, options: [.prettyPrinted]),
            let prettyString = String(data: prettyData, encoding: .utf8)
        else { return nil }
        
        return prettyString
    }
}

이렇게 하면 콘솔에서 아래처럼 가독성 좋은 네트워크 로그를 볼 수 있어요 👇

 

📌 5. NetworkProvider — 실제 요청을 담당하는 핵심 클래스

//
//  NetworkProvider.swift
//

import Foundation
import Moya

final class NetworkProvider<API: TargetType> {

    // MARK: - API Calls
    
    static func request<T: Decodable>(
        _ target: API,
        type: T.Type,
        completion: @escaping (Result<T, NetworkError>) -> Void
    ) {
        let provider = MoyaProvider<API>(plugins: [NetworkLogger()])

        provider.request(target) { result in
            switch result {

            case .success(let response):

                switch response.statusCode {
                case 200...299:
                    break
                case 401:
                    completion(.failure(.unauthorized))
                    return
                case 403:
                    completion(.failure(.forbidden))
                    return
                case 404:
                    completion(.failure(.notFound))
                    return
                case 500...599:
                    let msg = String(data: response.data, encoding: .utf8) ?? "Server Error"
                    completion(.failure(.serverError(msg)))
                    return
                default:
                    completion(.failure(.unknown))
                    return
                }

                do {
                    let decoded = try JSONDecoder().decode(GenericResponse<T>.self, from: response.data)
                    completion(.success(decoded.result))
                } catch {
                    completion(.failure(.decoding))
                }

            case .failure:
                completion(.failure(.networkFail))
            }
        }
    }
}

여기서 하는 일은 딱 두 가지:

1. MoyaProvider를 생성하고
2. 응답을 디코딩 → 성공/에러로 넘겨줌

네트워크 계층에서 가장 중요한 파일이고, 서비스 단에서는 이 Provider만 불러서 데이터 요청하면 끝이에요.

---

 

그래서 API 연결 어케 하는디요 ㅠㅠ…

 

ㄴ 라고 생각하실 여러분을 위한 가이드라인입니다!

차근차근 하나씩 알아봅시당 ㅋㅋ

---

 

서버 파트원이 제공해준 API 명세서나 Swagger를 통해 각 API의 path, method, request/response 구조를 먼저 확인해줍니다!

//
//  MixUpAPI.swift
//

import Foundation
import Moya

enum MixUpAPI {
    case fetchMixUp
}

extension MixUpAPI: BaseTargetType {

    var path: String {
        switch self {
        case .fetchMixUp:
            return "/api/v1/music/mixup"
        }
    }

    var method: Moya.Method {
        return .get
    }

    var task: Task {
        return .requestPlain
    }
}

 

여러 API가 섞여 있는 화면이라면… 절대 API 파일을 여러개 만들지 마..

대신 화면 전용 API enum 하나 만들고 → 그 안에서 필요한 API들을 case로 나눠서 관리해보세요!

아래는 예시 코드입니다!!!

//
//  HomeAPI.swift
//

import Foundation
import Moya

enum HomeAPI {
    case fetchBanner
    case fetchPopular
    case fetchLatest
    case fetchPersonalized(userId: Int)
}

extension HomeAPI: BaseTargetType {

    var path: String {
        switch self {
        case .fetchBanner:
            return "/api/v1/home/banner"
        case .fetchPopular:
            return "/api/v1/home/popular"
        case .fetchLatest:
            return "/api/v1/home/latest"
        case .fetchPersonalized(let userId):
            return "/api/v1/users/\\(userId)/personalized"
        }
    }

    var method: Moya.Method {
        switch self {
        case .fetchBanner, .fetchPopular, .fetchLatest, .fetchPersonalized:
            return .get
        }
    }

    var task: Task {
        switch self {
        case .fetchPersonalized:
            return .requestPlain
        default:
            return .requestPlain
        }
    }
}

 

이제는 아까 말한 DTO 작성하기~~ 명세보고 작성해주면 됩니다!

//
//  MixUpDTO.swift
//

import UIKit

struct MixUpDTO: Decodable {
    let id: Int
    let title: String
    let artistName: String
    let playCount: Int
    let country: String
    let imageUrl: String
}

 

그리고 이제 중요한 Service 파일입니다~!

이 친구는 말 그대로 "API 호출만 담당하는 로직"을 모아두는 곳이에요.

//
//  MixUpService.swift
//

import Foundation

final class MixUpService {
    
    func fetchSongs() async throws -> [MixUpDTO] {
        return try await withCheckedThrowingContinuation { continuation in

            NetworkProvider<MixUpAPI>.request(
                .fetchMixUp,
                type: [MixUpDTO].self
            ) { result in

                switch result {
                case .success(let data):
                    continuation.resume(returning: data)

                case .failure(let error):
                    continuation.resume(throwing: error)
                }
            }
        }
    }
}

 

예시코드가 쓰인 프로젝트에서는 MVC 패턴을 사용하는데요~ 

그래서 뷰컨에서는 UI 로직만 담당하고, 네트워크 통신은 전부 Service가 대신 처리해주고 있습니다!

이제 네트워크 폴더에서 구현할 파일들은 전부 구현했습니다…!!

다시 presentation 폴더의 VC로 돌아와볼까요?

뷰컨에 요 코드들을 추가해봅시닷

1) Service 선언 + 데이터 저장용 프로퍼티

private let service = MixUpService()

// 어떤 타입이든 OK (단일값 / 배열 / DTO 등)
private var data: [MixUpDTO] = []

데이터가 배열이 아닐 경우에는 이렇게 바꾸면 됩니다요

private var data: MixUpDetailDTO?   // 단일 객체
private var items: [HomeDTO] = []   // 여러 개
private var count: Int = 0          // 숫자일 수도 있음

2) API 호출 함수

private func loadData() {
    Task {
        do {
            let result = try await service.fetchSongs()

            // 1) 데이터 저장
            self.data = result

            // 2) UI 업데이트
            self.updateUI()

        } catch {
            print("❌ API Error:", error)
        }
    }
}

3) UI 데이터 바인딩 (API 연동 후)

API를 통해 데이터를 받아오면, 그 데이터를 UI에 바인딩해줘야 하겠죠?

UI 형태가 라벨 한두 개일 수도 있고, 컬렉션뷰나 테이블뷰처럼 리스트 UI일 수도 있습니다!

하나씩 케이스를 살펴봅시다~

1) 단일 데이터 바인딩

API에서 특정 아이템 하나만 받아오는 경우에는 요렇게 UI 요소에 직접 값을 넣어주면 됩니당

titleLabel.text = data.first?.title
thumbnailImageView.kf.setImage(
    with: URL(string: data.first?.imageUrl ?? "")
)

 

2) 컬렉션뷰에 바인딩

Uikit 프로젝트에서 자주 쓰이는 컬뷰!

얘는 API로 받아온 data 배열을 컬렉션뷰 셀에 매핑하는 방식을 씁니당~ 

컬렉션뷰의 핵심은 item → cell.configure() 흐름이에요!!

extension MixUpViewController: UICollectionViewDataSource {

    func collectionView(_ collectionView: UICollectionView,
                        numberOfItemsInSection section: Int) -> Int {
        return data.count       // 👉 API 응답 개수만큼 셀 생성
    }

    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath
    ) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(
            withReuseIdentifier: MixUpListViewCell.reuseIdentifier,
            for: indexPath
        ) as! MixUpListViewCell

        let item = data[indexPath.item]   // 👉 특정 데이터 선택

        // 👉 셀 내부로 데이터 전달(바인딩)
        cell.configure(
            title: item.title,
            artist: item.artistName,
            imageUrl: item.imageUrl
        )

        return cell
    }
}

 

3) 테이블뷰에 바인딩

테이블뷰도 컬렉션뷰와 흐름이 같습니다!

딱 하나!!!!! 인덱스 접근이 row라는 것만 달라요.

extension MixUpViewController: UITableViewDataSource {

    func tableView(_ tableView: UITableView,
                   numberOfRowsInSection section: Int) -> Int {
        return data.count       // 👉 서버에서 받은 데이터 개수
    }

    func tableView(_ tableView: UITableView,
                   cellForRowAt indexPath: IndexPath
    ) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(
            withIdentifier: MixUpCell.reuseIdentifier,
            for: indexPath
        ) as! MixUpCell

        let item = data[indexPath.row]    // 👉 row에 해당하는 데이터

        // 👉 셀 하나에 데이터 바인딩
        cell.configure(with: item)

        return cell
    }
}

 

 

이렇게 네트워크 연결에 대한 설명이 끝났습니다….

 

 

네트워크 연결 쉽다쉬워!!!!