Thor의 개발자 성장 일기

iOS Background Task 적용 ( 백그라운드에서 API 호출하기 )

Thor_yeom — Tue, 23 Jul 2024 20:08:52 +0900

안녕하세요!
오늘은 Background에서 API 호출 및 앱 갱신을 통해 사용자에게 지속적인 데이터를

제공하는 방법에 대해 알아 보겠습니다.

공식 예제를 통해 브레이크 포인트를 사용해서

어떻게 구성되어 있는지 확인해보는 것도 좋을 거 같습니다. 아래는 공식문서에 있는 예제입니다.

https://developer.apple.com/documentation/backgroundtasks/refreshing-and-maintaining-your-app-using-background-tasks

Refreshing and Maintaining Your App Using Background Tasks | Apple Developer Documentation

Use scheduled background tasks for refreshing your app content and for performing maintenance.

developer.apple.com

자. 그럼 본격적으로 시작하겠습니다. Background Task에는 BGAppRefreshTask와 BGProcessingTask가 있습니다.

BGAppRefreshTask와 BGProcessingTask 모두 동일하게 백그라운드에서 작업을 처리 하긴 하지만

가장 큰 차이점은 시간에 있습니다.

30초 정도 걸리는 작업은 BGAppRefreshTask을 사용하고
그 이상 걸리는 작업( 대용량 파일 업로드/다운로드, 데이터베이스 유지관리, 백그라운드에서 실행 ) 할때 BGProcessingTask를 실행합니다.

이번 포스팅에서는 BGAppRefreshTask을 중점적으로 다루겠습니다

Background Task를 적용하면서 느낀점은 크게

등록
스케쥴링
실행
완료

이러한 과정을 거쳐서 Background에서 Task가 작동 된다는 것입니다.

더욱 자세한 내용은 순서에 맞게 진행하면서 설명드리겠습니다.

등록

1. background Mode 설정 및 Info.plist 설정

Info.plist에서 Source Code를 통해 추가해 줄 수 있습니다.

대체적으로 item 0에는 Bundle에 .refresh를 붙이는 편임 ( 하지만 예제이기 때문에 example.com으로 함 )

<key>BGTaskSchedulerPermittedIdentifiers</key>
	<array>
	<string>example.com</string>
	</array>

여기까지 셋팅이 됐으면 AppDelegate에서 Baground Task를 적용합니다.

import와 앱이 시작 되었을때 Background에서 Task가 호출될 수 있게 등록(register)을 합니다.

스케쥴링

스케쥴링은 언제 Background Task를 실행하는지를 스케쥴( 시간 )을 조정하는 부분입니다.

하지만!! Background Task가 실행하는 것은 시스템에 의해 자동으로 실행 되기 때문에 사용자가 정할 순 없습니다. ( 애플 맘대루... )

공식문서 출처

AppDelegate에 추가로 scheduleAppRefresh()를 만들어 줍니다.

시스템에 의해 Background Task가 실행되면

try 문에 submit 부분이 실행됩니다.

백그라운드에서 시스템에 의해서 자동으로 실행된다면...
언제 되는지 계속 기다려야 하나요?

네니요. ( 그렇게 매정하진 않더라구요... 물론 debug 한정이지만...)

https://developer.apple.com/documentation/backgroundtasks/starting-and-terminating-tasks-during-development

Starting and Terminating Tasks During Development | Apple Developer Documentation

Use the debugger during development to start tasks and to terminate them before completion.

developer.apple.com

공식문서를 살펴볼게요

요약해서 말씀드리면

Background Tasks가 실행 될때까지 수 시간이 걸릴 수 있으니

일찍이 Background Tasks를 실행 할 수 있게 하는 LLDB 명령어가 있다!

단, debug 상태일만 사용해라

공식문서를 보면 해당 명령어가 있습니다.

e -l objc -- (void)[[BGTaskScheduler sharedScheduler] _simulateLaunchForTaskWithIdentifier:@"Info.plist에 적은 item 0 Bundle.refresh"]

어떻게 사용하는지는 실행을 하면서 보여드리겠습니다!

실행

직접적으로 Task가 실행되어 작업이 진행되는 부분입니다.

공식문서에 보면 OperationQueue를 사용하여 비동적으로 실행 수 있게 해주었습니다.

왜 OperationQueue를 사용하여
비동기 작업을 했을까?

너무 딥하게 들어가면 주제에서 벗어나기 때문에

제가 느꼈던 부분은

OperationQueue를 사용할때의 장점들 때문이라고 생각했습니다. 크게 3가지 정도 입니다.

작업을 취소하거나 중지할 수 있음
의존성 관리로 인해 순서대로 작업 할 수 있음 ex) 1번 끝나면 2번 실행
상태 모니터링을 통한 관리

OperationQueue가 DispatchQueue보다 유연하게 작업 관리가 가능하구나 라고만

알고 가시면 좋을거 같습니다

공식문서에 있는 코드를 거의 그대로 가져왔습니다.

백그라운드 상태에서 반복적으로 실행하기 위해

scheduleAppRefresh()를 추가하여 Background Tasks가 실행할때마다

다음 작업을 예약 합니다.

실행할 작업은
만들어 놓은 RefreshAppContentsOperation()를 실행합니다.

let operation = RefreshAppContentsOperation()

RefreshAppContentsOperation 클래스를 간단히 살펴보면

해당 백그라운드 실행 시간을 UserDefaults에 담아주고 저장하는 클래스 입니다.

import Foundation

class RefreshAppContentsOperation: Operation {
    override func main() {
        if isCancelled {
            return
        }
        
        // 현재 날짜를 UserDefaults에 저장하는 작업을 수행
        let date = Date()
        // UserDefault를 사용하여 add 및 save 
        TaskModel.shared.addTaskDate(date)
        
        // 작업 완료 시 로그 출력
        print("Background task executed and date saved at \(date)")
    }
}

class TaskModel {
    static let shared = TaskModel()
    
    private let userdefaultsKey = "TaskDates"
    
    private init () { }
    
    func addTaskDate(_ date: Date) {
        var dates = fetchTaskDates()
        dates.append(date)
        saveTaskDates(dates)
    }
    
    func fetchTaskDates() -> [Date] {
        let dateArray = UserDefaults.standard.array(forKey: userdefaultsKey) as? [Date] ?? []
        print("백그라운드에서 쌓인 date : \(dateArray)")
        return dateArray
    }
    
    private func saveTaskDates(_ dates: [Date]) {
        UserDefaults.standard.setValue(dates, forKey: userdefaultsKey)
    }
}

자 이렇게 되면 모든 준비가 끝났습니다.

어떻게 진행 되는지 순서도로 표현하자면

백그라운드 상태 진입 -> 스케쥴 실행 -> 등록한 Background Task 실행 -> HandleAppRefresh 실행 ( 작업 ) -> 다음 Background Task 예약 -> 작업 비동기적으로 실행 -> 완료

이렇게 하면 실행이 됩니다.!!! 끝!!

저희 한가지 잊은 사실이 있지 않으신가요?? ㅎㅎ

바로...

백그라운드 조기 실행하는 LLDB 명령어를 사용안했습니다..

물론 앱을 백그라운드 상태에 두고 Xcode 계속 열어두시면 print찍어 놓은 부분이

실행 될테지만... 언제 되냐고.... 퇴근 안하냐고...

자.!!

그래서 어디에서 LLDB를 명령어를 실행하면 좋냐!!

바로 백그라운드 상태에 진입했을 시점에 브레이크 포인트를 걸고

LLDB 명령어를 실행하면 됩니다.

단, 백구라운드 상태 진입하고 브레이크 포인트 걸자마자

바로 LLDB에 명령어 입력을...... 해도 되긴 하지만!

5분에서 10분정도 시간이 흐른뒤 LLDB 명령어를 적으면 더 극적으로 결과가 보이실 겁니다!!

모두 고생하셨습니다! 긴글 봐주셔서 감사합니다.

Custom SPM 제작기 part2.

Thor_yeom — Sun, 16 Jun 2024 18:38:23 +0900

바로 시작하겠습니다!

UIComponents 폴더 생성 -> BaseLabel 파일 생성

하지만 Import UIKit을 하는 순간 Error 발생

어떤 Error인지 확인해보니

UIKit is not available when building for macOS. Consider using #if canImport(UIKit)
to conditionally import this framework.

: UIKit이 macOS에서 사용할 수 없음을 의미

해결방법으로는 조건문을 설정해주면 됩니다.

# if canImport(UIKit) ~ #endif

#if canImport(UIKit)
import Foundation
import UIKit

open class BaseLabel: UILabel {
    public init() {
        super.init(frame: .zero)
        self.text = "ExampleLabel"
    }
    // add
    
    public required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
#endif

자 그렇다면 package.swift로 이동해서 마무리 지어 볼게요

.library로 UIComponents를 추가해주고

targets에도 만들어줄게요

프로젝트에 추가하게되면 이렇게 나옵니다.

SPM을 설치하고 적용해 볼게요

자동 완성으로 잘 적용되는 것을 볼 수 있습니다.

너무 쉽죠??

정리를 해보자면

폴더 생성 -> Base 파일 생성 -> package.swift 폴더 이동 -> products, targets에 만든 폴더명 추가

이렇게 구성이 됩니다.

custom SPM만 깔아도 SnapKit이나 Alamofire를 한번에 깔 수 있는 방법은 어떤게 있을까요?

package.swift 파일에 dependencies를 추가할게요

여기에는 자동으로 설치되는 라이브러리를 git 주소만 있으면 추가할 수 있어요

SnapKit을 예시를 들면 SnapKit GitHub에 들어가보면 SPM 설치하는 부분이 있어요

url을 복사해주세요

dependencies에 추가해줄게요

또한 CustomSPM을 설치하면 자동으로 SnapKit도 자동으로 설치 할 수 있데 dependence를 추가해 줄게요

자 이렇게 했는데... 기존 CustomSPM과 구분 짓기 위해 tag를 사용하여 버전 관리를 할 수 있어요
마치 SnapKit에서 exact: 5.0.1 처럼요

git tag // 현재 tag 버전 확인 

git tag 1.0.1 // tag Up 시키기
git add . // 모든 변경사항 올리기 
git commit -m "add version 1.0.1" // commit 메시지
git push origin main

이렇게 push 까지 맞췄다면 SPM이 적용된 프로젝트를 가서 확인해볼게요

음... 변한게 없네요... 분명 Snapkit을 존속 시켰는데 말이죠 ㅠㅠ

왜 아무런 변화가 없냐면 SPM은 업데이트가 되었는데

현재 프로젝트는 업데이트가 되기전 버전이에요 그래서 적용되지 않은 것이에요

일단 수동으로 SPM을 업데이트 해줄게요

Xcode -> File - > Packages를 보면 Update to Latest Package Versions

SPM을 업데이트 하게 되면 SnapKit이 설치되는 것을 볼 수 있어요

CustomSPM을 만들어 놓으면 불필요하게

프로젝트를 구성할때마다 Snapkit, alamofire, tabman 이런것들을 일일히 설치 안해도 되겠죠??

추후에는 현재는 CustomSPM이 업데이트 될때마다 프로젝트에서 수동으로 SPM을 업데이트 해주고 있는데,

CI / CD 중 CI를 사용하여 자동으로 관리 할 수 있게 해볼게요
고생하셨습니다!

Custom SPM 제작기 part 1.

Thor_yeom — Sun, 16 Jun 2024 16:43:41 +0900

안녕하세요! 입사한지 5개월된 따끈따끈 신입 개발자입니다.

오랜만에 블로그를 써서 감회가 새롭습니다. ㅎㅎ

이번 챕터는 회사에서 일하면서 UI를 구성할 때 편하게 적용 할 수 있는 Base UI와 다른 SPM을 같이 사용할 수 있는 SPM을 만들어 보겠습니다.

( UI를 구성할때마다 BaseLabel, BaseButton 만드는게 귀찮아요... ㅠ )

편한 말투로 시작하겠습니다! 그럼 시작!

집도를 시작한다.

Xcode를 사용하면서 SPM은 다들 사용해보셨죠?

전 주로 SnapKit, Alamofire, Firebase 을 사용하는데... 필요할때마다 일일히 설치를 하는게

은근 귀찮더라구요... ~~( 아니 이게 귀찮으면... )~~

한번에 설치하는 방법은 없을까?

Base가 되는 것들을 같이 추가하는 방법을 없을까?

에서 Custom SPM을 만들게 되었습니다.

혹자는 Custom Framework를 만들 수 있고, Cocoapods으로도 만들 수 있는데 왜 SPM으로 만들었냐 라고 하시는데...

SPM으로 만들었때의 장점이 있어요

장점

Xcode에 내장되어 있어서 프로젝트 설정, 종속성 관리하는데 용이
불필요한 의존성을 최소화하여 빌드 시간 단축 => 경량화
Git 기반 버전 관리 가능 => 버전 호환성 문제를 줄이고 코드 일관성 유지
자동 의존성 해결 => 의존성만 주입해주면 자동으로 설치 가능
빠른 업데이트 및 배포

프로젝트를 만들어 볼게요

Xcode -> Pakage -> 프로젝트 생성

프로젝트 명 설정

구성을 살펴보겠습니다

여기서 중요하니 집중해주세요

name : SPM을 설치하면 나오는 이름

ex) snapKit 부분을 말함

priducts 배열 안에 .library부분은 어떤 것을 설치 할지 선택 할 수 있게 나오는 부분

.library(name: Snapkit, target: [ ~ ],
.library(name: Snapkit-Dynamic, tartget: [ ~ ])

tartgets은 SPM을 어디에 적용할 지 target을 설정 할 수 있음

예를 들어 난 프로젝트와 test에도 spm을 적용하고 싶어라고 하면 이렇게 설정됨

package로 SPM을 만들면 test 파일도 만들어지므로 default로 되어있음

단 주의할 점은 target을 추가해주고 싶을때는 폴더를 만들어줘야함

해당 부분은 추후에 다시 설명해드릴게요

기본 설명은 끝났고

그럼 테스트를 해보겠습니다.

접근제어자와 static으로 Text를 만들어봤습니다.

해당 package를 만들었는데 다른 프로젝트에서 사용하려면 어떻게 해야될까요?

1. 만든 package를 Github에 올리기

Github에 올리는 방법은 많지만 Xcode를 활용하여 올려볼게요

다들 아시리라 믿고 다른 설명없이 사진으로만 대체할게요!

이렇게 Github에 올렸으면 해당 URL 주소를 확인 할 수 있어요

프로젝트 생성 -> SPM 적용

어때요 참 쉽죠?

사용하는 방법은... SPM을 사용하는거랑 동일합니다.

사용해보겠습니다

import UIKit
import CustomSPM // SPM import 시키기

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        Example_TextLabel.text // SPM에서 만들어 놓은 클래스 사용
    }


}

So~~~~~~~~ EASY

오늘은 간단하게 Custom SPM을 만드는 법을 설정해보았는데요. 다음 파트에서는
파일을 만들어서 관리하는 법과 다른 SPM 추가 및 업데이트에 대해 알아볼게요!

ViewController에 Tabman 넣는 방법 ( ContainerView 활용 )

Thor_yeom — Wed, 13 Dec 2023 00:40:42 +0900

사진과 보는것 같이 중간에 Tabman을 넣으려면 어떻게 해야할까?

가장 쉽고 따라 할 수 있는 방법을 알려드리겠습니다!! ㅎㅎ

1. 일단 Tabman 라이브러를 설치하고 Tabman 기본 구성을 따라 적습니다.

barItem은 index를 기준으로 커스텀하게 생성할 수 있어요

2. 여기서 가장 중요한 점은

변수로 설정한 baseView의 역할입니다.

역할은 Tabman의 버튼의 레이아웃을 설정하는 겁니다.

3. Tabman의 버튼을 설정합니다.

여기서 핵심은 .custom으로에 레이아웃 설정한 baseView가 들어간다는 겁니다.

이렇게 하면 기초적인 부분은 끝났습니다. 참 쉽죠?

한번 정리를 하자면

Tabman 라이브러리 설치 -> import -> baseView 생성 -> 레이아웃 조정 -> bar 설정 -> addBar에 설정한 baseView 적용

ViewController 중간에 배치하는 방법은?

1. 이렇게 만들어진 TabManVC를 만들려고하는 VC에 인스턴스를 만들어줍니다.

2. VC 자체를 레이아웃을 잡을 수 없으니 VC에서 UIView를 만들어주고, TabMan의 View를 넣어주는겁니다.

ViewDidload() 밖에서 만들어줘야 되는건 다들 아시죠?

ViewDidLoad() 내부

자 이렇게하면 containerView 안에 addSubView를 통해 TabmanVC의 view를 올려줍니다.

3. 마무리로 containerView의 레이아웃만 잡아주면 끝!

RxSwift flatMap vs map 차이

Thor_yeom — Fri, 17 Nov 2023 09:26:00 +0900

RxSwift를 사용할때 flatMap에 대해 어디까지 알고 계신가요?

이번 포스팅에서는 flatMap에 대해 뜯고 맛보고 즐겨보고 map과의 차이점에 대해서 알아보겠습니다.

그럼 시작 !!

하기에 앞서

일단! 간단히 map부터 보겠습니다.

저희가 알고 있던 map에 대해 예시를 통해 복습해보겠습니다.

let exampleInt = [1, 2, 3]

let exampleString = exampleInt.map { value -> String in
    return String(value)
} 

// ["1", "2", "3"]

이렇게 배열에서 하나씩 뽑아서 String으로 만든 다음 배열에 담는것이

map의 역할인데요

RxSwift에서도 똑같은 역할을 합니다.

예시 코드를 보겠습니다

현재 Observable.just(1)의 타입은 Observable<Int> 입니다. 여기서 map을 한다면 obser1은 어떤 타입이 될까요?

정답은 Observable<Strting>이 됩니다.

즉, return 값으로 나온 결과 값에 Observable이 추가로 붙는 겁니다.

그럼 예시를 들어볼까요??

현재 코드에서 obser의 값의 타입은 무엇일까요??

혹시 답이 틀리신 분들은 직접 만들어보시고 map에 다시한번 복습해보시길 바랍니다.!

flatMap을 알기전에 정말 알고 넘어가야 됩니다!

정답은 Observable<Observable<ValidateEmailResponse>>

다시 한번더 말씀 드리면

return 값으로 나온 결과 값에 Observable이 추가로 붙는 겁니다.

그렇다면 왜?? Observable이 추가로 붙는걸까??

아주 간단합니다. RxSwift에서 map의 역할을 그렇게 만들었기 때문입니다.

map의 타입을 보면 Return 값으로 Observable<Result>을 return 합니다.

자 그렇다면 flatMap은 어떻게 사용하는 걸까요??

제가 내린 결론 부터 말씀드리면

지정한 리턴값으로 커스텀하게 만들 수 있다.

엥? 이게 무슨 말이지?

예시 코드를 보면서 알아보겠습니다

일단 네트워크 통신할 때 flatMap을 사용하지 않을때 어떻게 RxSwift로 만들수 있을까요?

저는 버튼을 탭 했을때 네트워크 통신을 하려고 이렇게 구성했었습니다.

 /// 이메일 검증
        // 회원가입 할때 Email TextField에서 검증해야함
        validEmailBtn.rx.tap
            .bind(with: self) { owner, _ in
                APIManager.shared.requestIsValidateEmail(api: Router.valid(emial: "aas1234@sdsc1aa.com"))
                    .asDriver(onErrorJustReturn: ValidateEmailResponse(message: ""))
                    .drive(with: self) { owner, response in
                        dump(response)
                    }
                    .disposed(by: owner.disposeBag)
            }
            .disposed(by: disposeBag)

코드에 대해 뜯어보면

버튼 탭 -> 네트워크 통신 -> ( 에러 발생시 asDriver로 핸들링 ) -> drive를 통해 response ( 현재 코드에서는

ValidateEmailResponse) 방출 -> dispose -> dispose 이렇게 됩니다.

버튼 탭을 했을 떄도 dispose를 해줘야하고 API통신이 끝났을때도 dispose를 해주고 있습니다.

빌드를 해보면 동작하는데 문제가 되지 않습니다.

But dispose가 두번되기 때문에 문제가 생길 수 있는 확률이 있습니다.

또한 RxSwift 공식문서에서도 dispose를 두 번 쓰지 말라고 적혀있습니다.

그렇다면 버튼을 탭하고 네트워크 통신을 할때
dispose가 두번 쓰이는데 구현 할 수 있는 방법은 없을까??

여기서 나온것이 flatMap입니다.

물논! flatMap이 이렇게 나왔다는것은 없고... 뇌피셜입니다 하핫!

하지만 제가 프로젝트를 구현할때 이런 느낌으로 많이 사용했습니다

각설 하고 다시 본론으로 돌아오면

여타 블로그에서 보면

"평탄화 작업이다"라고 표현되는 부분이 있는데

왜 평탄화 작업이이라고 부르냐면

현재 코드에서의 두 개의 dispose를 한개의 dispose를 사용해서 구현 할 수 있습니다.

이제 코드를 보면서 지정한 커스텀 리턴값으로 반환 할 수 있다 에 대해서 알아 보겠습니다.

1. duplicatdTapped : 버튼을 터치했을때 타입 ControlProperty<Void>

2. withLatestFrom : 사용자가 적는 emailText를 나타냅니다. 타입은 ControlProperty<String>

자 그렇다면 현재 value의 타입은 ControlProperty<String> 이것이 되겠죠?

저는 controlProperty<String>값을 가지고 Observable<ValidateEmailResponse>로 만들고 싶습니다.

이럴때 flatMap을 사용합니다. flatMap의 정의에 대해 다시 한번 말씀드리면

지정한 리턴값으로 커스텀하게 만들 수 있다.

아니 그렇다면 map을 쓰면 어떻게 될까요??

저희가 지정한 return 값에 Observable이 감싸줘서 return이 됩니다...

여기가 이해되셨으면 다 이해하신겁니다!!!

정리를 해보자면

아! flatMap은 사용자가 지정한 return 값으로 그대로 나오고

map은 지정한 return 값에 Observable이 감싸줘서 나오는군아

여기까지는 이해 완료 ! 그렇다면 문제가 되었던 코드를 다시보겠습니다.

 /// 이메일 검증
        // 회원가입 할때 Email TextField에서 검증해야함
        validEmailBtn.rx.tap
            .bind(with: self) { owner, _ in
                APIManager.shared.requestIsValidateEmail(api: Router.valid(emial: "aas1234@sdsc1aa.com"))
                    .asDriver(onErrorJustReturn: ValidateEmailResponse(message: ""))
                    .drive(with: self) { owner, response in
                        dump(response)
                    }
                    .disposed(by: owner.disposeBag)
            }
            .disposed(by: disposeBag)

현재 코드에서 네트워크 통신하는 APIManager의 return 값은

Observable<ValidationResponse>입니다.

이것을 flatMap으로 바꿔보면 이렇게 바꿀 수 있습니다.

/// 이메일 검증
        //  회원가입 할때 Email TextField에서 검증해야함
        duplicateBtn.rx.tap
            .flatMap { touchEvent -> Observable<ValidateEmailResponse> in
                return APIManager.shared.requestIsValidateEmail(api: Router.valid(email: "aas1234@sdsc1aa.com"))
                
            }
            .bind(with: self) { owner, response in
               print(response)
            }
            .disposed(by: disposeBag)

자 그럼 위의 코드의 타입이 어떤 타입인지 확인 해보겠습니다.

이제 왜 flatMap을 사용하는지 아시겠죠?

이걸 꼭 아셔야 됩니다.

flatMap은 사용자가 지정한 return 값으로 방출함!!

즉, 기존 스트림를 가공해서 -> 새로운 스트림을 만든다.

위의 플로우로 봤을때는 이렇게 진행됩니다.

버튼 탭 -> flatMap -> ControlEvent<Void> -> 사용자가 만든 Return

flatMap에 대해 뜯어보겠습니다.

return 값을 보면 where이 보입니다.

" ~ 이러한 조건일때 -> Observable<Source.Element>로 return 해줘"

map과 비교해서 봐보겠습니다.

어떤점이 다른지 보이시나요??

map은 Return값을 Observable로 감싼다

flatMap은 조건을 만족하면 Observable<Source.Element>로 만들어준다.

왼 map 오 flatMap

그렇다면 코드에 적용해 보면서 map과 flatMap의 return 값을 비교해보겠습니다.

차이점이 보이시나요??

오늘 이렇게 map 과 flatMap에 대해 알아봤습니다.

이렇게 차이점을 확인해가니 왜 flatMap에 대해 쓰는지에 대해 바로 알 수 있었습니다.

소스를 던져주신 새싹 멘토님 ㅋㅋㅈ님께 이 영광을 돌리겠습니다 ^^

DiffableDataSource + SkeletonView 라이브러리 적용하기

Thor_yeom — Thu, 9 Nov 2023 17:41:15 +0900

SkeletionView를 적용하는 방법은 아래 링크를 통해서 확인 가능합니다.

https://github.com/Juanpe/SkeletonView

GitHub - Juanpe/SkeletonView: ☠️ An elegant way to show users that something is happening and also prepare them to which con

☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting - GitHub - Juanpe/SkeletonView: ☠️ An elegant way to show users that something ...

github.com

내가 원하는건 DiffableDataSource인데 어떻게 적용하지?

그렇게 해서 현재 앱 출시한 프로젝트에서 DiffableDataSource와 SkeletonView를 적용해보기로 했습니다.

View 전체에 적용하지는 못했고... Cell에만 적용해봤습니다. ( 어떻게 해야할지... )

1. 첫번째 방법 - 메서드 활용

Cell에만 적용할 것이기 때문에 Cell 에 import SkeletionView를 해주었고 공식문서에 나온대로 해당 View에

isSkeletonable을 true로 설정했습니다.

또한 Cell이 그려지기 전에 애니메이션을 적용하고 Cell이 그려졌을때는 애니메이션이 끝내는 코드를 작성했습니다.

ViewController에서 데이터를 전달해줍니다.

빌드를 해서 보면 SkeletonView가 적용하는 모습을 볼 수 있습니다.

2. 두번째 방법 - didSet 활용

Cell에 데이터가 전달되면 실시간으로 SkeletionView를 볼 수 있도록 코드를 개선해보았습니다.

현재는 configureUI 메서드로 데이터를 넘기고 있습니다. 실시간으로 반응을 할 수 있도록 didSet을 사용했습니다.

그래서 Cell에 data: ExampleModel? 변수를 만들어주고 didSet으로 configureUI 메서드를 호출했습니다

개선된 코드를 보겠습니다.

보여지는 Cell 부분에서 개선된 코드

ViewController에서 개선된 코드

빌드된 것을 보겠습니다.

현재 적용된 코드에서 가장 중요한 부분이 있습니다

Skeleton이 적용되는 시점을 데이터가 전달 될 때 먼저 적용을 해주는 겁니다 .

그 후 일정한 시간이 지난 후 hideSkeletion을 시켜줍니다.

앱 스토어 KO 언어 설정 방법

Thor_yeom — Tue, 31 Oct 2023 14:09:16 +0900

앱 커넥트에서 기본언어 한국어로 설정 했는데, 앱 스토어 EN으로 올라간적이 있어

설정 방법을 공유해보려고 합니다.

1. 첫번째 해당 xcode 파일의 오른쪽 클릭해서 패키지 내용 보기로 들어갑니다.

2. pbxproj 파일을 엽니다.

3. developmentRegion를 찾아서 en으로 되어 있는 부분을 ko로 변경해주고 닫을 닫아주면 됩니다.

4. Archive를 통해 업데이트를 합니다.

새싹 - 앱 출시 프로젝트 회고

Thor_yeom — Wed, 25 Oct 2023 01:17:10 +0900

새싹 과정 2개월차에 앱 출시 프로젝트를 진행하게 되었습니다.

2개월동안 정말 많은 것들을 배웠습니다.

네트워크(URLSesseion, Alamofire), DB(Realm), 다국어, UIButtonConfiguration, Delegate패턴, 싱글톤 패턴, AutoLayout, 값 전달 , CodeBase, ARC, MVC, MVVM, DiffableDataSource... 등등... (이왜진... 2개월 동안 정말 쉴 새없이 달려왔네요)

2개월이란 시간내에 단순히 지식을 전달하는 형식이 아니라 멘토님께서 정말 기초 개념부터 시작해서 빌드업으로 (진짜 빌드업이... 넘사벽임...갓잭) 비전공자들도 쉽게 이해 할 수 있게 ~~머리속에 때려 넣어주었고~~ 데일리 과제를 통해 복습을 하며 배운 기술을 직접 적용해보며 습득 할 수 있게 해주었습니다. (수업듣고 복습하고 데일리 과제하면... 보통 마무리 되는 시간은 새벽 1 ~ 2시였음...)

그렇게 담궈진 지식을 이제야 뽐낼 수 있는 앱 출시 프로젝트를 한다니 설레였고

기획을 수정하고 수정하고 기능 추가하고 수정하고 기능 추가하고... 그렇게 앱은 거대해져갔습니다. (이거... 한달만에 가능한거냐??)

막상 이터레이션(기간에 내에 구현 정도)과 공수산정(해당 기능에 대한 구현 시간)을 해보니... 한 달안에 할 수없을 정도로 기능이 많아져서

기능을 다시 빼서 공수산정을 다시 했습니다. 버전 1.0.0 에 꼭 들어가야할 핵심기능과 추후 업데이트 사항을 나누었고 우당탕탕 앱 만들기 시작하겠습니다!

앱 기획 배경

여러분들은 혹시 어렸을때 아파트 혹은 동네에서 아나바다 장터 열릴때면 신나서 이것저것 구경도 하고 먹을 걸 사먹었던 기억이 있으신가요? ( 피캬츄... 컵떡볶이...쥐포... 포켓몬 딱지.. ) 장터가 열리는 기간에는 동네 전체가 놀이터가 되었었죠? ㅎㅎ 이러한 장터가 열릴때면 동네의 모든 이웃들이 나와 이야기 보따리를 풀고 물건을 사고 팔면서 한국의 정과 이웃사촌의 정을 느낄 수 있었고, 동네 전체가 활기가 돌았습니다.

하지만 점차 개인주의로 사회가 발전해가면서 아나바다 장터도 없어지고 이웃들간의 교류가 없어지면서 이웃사촌이라는 개념도 없어지고... 이웃간의 정도 없어지면서 "1인분" 이라는 것에 중점이 되가는 사회에서 사람들간의 감정과 이야기가 오가는 곳이 어디에 있을까? 를 고민하다

전통시장을 떠 올리게 되었습니다.

혹시 여러분들은 현재 거주하는 곳에 전통시장이 어디에 있는지 아시나요? 더 나아가 오일장이라고 들어보셨나요?

또한 요즘 트렌드로 할매니얼( 할머니 + 밀레니얼 ) 이라고 불립니다. 전통 디저트에 관심이 높아면서 약과, 떡, 한과 등 많은 부분이 재조명받고 있습니다. 이렇게 다시금 전통 디저트가 재조명을 받으면서 전통시장에 대해 관심도 높아졌지만, 막상 내 근처 전통시장이 어딨는지 모르는 경우가 많고 이러한 전통시장 위치 찾기는 인터넷 홈페이지에 있어 불편한 부분이 있었습니다. 이렇게 만들게 된 앱이

저잣거리 앱입니다.

핵심 기능 보고 가실게요 ~

전국 전통시장 위치 및 지역별 필터링 기능
클러스터 어노테이션을 사용하여 어노테이션 그룹화 구현
커스텀 어노테이션 뷰 구현
Pin 선택했을때 해당 시장 정보 및 기록 가능
지도 축척에 따라 어노테이션 생성
Realm을 사용하여 데이터 저장

앱을 만들고 나서 느낀점 보고 가실게요~

본격적으로 앱을 만들기 시작하면서 공수산정을 평소 구현 시간의 2.5 ~ 3배를 정했습니다. 그 이유는 데일리 과제를 하면서 구현하는데만 집중했는데 이번에 앱을 만들면서 업데이트를 지속적으로 할 것이기 때문에 가독성과 리팩토링이 쉽게 구현하는것을 목표로 했습니다. 그렇기 때문에 한줄의 코드를 작성하더라도 "내가 한 달 후에 봐도 이해가능한 코드"를 작성하는데 힘썼습니다. ( 많이 노력했지만... 아직도 갈길이 멀다 ㅠㅠ )

그리고 이번 3기에는 오프라인과 온라인을 병행 했는데, 전 오프라인으로 매일 출근?했습니다. 오프라인에는 항상 멘토님들이 계셨고, 구현하려는 기능에 대해 5 ~ 7시간씩 붙잡고 있을때 멘토님께 피드백을 받을 수 있었고, 멘토님들이 업무를 보시다가 지나가시면서 "이렇게 해보는건 어떨까요?" 라는 소스를 던져주셔서 기능 구현하는데 정말 많은 도움이 되었습니다. Shout out Hue, Jack, Kokojong, Bran 그리고 팀원들!

( 앱의 전체적인 플로우를 짧은 시간에 캐치하시고 설명해주시는데... 저도 열심히 공부해서 그런 역할을 하고 싶었습니다 ㅎㅎ )

앱 출시하면서 cs수업과 git 수업도 진행했고 학생들이 과부화 걸리지 않게 짧은 시간에 때려 넣어주시고... 또한 앱 출시 기간에 수업시간을 오전 10시로 변경하여 학생들에게 조금이라도 더 쉴 수 있게 배려해주셨습니다. ( 어느새 배운 개념이 스며들어와 버렸다... )
늦은 새벽 시간까지 피드백을 주시고 누구보다 일찍 출근하시는 ( 새벽 5시 출근...Hue님, Jack님 그저 빛...) 멘토님들을 보면서... 진짜 아낌없이 주는 나무 같다고 느꼈습니다.

아쉬웠던점

2달간 정말 많은 기술을 짧은 시간에 배웠지만... 이번 앱 출시했을때 많이 활용하지 못한거 같아서 아쉬운점이 남았습니다. 특히 출시하기 전에 배운 DiffableDatasource와 CompositionalLayout을 시도했지만 제대로 활용하지 못해서 기존에 사용하던 UITableView와 UICollectionView를 사용했습니다. 그래서 지속적으로 부족한 부분을 공부해가면서 활용하지 못했던 기술을 업데이트 하면서 앱을 더욱 풍성하고 사용자가 사용하기 편한 앱으로 발전해나가도록 하겠습니다.

아래는 앱을 구현하면서 겪었던 트러블 슈팅입니다

트러블 슈팅

전통시장 API를 Realm에 저장할때 MainThread에서 작업이 이뤄졌을때 대략 1500개 가량의 데이터를 Realm에 저장하는데 걸리는 시간은 대략 9 ~ 11초 정도 걸렸고, 그동안 사용자의 터치 이벤트를 받을 수 없었음

해결 방법 : DispathGroup과 DispatchQueue.global()을 사용하여 데이터를 한번에 모으고 다른 쓰레드에서 저장하도록 구현

1. API 데이터를 DispathGroup으로 묶는 작업 - 공공데이터 포털에서 한번의 API 콜로 최대 100개까지밖에 얻을 수 없어서 총 16번의 반복을 거쳐 데이터 저장했음

class MarketAPIManager {
    static let shared = MarketAPIManager()
    
    private init() { }
    
    let realm = try! Realm()
    
    var pageCount = Array(1...16)
    
    let realmManager = RealmManager()
    
    var aa: [Item] = []
    
    var marketList: TraditionalMarket = TraditionalMarket(response: Response.init(body: Body.init(items: [], totalCount: "", numOfRows: "", pageNo: "")))
    
    let group = DispatchGroup()
    
    func request() {
        for page in pageCount {
            group.enter()
            NetworkManager.shared.request(api: .marketInfomation(page: "\(page)")) { [weak self] response in
                
                guard let self else { return }
                marketList.response.body.items.append(contentsOf:response)
                group.leave()
            }
        }
        
        group.notify(queue: DispatchQueue.main) { [weak self] in
            guard let self else { return }
            
            self.realmManager.addDatas(markets: self.marketList.response.body.items)
            print("마켓 이름들 : \(self.marketList.response.body.items.count)")
        }
    }
}

2. Realm이 DispatchQueue.global()을 사용해서 비동기로 저장

    func addDatas(markets: [Item]) {
        let latitudeZeroFilterdMarket = markets.filter { $0.latitude != ""}
        DispatchQueue.global().async {
            let realm = try! Realm()
            let traditionalMarkets = latitudeZeroFilterdMarket.map {
                TraditionalMarketRealm(marketName: $0.marketName, marketType: $0.marketType, loadNameAddress: $0.loadNameAddress, address: $0.address, marketOpenCycle: $0.marketOpenCycle, publicToilet: $0.publicToilet, latitude: $0.latitude, longitude: $0.longitude, popularProducts: $0.popularProducts, phoneNumber: $0.phoneNumber)
                
            }
            
            let allOfTraditionalMarket = traditionalMarkets + self.userDirectAddMarket()
            
            try! realm.write {
                realm.add(allOfTraditionalMarket)
            }
        }
        
    }

Realm은 무결성 및 일관성을 유지하기 위해 다른쓰레드에서 이벤트가 들어오는것을 지양하고 있습니다.

공식문서를 보면 DB에 락을 사용한다고 적혀있습니다.

하지만 이번 프로젝트의 경우 단지 저장만 하는 경우이기 때문에 비동기로 저장이 가능 했고, 비동기로 저장되는 동안 MainThread에서는 단지 Read만 하고 있기에 충돌 없이 적용 할 수 있었습니다.

TimeInterval을 사용해서 결과를 비교해보았습니다.

왼쪽 사진 비동기 작업 전, 오른쪽 사진 비동기 자겁 후

2023.10.30 수정 ---> Realm에 비동기 처리를 해주는 메서드가 있었습니다...

Realm 공식문서 출처

이걸 왜 이제야 알았는지... Realm에 비동기로 저장하려고 3일 꼬박 했었는데... 리팩토링한 코드입니다.

    func addDatas(markets: [Item]) {
        let latitudeZeroFilterdMarket = markets.filter { $0.latitude != ""}

        realm.writeAsync {
            let traditionalMarkets = latitudeZeroFilterdMarket.map {
                TraditionalMarketRealm(marketName: $0.marketName, marketType: $0.marketType, loadNameAddress: $0.loadNameAddress, address: $0.address, marketOpenCycle: $0.marketOpenCycle, publicToilet: $0.publicToilet, latitude: $0.latitude, longitude: $0.longitude, popularProducts: $0.popularProducts, phoneNumber: $0.phoneNumber)
                
            }
            
            let allOfTraditionalMarket = traditionalMarkets + self.userDirectAddMarket()
            
            self.realm.add(allOfTraditionalMarket)
        }
    }

MapViewController의 비대해진 코드량 -> CustomView를 만들고 Viewmodel 접목

MapViewController에 많은 기능이 있다보니 코드량이 700줄 정도였기에 리팩토링이 필요했습니다. CustomView에 CLLocation과 Mapkit를 코드 분리를 하였고, Viewmodel을 활용하여 가독성과 기능 분리에 했습니다.
CustomView로 리팩토링후 데이터 전달을 위해 delegate와 completion을 활용하여 코드의 가독성을 높였습니다.

Alamofire URLRequestConvertible를 활용한 네트워크 통신

공공데이터 포털 전통시장 API 와 네이버 이미지 API 를 활용하기 때문에 Network파일에 따로 처리를 해주었습니다. 코드의 간결함과 기능 분리를 위해 Router 패턴을 활용하여 코드 정리 했습니다. 그렇기에 Network 파일에는 문자열이 들어가지 않게 되었고, 가독성이 증가했습니다.

Router 파일의 일부분을 보여주자면

Enum으로 전통시장 API와 네이버 이미지 API를 구분하고 EndPoint와 Header, Parameter의 방식으로 설정했습니다.

Map의 축척에 따라 해당 영역에 포함된 Realm 데이터 필터링하기

map의 축척에 따라 해당 영역의 Realm 데이터만 불러오기 위해서는 일단 map의 최소 최대 span값을 구해야 했습니다. 현재 map의 보여지는 영역에서 상,하,좌,우 span 값을 구했습니다.

상, 하, 좌 , 우 값으로 나온 데이터를 기준으로 해당 값의 사이값에 있는 것들만 가져오기 위한 필터링은 Realm에서 제공해주는 filter메서드를 이용했습니다. Realm에서는 필터링을 할때 where 과 filter를 제공하는데 filter가 속도 측면에서 더 빠르기 때문에 사용했습니다.

Realm에서 filter를 사용하면 BETWEEN을 사용하여 Latitude의 상, 하 값 사이에 있는 Realm 데이터를 필터링 적용함

Realm을 사용시 이미지를 Documents에 저장할때 이미지 URL로 저장하는 방법은?

Thor_yeom — Wed, 6 Sep 2023 01:58:33 +0900

Realm을 사용시 이미지를 Documents에 저장할때 이미지 URL로 저장하는 방법은?

결론을 미리 말하자면

고유한 ID로 설정하자!!

경로와 jpg로 변환하는 함수를 만들고

    // MARK: - 도큐먼트 폴더에 이미지 파일 저장하는 메서드
    func saveImageFileToDocument(fileName: String, image: UIImage) {
        
        // 1. 도큐먼트 폴더 경로 찾기
        guard let documnentDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first else { return }
        // 2. 경로 찾기
        let fileUrl = documnentDirectory.appendingPathComponent(fileName)
        print("fileUrl",fileUrl)
        // 3. 이미지 변환
        guard let data = image.jpegData(compressionQuality: 0.5) else { return }
        
        // 4. 이미지 저장
        do {
            try data.write(to: fileUrl)
            print("document에 생성된 사진 주소 : \(data)")
        } catch {
            print(error)
        }
    }

대부분 이렇게 사용합니다.

여기서 의문이 하나 들었습니다.

고유한것만 들어가면 되는거 아니야?? 굳이 ID만 넣어야돼??

이러한 의문점과 호기심에서 시작한 포스팅입니다

~~(참 사서 고생한다 그쵸? ㅋㅋ)~~

그럼 시작하겠습니다.

Documents 파일에 이미지가 어떻게 저장되는지 부터 뜯어보겠습니다.

saveImageFileToDoucumnet(fileName: tasks._id, image: cell.bookImage.image!)메소드가 실행이되면

다음과 같이 Document 파일에 id.jpg 형식으로 저장이 됩니다.

그렇다면 고유한 ID 말고 임의의 값을 만들어서 넣게되면 어떻게 될까요??

네 저희가 정한 이름으로 저장은 되지만

saveImageFileToDocument 메소드를 호출하게 되면

새로운 이미지 파일이 생성되지 않고 기존 이미지에 덮어 씌어지게 됩니다.

여기까지는 다들 아시죠?

(영차!)

아 ~ 그래서 고유한 ID를 사용해서 겹치지 않게 저장하는거구나

자 그럼 여기서 기출변형 들어갑니다

고유한게 ID만 있는게 아닌데... 이미지의 주소값도 고유하니까 가능하지 않아?

그래서 해봤습니다.

selectedItem.thumbnail : 카카오톡 book url 입니다.
saveImageFileToDocument(fileName: "\(selectedItem.thumbnail).jpg", image: cell.bookImage.image!)

// 카카오톡 url 주소 : https://search1.kakaocdn.net/thumb/R120x174.q85/?fname=http%3A%2F%2Ft1.daumcdn.net%2Flbook%2Fimage%2F6092351%3Ftimestamp%3D20230905155030

에러 발생하고 Document 파일에 이미지는 추가되지 않았습니다.

에러를 해석해보면

주소 "http ~~" 가 존재하지 않아

엥? 이게 무슨일이죠?

분명 각 이미지마다 고유한 주소를 갖고 있는데 말이죠...

원인은!!

받아온 이미지 url ( 여기서는 카카오톡 book 이미지 url)에...

/ 가 있기 때문입니다.

이게 무슨 일이죠?

~~(오늘 포스팅 쉽지 않을거 같다...그 춋?)~~

파일 디렉토리는 파일을 읽을때 / 를 기준으로 인식하게 됩니다.

예시로 현재 프로젝트가 어디에 위치에 있는 확인해보겠습니다.

/ 를 기준으로 파일로 접근하는 것을 볼 수 있습니다.

자 그렇다면 컴파일 오류가 났던 부분을 다시 보겠습니다.

~ Documents/ 뒤로 보면 https:// 쏼라 쏼라 / 쏼 / ..../

/ 가 엄청 많이 있습니다.

디렉토리 : 어? /가 있네? 그럼 /를 기준으로 파일에 접근하자...

그렇다면... 받아온 이미지URL를 로직을 통해
/ 를 모두 제거하면 가능하지 않나요?

네 가능은 합니다만 그것은 독자분들께 양보겠습니다...

~~(절대 하기 싫어서 아님니다... 아닐게요...)~~

카카오 url에서 / 만 제거하는 방법은 무엇이 있을까요?

바로 replacingOccurrences 메소드를 이용하면 됩니다.

replacingOccurrences(of: , with: )

적용해보도록하죠

이렇게 Documents / 뒤로

/가 모두 빠진 것을 볼 수 있습니다

~~쉽고 간단한 ID를 쓰면... 번거로운 작업 안해도 되겠죠? ㅎㅎ~~

결론

FileManager는 디렉토리를 / 를 기준으로 인식하기 때문에

url에 /가 있으면 컴파일 에러가 발생하고 이미지가 Documents에 저장되지 않는다.

(심심하면 직접 해보세요...권장합니다 ㅎㅎ)

그렇다면 / 가 없으면 어떤것이든 되나요?
~~(너 참 끈질기구나...)~~

/ 만 없다면 무엇이든 이름을 정할 수 있습니다.

실헹을 해보면 새롭게 정의한 이름으로 만들어진것을 볼 수 있습니다.

물론... saveImageFileToDocument()메소드를 또 실행하면

고유하지 않기 때문에 파일이 덮어씌어 집니다.

아 ~ 카카오톡 이미지 url이 잘못된게 아니고

디렉토리 인식문제구나

네 맞습니다.

이대로 끝내면 재미없겠죠?

왜 그렇게 인식하는지 찾아보겠습니다.

바탕화면에 /test 파일명으로 만들어보겠습니다.

터미널로 현재 바탕화면에 있는 것들을 찍어보면

:test 라고 보입니다.

파일명을 /test라고 만들었는데... 어떻게 된 일까요??

애플에서는 파일명에 / 가 들어가 있으면 디렉토리 인식을 위해 : 으로 변환합니다.

그렇다면 이런 경우에는 어떻게 터미널에 표현 될까요?

\가 있기는 하지만 / 자리는 : 으로 대체되었습니다.

애플에서 정책적으로 설정을 해놨기 때문에

애플의 정책을 따르는 Xcode에서도 역시나 적용하게 됩니다.

오늘의 한줄 평 : 고유 ID를 사용하자...

이상 먼저해보고 대신해보는 아무 개발자 였습니다.

URLSession에서 Generic 사용하기

Thor_yeom — Fri, 1 Sep 2023 18:58:18 +0900

API 통신 하면서 여러 API를 불러오게 되면

각각 URLSession을 만들어 데이터를 불러와야 됐다...

그렇다면 한개의 URLSession만 만들어서 사용할 수 있는 방법은 없을까?

에서 출발한 포스팅입니다.

그럼 시작하겠습니다. 컬렉션 뷰를 사용해서 만들어보겠습니다

일단 VC를 깔끔하게 사용하기 위해서

VC, View, Cell을 분리해주었습니다.
( 배운거 사용하고 싶었어요...)

Cell을 먼저 만듭니다.

import UIKit
import SnapKit

class FirstCell : UICollectionViewCell {
    
    let imageView = {
        let image = UIImageView()
        image.backgroundColor = .gray
        image.contentMode = .scaleToFill
        return image
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configureView()
        setConstraints()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureView() {
       contentView.addSubview(imageView)
    }
    
    func setConstraints() {
        imageView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
    }
}

View를 만들어 줍니다.

class FirstView: UIView {
    
    lazy var collectionView = {
        let view = UICollectionView(frame: .zero, collectionViewLayout: setCollectionViewFlowLayout())
        view.register(FirstCell.self, forCellWithReuseIdentifier: String(describing: FirstCell.self))
        return view
    }()
    
    private func setCollectionViewFlowLayout() -> UICollectionViewFlowLayout {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        let spacing: CGFloat = 8
        let width = UIScreen.main.bounds.width - (spacing * 4)
        layout.itemSize = CGSize(width: width / 3, height: width / 3)
        layout.minimumLineSpacing = spacing
        layout.minimumInteritemSpacing = spacing
        layout.sectionInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
        return layout
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        configureView()
        setConstraints()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureView() {
        self.addSubview(collectionView)
    }
    
    func setConstraints() {
        collectionView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
    }
}

viewDidLoad()가 로드 되기 전에 loadView()에서 먼저 로드를 진행시킵니다.
- 왜냐하면 FirstVC의 RootView에 먼저 커스텀 FirstView를 적용하기 위해서 입니다. <- 시점의 차이

전체 코드 입니다.

//
//  ViewController.swift
//  URLSession+Generic
//
//  Created by 염성필 on 2023/09/01.
//

import UIKit

class FristViewController: UIViewController {
    
    let firstView = FirstView()
    
    override func loadView() {
        self.view = firstView
    }
    

    override func viewDidLoad() {
        super.viewDidLoad()
        configureView()
    }
    
    func configureView() {
        firstView.collectionView.dataSource = self
        firstView.collectionView.delegate = self
        firstView.collectionView.register(FirstCell.self, forCellWithReuseIdentifier: String(describing: FirstCell.self))
    }
}

extension FristViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: String(describing: FirstCell.self), for: indexPath) as? FirstCell else { return UICollectionViewCell() }
        return cell
    }
}

확실히 VC에 다 넣은것보다 간결해졌쥬?

시뮬레이터 콜렉션 뷰

그렇다면 이제 네트워크 통신을 위해

모델과 URLSesstion을 만들어 보겠습니다

첫번째로 모델 두개를 만들어 주겠습니다

unsplash 와 TMDB의 이미지 데이터 모델을 만들었습니다.

TMDBPhotoResult에 연산 프로퍼티로

따로 작성된 이유는TMDB에서는 이미지 query만 주기 때문에

baseURL을 추가해줬습니다.

일반적으로 API를 불러올 때 이렇게 작성합니다.

VC에 적용해보겠습니다

네 역시나 잘 나옵니다.

kingfisher를 사용하지 않고 직접적으로

Image에 비동기 작업을 적용해줬습니다.

여기까지는 어렵지 않게 다들 하셨죠?

밥 아저씨...

여기서 오늘의 본론이 나옵니다.

추가로 두번째 모델인 unsplash를 데이터 통신 하려면
NetworkManager에 또 다른 callRequest 함수를 만들어줘야 할까요?

A : 당연 빠따루이지... 말모!!

만약에

~~( 만약에 충 아니에요 ㅡ,ㅡ)~~

데이터 통신을 5개, 10개 해야된다면... 하나씩 다 만들어 줄건가요??

... ( 거 말씀이 너무 심한거 아니오)

해결 방법이 있습니다!

Generic에 대해 아시나요?

공식문서에 보면...

핵심 포인트가 보입니다.

플렉시블 하고 함수를 재사용 가능하게 사용할 수있는 코드

제네릭은 Swift의 아주 강려크한 특징이다.

네 그렇습니다. Generic을 사용해서 한번 적용해보겠습니다

혹시 Generic에 대해 모르시는 분들은 개발자들에게 한 줄기 빛이 되어 주시는 소들이님의 블로그를 참고해보시길 바랍니다.

https://babbab2.tistory.com/136

Swift) 제네릭(Generic) 정복하기

안녕하세요 :) 소들입니다! 오늘의 두 번째 포스팅은 Generic에 대한 것입니다! 범용 타입이라구 하죠!! 어렵지 않은 문법이라 호딱 끝내 봅시다 :)) 모든 포스팅은 편의 말투로 합니다~!! 1. Generic이

babbab2.tistory.com

자. 그렇다면 저희 프로젝트에 어떻게 적용해보면 좋을까요?

파라미터 앞에 <T: Codable>을 적용해주고 해당 모델이 들어갔던 자리에 T를 넣어주면 됩니다.

Generic을 사용하실때 이것만 기억하시면 됩니다.

T: placeHolder - 그냥 플레이스홀더 임...

<T: ~ > : ~ 에는 타입이 들어감

처음과 비교해보면 TMDB의 자료형은 Codable로 되어있습니다. 고로 TMDB(T) : Codable 와 같은 의미입니다.

그렇다면 어떻게 적용하면 될까요??

해석을 해보면 " Codable 타입인건 알겠는데 그래서 뭘 넣어줄건데? 그냥 response만 넣으면 끝이 아니잖아? "

~~(너가 generic을 선택한 결과물이다...견뎌라...)~~

자 그렇다면 어떻게 해줘야 할까요? 아주 쉽습니다.

TMDB의 자료형 Codable이었죠?

response의 자료형을 TMDB로 설정합니다.

그렇게 되면 response == TMDB와 같아집니다.

(와웅미...) 참 신기하죠? 역시 파워풀하네요

여기까지 EBS 수학 교재였다면...

주의 ❗️

지금부터 숨마쿰라우데 버젼 시작하겠습니다.

( 벌써...싫다..)

그렇다면... unsplash를 불러볼까요?

생각해야되는 부분이 제네릭으로 만든 함수를 보면 baseUrl을 받아와서

URLSession에 적용시켜 주니까 열거형을 만들어서 human Error를 최대한 없애줍니다.

첫번째로 열거형을 먼저 만들어줍니다.

파라미터에 열겨형을 추가해줍니다.

switch 문을 통해서 들어오는 파라미터의 값에 따라 다른 url이 할당 받을 수 있도록 합니다.

이렇게 Network를 만들어주고 호출해주면 됩니다.

참 쉽죠?

물론 unsplashList를 만들어줘야 되는 센스 다 아시죠?

var list: TMDB = TMDB(results: [])
var unsplashList: Photo = Photo(total: 0, total_pages: 0, results: [])

원하는 것만 보여주기 위해 주석 처리를 하면 됩니다.

자... 여기서 끝나면 아쉽겠죠?

(그...그만 이러다가 다 죽어 )

한번에 두 API를 불러봅시다.

어떻게 한 VC에서 두가지의 API를 보여줄 수 있을까요?

Collection Section 추가

현재까지는 한개의 section에서 해주었다면 section을 2개로 설정해줍니다.

그 다음은 section에 맞게 보여주고싶은 데이터를 나눠주기만 하면 됩니다.

   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: String(describing: FirstCell.self), for: indexPath) as? FirstCell else { return UICollectionViewCell() }
        
        
        if indexPath.section == 0 {
            let unsplashItem = unsplashList.results[indexPath.item].urls.thumb
            let unsplashurl = URL(string: unsplashItem)!
            // 비동기로 작업
            DispatchQueue.global().async {
                // 이미지 주소 Data화 시키기
                let data = try! Data(contentsOf: unsplashurl)
                
                // Main Thread에서 그려주기
                DispatchQueue.main.async {
                    // 데이터 통신 해서 image에 넣기
                    cell.imageView.image = UIImage(data: data)
                }
            }
        } else {
            let item = list.results[indexPath.item].imageUrl
            let url = URL(string: item)!
            // 비동기로 작업
            DispatchQueue.global().async {
                // 이미지 주소 Data화 시키기
                let data = try! Data(contentsOf: url)
                
                // Main Thread에서 그려주기
                DispatchQueue.main.async {
                    // 데이터 통신 해서 image에 넣기
                    cell.imageView.image = UIImage(data: data)
                }
            }
        }
        return cell
    }
    
}

흠... 코드가 조금 지저분한 느낌이 들죠? 리팩토링 해보겠습니다.

이렇게 줄여 볼 수 있겠네요

cellForRowAt 부분에 cell.setConfigure부분이 중복되긴 하네요...

여기도 한번 더 리팩토링 해보겠습니다.

~~( 적당히 해라... !!!)~~

section에 따라 들어오는 url을 담을 변수를 지정해줍니다.

section 별로 담긴 sectionImageurl을

마지막에 담아주기만 하면 끝!

Section별로 이미지가 다른것을 볼 수 있습니다.

이상 먼저해주고 대신해주는 아무개 발자였습니다. 감사합니다.