yeahg-dev / chajabwa Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 130.42 MB

Find Apps in global App Store! 🌎

License: MIT License

Swift 100.00%

clean-architecture combine itunes-api mvvm realmswift

chajabwa's People

Contributors

Stargazers

Watchers

chajabwa's Issues

CountryCodeAPIService 응답 처리 로직 개선

🚨 문제 설명

CountryCodeAPIService에서 apikey오류 response도 status code: 200, Content-Type: xml 타입으로 응답
따라서 기존 APIService의 request를 요청하는 메서드에서 해당 오류를 걸러낼 수 없었고, 오류 처리를 할 수 없었음

extension APIService {
    
    func execute<T: APIRequest>(request: T) async throws -> T.APIResponse {
        guard let urlRequest = request.urlRequest else {
            throw APIError.invalidURL
        }
        
        let (data, response) = try await session.data(for: urlRequest)
        
        guard let response = response as? HTTPURLResponse,
              // 원하는 json데이터가 아닌 xml데이터가 200으로 도착
              (200...299).contains(response.statusCode) else {
            print("\(T.self) failed to receive success response(status code: 200-299)")
            throw APIError.HTTPResponseFailure
        }
        
        guard let parsedData: T.APIResponse = parse(response: data) else {
            print("parsing failed. type: \(T.APIResponse.Type.self) ")
            throw APIError.invalidParsedData
        }
        
        return parsedData
    }
}

✅ 해결 방법

문제 분석

response의 header의 Content-Type 필드 값을 조회하면 오류 체크 및 처리가 가능

해결 방법

Content-Type이 application/json;charset=UTF-8이 아니면 에러를 반환

struct CountryCodeAPIService: APIService {
    
    var session: URLSession = URLSession(configuration: .default)
    
    func requestAllCountryCode() async throws -> [CountryCode] {
        let request = CountryCodeListRequest(pageNo: 1, numOfRows: 240)
        let countryCodeList: CountryCodeList = try await getResponse(request: request)
        return countryCodeList.data
    }
    
    func getResponse<T: APIRequest>(request: T) async throws -> T.APIResponse {
        guard let urlRequest = request.urlRequest else {
            throw APIError.invalidURL
        }
        
        let (data, response) = try await session.data(for: urlRequest)
        
        guard let response = response as? HTTPURLResponse,
              (200...299).contains(response.statusCode) else {
            print("\(T.self) failed to receive success response(status code: 200-299)")
            throw APIError.HTTPResponseFailure
        }
        
        guard let contentType = response.value(forHTTPHeaderField: "Content-Type"),
        contentType == "application/json;charset=UTF-8" else {
            print("\(T.self) : response Content-Type is \(String(describing: response.value(forHTTPHeaderField: "Content-Type")))")
            throw APIError.HTTPResponseFailure
        }
        
        guard let parsedData: T.APIResponse = parse(response: data) else {
            print("parsing failed. type: \(T.APIResponse.Type.self) ")
            throw APIError.invalidParsedData
        }
        
        return parsedData
    }
    
}

기존 APIService의 getResponse메서드는 프로토콜 기본 구현으로 다른 Service에서도 사용되므로, 단일책임원칙과 개방폐쇄원칙을 위반한 코드임
따라서 getResponse를 프로토콜에 정의, 추상화하여 확장에 용이하도록 리팩터링
Combine 프레임워크 또한 불필요하게 APIService에 종속되어있으므로, CombineAPIService 프로토콜을 정의하여 역할을 분리

protocol APIService {
    
    var session: URLSession { get set }
    
    func getResponse<T: APIRequest>(request: T) async throws -> T.APIResponse
    
}

protocol CombineAPIService: APIService {
    
    func getResponse<T: APIRequest>(
        request: T)
    -> AnyPublisher<T.APIResponse, Error>
    
}

👩🏻‍💻결과와 피드백

APIService의 확장성 향상됨
불필요한 Combine을 import를 제거함으로써 최적화함

🚨 문제 설명

환경

Xcode 14.0
target iOS 15.5

문제

검색 결과 화면에서 searchBar를 탭하고 한 글자를 타이핑해야 최근 검색어로 전환되어 사용상의 불편함 야기
최근 검색어 화면에서 검색 기능 활성화 뷰(header)까지 스크롤 되지 않는 버그

✅ 해결 방법

문제 분석 & 해결 방법

검색 결과 화면에서 searchBar를 탭하고 한 글자를 타이핑해야 최근 검색어로 전환
- 기존에는 searchBar의 delegateMethod에서 분기문을 통해 RecenctSearchKeywordTableView를 보여주었다.
- 분기문을 탈 필요 없이, SearchBar가 탭되었을 때 RecenctSearchKeywordTableView를 보여주면 되므로, searchBarTextDidBeginEditing에 showRecentSearchKeywordTableView를 호출하여 해결했다

func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
       searchController.showsSearchResultsController = true
       searchAppResultsController.showRecentSearchKeywordTableView()
   }

최근 검색어 화면에서 검색 기능 활성화 뷰(header)까지 스크롤 되지 않는 버그
- scrollToTop내부에서 첫번째 cell까지 이동했기 때문에 header는 보여주지 못했다.
- 따라서 headerView까지 포함된 뷰인 tableView의 bounds.origin.y를 searchBar의 높이로 지정해주어 headerView의 존재 유무에 상관 없이 tableView를 모두 보여주도록 수정했다.

    func scrollToTop() {
        guard let searchBarHeight = navigationItem.searchController?.searchBar.bounds.height else {
            return
        }
        tableView.bounds.origin.y = searchBarHeight
    }

👩🏻‍💻결과와 피드백

의도한대로 searchBar의 사용성이 개선되었다.
UIKit의 API가 존재하지 않을 때, View의 계층구조와 좌표체계를 활용하는 방법도 있다는 것을 배웠다

검색 기능 확장 : 이름으로 검색/플랫폼 설정/국가 설정

검색 기능 확장

이름 으로 검색
플랫폼 설정
검색 국가 설정

Model

iTunes Search API 연결
- AppSerchAPIRequest 타입 구현
- Entity 모델링
- AppRepository Test
- Parsing Test
검색 기능 확장
- 검색 범위 설정 구현 (software/iPad software/mac software)
- input에 따라 어떤 API사용할지 핸들링

UI

SettingView구현
- 국가 설정

Refactoring

코디네이터 패턴 적용

🎯 목적

한국어, 영어, 2가지 언어를 지원해서 한국 외 국가에서의 접근성 확보

💡 구현 아이디어

사용 Language & Region 추출 방법

지역화 적용 대상

String : .strings 파일을 기반으로 localizedString사용
AssetCatalog : loacalization 기능 사용
Date : DateFormatter사용하여 region에 알맞은 날짜 포맷 표시

✅ Task

언어/지역 설정 기능
- 선호 언어 설정 기능 (localization)
- 검색 국가 설정 기능 (SearchAPI에 적용)
현재 기기 설정을 제공하는 API 구현
- DeviceSetting 타입 구현
Asset
- 런치스크린
Date Format
- DateFormatter

👩🏻‍💻 결과와 피드백

🚨 문제 설명

상황

앱의 첫 화면에서 설정 데이터(국가와 국기)를 표시하기 위해서는 CountryCodeAPIService를 이용해서 API call이 선행되어야함.
루트 뷰를 런치스크린으로 설정하고, API call을 하고 데이터가 도착하면 동기적으로 SearchVC를 표시하는 방법으로 구현했었음

문제

다운로드를 하는 동안 런치스크린이 표시되므로, 사용자 입장에서는 런치 시간이 길어짐
코디네이터에서 앱 초기데이터를 준비하는 역할까지 맡게됨

// 기존 코드
final class SearchCoordinator: NSObject, Coordinator {
   
   var childCoordinator = [Coordinator]()
   var launchScreenViewController: LaunchScreenViewController
   var navigationController: UINavigationController!
   
   init(rootViewController: LaunchScreenViewController) {
       self.launchScreenViewController = rootViewController
   }
   
   func start() {
       Task {
           do {
              // APIcall 요청
               try await AppSearchingConfiguration().downloadCountryCode()
               await MainActor.run {
                 // 성공하면 SearchVC present
                   _ = presentSearchViewController()
               }
           } catch {
               await MainActor.run {
                   // 실패하면 SearchVC Present, alert Present
                   let searchVC = presentSearchViewController()
                   searchVC.presentCountryCodeDownloadErrorAlert()
               }
           }
       }
   }
...
}

시스템의 생성논리와 실행 논리가 분리되어 있지 않음
AppSearchingConfiguration은 앱 검색 설정을 관리하는 유스케이스인데 앱의 초기데이터를 다운로드하는 역할까지 맡게됨(SRP 위반)

✅ 해결 방법

문제 분석

코디네이터에서 시스템의 생성논리까지 책임을 맡고 있음
앱의 초기 데이터를 다운로드하는 것과 같은 생성을 책임지는 객체를 만들면 역할을 분리할 수 있음

해결 방법

AppOrganizer 정의

CountryCodeAPIService를 이용해 국가 데이터를 다운로드 받음

final class AppOrganizer {
    
    private let countryCodeAPIService = CountryCodeAPIService()

    func prepare(didEnd completion: @escaping (() -> Void)) {
        countryCodeAPIService.fetchCountryCodes(completion: completion)
    }
    
}

LoadingViewController 구현

데이터를 다운로드 할 동안 보여줄 뷰 구현
activity Indicator를 사용해 진행 중임을 사용자에게 알림

네트워크 연결 없을 때 alert을 표시해 재시도 유도

final class CountryCodeAPIService: NSObject {
    
    private let session: URLSession = URLSession(
        configuration: .default,
        delegate: nil,
        delegateQueue: nil)
    
    func fetchCountryCodes(completion: @escaping (() -> Void)) {
        guard let request = CountryCodeListRequest(pageNo: 1, numOfRows: 240).urlRequest else {
            return
        }
        
        let downloadTask = session.dataTask(with: request) { [weak self] ( data, urlResponse, error) in
        
            if error != nil {
               // 네트워크 연결 없음을 아리는 Alert 표시
                NetworkMonitor.shared.handleNetworkError {
                    DispatchQueue.global().async { [weak self] in
                        // `재시도`버튼에 바인딩되는 이벤트 
                        self?.fetchCountryCodes(completion: completion)
                    }
                }
                return
            }
            
            guard let httpResponse = urlResponse as? HTTPURLResponse,
                  (200...299).contains(httpResponse.statusCode) else {
                print("\(String(describing: self)) : failed to receive success response(status code: 200-299)")
                return
            }
            
            guard let contentType = httpResponse.value(forHTTPHeaderField: "Content-Type"),
                  contentType == "application/json;charset=UTF-8" else {
                print("\(String(describing: self)) : response Content-Type is \(String(describing: httpResponse.value(forHTTPHeaderField: "Content-Type")))")
                return
            }
            
            guard let data,
                  let parsedData = try? JSONDecoder().decode(CountryCodeList.self, from: data) else {
                print("parsing failed. type: \(CountryCodeList.self) ")
                return
            }
            
            self?.appendCountries(countryCodeList: parsedData)
            completion()
        }
        
        downloadTask.resume()
    }
    
}

AppOrganizer의 completion handler로 mainCoordinator.start()호출

scene이 연결되었을 때 먼저 loadingViewController를 보여주고, AppOrganizer의 prepare를 호출
AppOrganizer의 prepare가 정상적으로 완료되었을 때 mainCoordinator를 시작하여 첫번째 뷰를 보여주도록 함

// SceneDelegate
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        let navigationController = UINavigationController()
        window = UIWindow(windowScene: windowScene)
        window?.rootViewController = navigationController
        window?.makeKeyAndVisible()
        
        let mainCooordinator = SearchCoordinator(rootViewController: navigationController)
        mainCoordinator = mainCooordinator
        
        let loadingView = AppLoadingViewController()
        loadingView.modalPresentationStyle = .fullScreen
        navigationController.present(loadingView, animated: false)
        
        appOrganizer.prepare {
            DispatchQueue.main.async {
                loadingView.dismiss(animated: false)
                mainCooordinator.start()
            }
        }
        ...
    }

👩🏻‍💻결과와 피드백

앱의 실행을 준비하는 역할, 네트워크 오류를 처리하는 역할, 화면 전환을 책임지는 역할 각각 하나의 책임만 가지도록 개선(SRP)
코드의 가독성과 유지보수가 용이해짐

🎯 목적

리소스(Image, Color, .strings)를 Swift 타입으로 자동 생성하고 중복 작업을 제거
컴파일 타임에 문자열로 초기화 할 때 생기는 크래시 체크

💡 구현 아이디어

1. 라이브러리 선택

SwiftGen 🆚 R.Swift

지원하는 타입	R.Swift	SwiftGen
Asset Catalog ☑️	O	O
Color ☑️	O	O
CoreData	X	O
Files	O	O
Font	O	O
InterfaceBuilerFile (Storyboard)	O	O
JSON and YAML files	X	O
Plists ☑️	X	O
.strings ☑️	O	O
Nibs	O	X
ReusableCell	O	X
Segue	O	X

변환하고자하는 타입을 모두 지원하고, 안정적으로 운용가능하다고 판단하여 SwiftGen을 선택

2. 구현 방법

Homebrew로 설치
Config파일에 변환하고자하는 파일을 YAML 문법에 맞춰 작성

👩🏻‍💻 결과와 피드백

복적인 단순 작업 제거에 따른 개발 편리성 증가
컴파일러가 파일로 부터 타입을 생성하기 때문에 런타임 크래시도 방지 효과

구현 사항

Model

UI

캐시의 필요성 인식

iTunesAPI를 호출해 빈번하게 데이터를 받아올 수 있습니다. 그래서 캐시를 사용해 통신 트래픽을 줄이고, 데이터를 보여주는데 필요한 시간을 단축시키고자 했습니다.

문제 상황

URLCache를 사용한 캐싱 방법을 생각했습니다. URLRequest의 response가 캐시에 존재한다면 캐시된 response를 반환하고, 없다면 서버에 요청을 보내려 했습니다.

하지만, 이 방법으로 구현시 서버와 캐시된 데이터 간 불일치 문제가 발생할 수 있습니다.

해결 방법

HTTP header의 Cache-Control을 no-cache로 설정했습니다. no-cache는 캐시 데이터를 사용자에게 보여주기 이전에, 서버에 캐시 데이터가 서버의 데이터와 동일한지 유효성 검증을 하도록 강제합니다. 매 요청 마다 통신을 하는 것은 피할 수 없지만, 캐시가 유효할 땐 데이터 다운로드 비용을 절감할 수 있기 때문에 효용성이 있다고 판단했습니다.

HTTP Header

HTTP Header에 Cache-Control 항목 추가

extension iTunesAPIRequest {
    ...
    var header: [String: String] {
        ["Content-Type": "application/json",
         "Accept": "application/json",
         "Cache-control": "no-cache"]
    }
}

URLSession의 configuration 변경

캐시를 지원하는 URLSessionConfiguration.default으로 URLSession을 생성했습니다.
캐시 정책을 useProtocolCachePolicy로 설정하여, request마다 유효성을 검증하는 로직을 사용하도록 했습니다.

extension iTunesAPIService {
    
    static let sessionWithDefaultConfiguration: URLSession = {
        let defaultConfiguration = URLSessionConfiguration.default
        defaultConfiguration.requestCachePolicy = .useProtocolCachePolicy
        return URLSession(configuration: defaultConfiguration)
    }()
    
}

캐시 작동 확인 테스트

의도한바대로 실제로 잘 동작하는지 확인하기 위해 2가지 테스트를 진행했습니다.

캐시 데이터와 서버 데이터가 동일하다면 cachedResponse를 리턴하는지
캐시 데이터와 서버 데이터가 다르다면 서버에 요청하여 받은 최신 Response를 리턴하는지

performance test

LaunchScreen, App Icon 구현

LaunchScreen 구현
App Icon 구현

ViewModel 구현

SearchViewModel 구현
AppDetailViewModel 구현
ViewModel 동작 테스트

self-sizing CollectionViewCell 구현

ContentView에 따른 Self-sizing CollectionViewCell 구현 방법

환경

UICollectionViewFlowLayout 사용

1. `layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize`

UICollectionViewFlowLayout의 estimatedItemSize를 automaticSize로 설정한다.
0이 아닌 placeholder 값이고, 각 셀의 실제 사이즈는 preferredLayoutAttributesFitting(_:) 메서드에 의해 결정된다.

private let contentCollectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        layout.sectionInset = UIEdgeInsets(top: 10, left:0, bottom: 10, right: 0)
        return UICollectionView(
            frame: .zero,
            collectionViewLayout: layout)
    }()

2. `AppDetailSummaryCollectionViewCell`에서 제약 충돌 발생

`estimatedSize`와 실제 사이즈 간 충돌이 발생했다

해결

충돌이 발생하는 iconImageView의 높이 제약의 priority를 낮게 조정했다.

    let heightAnchor = iconImageView.heightAnchor.constraint(
        equalToConstant: design.iconImageViewHeight)
    heightAnchor.priority = .init(rawValue: 750)

Combine 적용

Coordinator 패턴 적용

TextSymbolView를 UIImage로 변환하기

문제 인식 : 뷰에 포함된 로직

SummaryCollectionViewCell의 symbolImage에 사용되는 이미지는 두 가지 타입이 있습니다

UIImage(systemName:) : SFSymbol로 초기화하는 이미지
TextSymbolView (UIView타입) : Label을 사용해 Text를 이미지처럼 보여주는 뷰

동일한 역할의 이미지이지만, 두 이미지의 타입이 달라서 Cell에서 분기처리를 통해 이미지를 핸들링해야합니다.

// 기존 코드 
 func bind(
        primaryText: String?,
        secondaryText: String?,
        symbolImage: UIImage?) {
            primaryTextLabel.text = primaryText
            secondaryTextLabel.text = secondaryText
     
            if let symbolImage = symbolImage {
                self.symbolImageView.image = symbolImage
            }

            if let symbolTextView = symbolTextView {
                self.symbolTextView = symbolTextView
            }
        }

뷰는 로직이 제외된, UI를 표시하는 역할만 가져가는 것이 유연한 설계를 위해 맞다고 판단했기 때문에,
TextSymbolView의 타입을 UIImage로 변환하도록 했습니다.

해결 방법 : UIView를 UIImage타입으로 변환하기

UIView의 익스텐션에 UIImage로 변환하는 메서드를 구현했습니다.

extension UIView {

    func toImage() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
              return renderer.image { rendererContext in
                  layer.render(in: rendererContext.cgContext)
              }
      }
    
}

트러블 슈팅 : Label이 뷰의 중앙에 오지 않는 문제

TextSymbolView의 size는 상수값으로 픽스후, Label의 사이즈는 intrinsicContentSize에 의해 결정되도록하고, 위치는 view의 centerX, centerY에 맞춰 중앙에 오도록 구현했습니다.
textAlignment을 center로 설정했음에도, 위 이미지와 같이 라벨이 좌측 정렬되는 문제가 발생했습니다.

final class TextSymbolView: UIView {
    
    private let text: String
    
    private lazy var label: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = self.text
        label.font = Design.font
        label.textColor = Design.color
        label.textAlignment = .center
        label.numberOfLines = 1
        label.lineBreakMode = .byTruncatingTail
        label.sizeToFit()
        return label
    }()
    
    var image: UIImage {
        return self.toImage()
    }
    
    init(_ text: String) {
        self.text = text
        super.init(frame: CGRect(x: 0, y: 0, width: Design.width, height: Design.height))
        configureSubview()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func configureSubview(){
        addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        ])
        
    }
    
}

SavedAppDetailTableViewCell 데이터 바인딩 지연 개선

Before & After

개선 전	개선 후

문제 상황 : Cell에 데이터 표시 지연

cellForRowAt에서 네트워크 및 렐름에서 CellModeld을 비동기적으로 받아오는 Publisher를 만든 후, cell에 bind해주고 스트림을 시작합니다.
cell이 디큐되기 직전에 비동기작업이 시작되므로, cell에 데이터를 표시하기까지 지연이 발생합니다.

extension AppFolderDetailViewModel: UITableViewDataSource {
    
    func tableView(
        _ tableView: UITableView,
        numberOfRowsInSection section: Int)
    -> Int
    {
        if let savedApps,
           savedApps.isEmpty {
            showEmptyView.send(true)
        } else {
            showEmptyView.send(false)
        }
        return savedApps?.count ?? 0
    }
    
    func tableView(
        _ tableView: UITableView,
        cellForRowAt indexPath: IndexPath)
    -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCell(
            withClass: SavedAppDetailTableViewCell.self,
            for: indexPath)
        guard let savedApp = savedApps?[safe: indexPath.row] else {
            return cell
        }
        
        // TODO: - Error Handling
        let cellModel = appFolderUsecase.readSavedAppDetail(of: savedApp)
            .map { savedAppDetail in
                return SavedAppDetailTableViewCellModel(savedAppDetail: savedAppDetail)
            }
            .assertNoFailure()
            .eraseToAnyPublisher()
        
        cell.bind(cellModel)
        return cell
    }

}

해결 방법 : `UITableViewDataSourcePrefetching` 사용

UITableViewDataSourcePrefetching를 채택하여 tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) 메서드내에서 [indexPath]에 해당하는 savedApp들의 cellModel을 다운로드하여 배열에 저장합니다.

extension AppFolderDetailViewModel: UITableViewDataSourcePrefetching {
    
    func tableView(
        _ tableView: UITableView,
        prefetchRowsAt indexPaths: [IndexPath])
    {
        guard let savedApps else {
            return
        }
        Publishers.Sequence<[IndexPath], Never>(sequence: indexPaths)
            .map({ indexPath in
                return (indexPath.row, savedApps[indexPath.row])
            })
            .flatMap { (index, savedApp) -> AnyPublisher<(Int, SavedAppDetail), Error> in
                return self.appFolderUsecase.readSavedAppDetail(of: savedApp, index: index)
            }
            .map{ savedAppDetail in
                return (savedAppDetail.0, SavedAppDetailTableViewCellModel(savedAppDetail: savedAppDetail.1))
            }
            .assertNoFailure()
            .sink { [unowned self] cellModel in
                self.fetchedCellModels[cellModel.0] = cellModel.1
            }.store(in: &cancellable)
    }

}

tableView( _ tableView: UITableView, cellForRowAt indexPath: IndexPath)에서 만약 prefetch한 cellModel이 있다면 해당 cellModel을 사용해 바인드하고, 없다면 스트림을 시작합니다.

extension AppFolderDetailViewModel: UITableViewDataSource {
    
    func tableView(
        _ tableView: UITableView,
        numberOfRowsInSection section: Int)
    -> Int
    {
        if let savedApps,
           savedApps.isEmpty {
            showEmptyView.send(true)
        } else {
            showEmptyView.send(false)
        }
        return savedApps?.count ?? 0
    }
    
    func tableView(
        _ tableView: UITableView,
        cellForRowAt indexPath: IndexPath)
    -> UITableViewCell
    {
        let cell = tableView.dequeueReusableCell(
            withClass: SavedAppDetailTableViewCell.self,
            for: indexPath)
        guard let savedApp = savedApps?[safe: indexPath.row] else {
            return cell
        }
        
        if let cellModel = fetchedCellModels[indexPath.row] {
            cell.bind(cellModel)
        } else {
            let cellModel = appFolderUsecase.readSavedAppDetail(of: savedApp)
                .map { savedAppDetail in
                    return SavedAppDetailTableViewCellModel(savedAppDetail: savedAppDetail)
                }
                .assertNoFailure()
                .eraseToAnyPublisher()

            cell.bind(cellModel)
        }

        return cell
    }

}

추가 보완점

prefetchRowsAt메서드는 사용자가 스크롤을 해야 호출되기 때문에 맨 처음 보여지는 셀은 여전히 지연이 발생합니다.

View 구현

AppSearchViewController 구현

AppDetailView component 구현
AppDetailViewController 구현

오픈 API로부터 세계 국가 ISO 코드 및 국가명을 생성

목적

기존 AssetData(JSON)는 영어 국가명만을 제공하기 때문에, 한국어 국가명을 제공할 수 없었음
따라서 공인된 기관에서 최신 국가 ISO 코드 및 국가명(영어,한국어)를 제공받기 위해 공공데이터포털의 API를 사용

API 정보

외교부_국가·지역별 표준코드

구현 방법

공공데이터포탈에서 API 활용 신청
API Call Test
JSON 파싱 타입 정의 (CountryCodeList, CountryCode) & Country 타입 수정
CountryCodeAPIService, CountrtyCodeListRequest 구현
AppDelegate의 didFinishLaunchingWithOptions에서 API 호출을 통해 CountryCode 데이터를 다운로드 받은 후 Country타입으로 매핑하여 타입 프로퍼티(Country.list)에 저장
HTTP 통신으로 인한 ATS 위반 이슈를 프로퍼티 리스트 수정으로 해결
국가 설정에 따라 알맞은 언어의 국가명을 반환하는 프로퍼티 Country에 구현
국가명을 사용하는 뷰모델에서 위 프로퍼티 사용하도록 수정

구현 중 트러블 슈팅

🚨Response Type이 xml로 오는 문제

📝해결 과정을 블로그에 정리하여 공유

문제 정의
포스트맨에서는 정상적 응답을 받던 것이,
앱에서 실행하니SERVICE_KEY_IS_NOT_REGISTERED_ERROR 라는 오류 xml이 옴

문제 원인 분석

URLComponent와 공공데이터포털이 각각 사용하는 api key를 인코딩하는 방식이 다르기 때문에 발생

해결 방법

percentEncodedQuery의 '+'를 '%2B' 변환 5c7acb6

var url: URL? {
        var urlComponents = URLComponents(string: baseURLString + path)
        urlComponents?.queryItems = query.map {
            URLQueryItem(name: $0.key, value: "\($0.value)") }
        let encodedQuery = urlComponents?.percentEncodedQuery?.replacingOccurrences(of: "+", with: "%2B")
        urlComponents?.percentEncodedQuery = encodedQuery
        return urlComponents?.url
    }

🚨 런치가 끝난 후에 데이터가 도착해서 기존 Country 불러올 수 없는 문제

문제 정의

MainCoordinator의 start() 에서 다운로드를 함

func start() {
        Task {
            await AppSearchingConfiguration().downloadCountryCode()
            await MainActor.run {
                let searchKeywordRepository = RealmSearchKeywordRepository()
                let appSearchUseacase = AppSearchUsecase(
                    searchKeywordRepository: searchKeywordRepository)
                let seachViewModel = SearchViewModel(appSearchUsecase: appSearchUseacase)
                let searchVC = SearchViewController(searchViewModel: seachViewModel)
                searchVC.coordinator = self
                navigationController.pushViewController(searchVC, animated: false)
            }
        }
    }

데이터를 모두 받아온 뒤, 첫 화면이 시작되기 때문에 지정해둔 국가를 불러오지만..
데이터를 받아오는 동안 잠깐 검정화면이 보이는 문제가 여전히 발생

고민한 방법
1. rootViewController의 배경을 런치스크린으로 지정한다. ✅ 검정화면을 없애고자하는 의도와 부합
2. ~~stateRestoration 함수를 사용해본다?~~ 화면 상태복구에 사용하므로 적절하지 않음

해결 방법

페이크 LaunchScreenVC를 만들어서 네비게이션컨트롤러의 rootViewController로 지정함 37d4c14
근데 이 런치스크린이 root라 네비게이션 스택에 들어가서, 네비게이션 바가 생김
rootViewController를 LaunchScreenVC으로 지정하고

다운이 완료되었을 때, SearchVC를 root로 하는 네비게이션 컨트롤러를 present함으로 해결! 112cf13

// SceneDelegate
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        let launchScreen = LaunchScreenViewController()
        window = UIWindow(windowScene: windowScene)
        // 런치스크린뷰컨을 루트뷰로 지정
        window?.rootViewController = launchScreen
        window?.makeKeyAndVisible()
        
        let mainCooordinator = SearchCoordinator(rootViewController: launchScreen)
        mainCoordinator = mainCooordinator
        mainCooordinator.start()
    }

// SearchCoordinator
func start() {
        Task {
            await AppSearchingConfiguration().downloadCountryCode()
            await MainActor.run {
                let searchKeywordRepository = RealmSearchKeywordRepository()
                let appSearchUseacase = AppSearchUsecase(
                    searchKeywordRepository: searchKeywordRepository)
                let seachViewModel = SearchViewModel(appSearchUsecase: appSearchUseacase)
                let searchVC = SearchViewController(searchViewModel: seachViewModel)
                searchVC.coordinator = self
                // 앱의 진짜 첫화면인 SearchVC를 루트로 하는 네비게이션 컨트롤러 생성
                navigationController = UINavigationController(rootViewController: searchVC)
                // 모든 화면을 덮도록 스타일 fullScreen으로 지정
                navigationController.modalPresentationStyle = .fullScreen
                launchScreenViewController.present(navigationController, animated: false)
            }
        }
    }

앱 저장, 폴더링 기능 구현

관심 있는 앱을 폴더에 저장
폴더를 생성하여 앱을 분류해서 저장할 수 있도록 지원

구현 사항

Model

AppFolder 정의
SavedApp 정의

Repository

UI

Data Repository layer 구현

Repository 추상화 (의존성 역전⭐️)
iTunesAppDetailRepository 구현

CompositionalLayout에서 CustomCollectionViewCell 사용시 레이아웃 이슈

문제 상황

customCollectionViewCell을 만들 때, UIImageView의 사이즈를 상수로 설정했다.

final class ScreenShotCollectionViewCell: UICollectionViewCell {
    
    private let screenShotView = UIImageView(
        frame: CGRect(x: 0, y: 0, width: 280, height: 500))
 ...
}

Cell사이즈를 기반으로 CompositionalLayout의 item과 group사이즈를 계산하기 위해 .estimated()프로퍼티로 dimension을 설정했다.

    private func createLayout() -> UICollectionViewLayout {
        let sectionProvider = { [weak self] (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
            
            guard let sectionKind = AppDetailViewModel.Section(rawValue: sectionIndex) else { return nil }
            
            let section: NSCollectionLayoutSection
            
            if sectionKind == .summary {
            ...
            } else if sectionKind == .screenshot {
    
                let itemSize = NSCollectionLayoutSize(
                    widthDimension: .estimated(280),
                    heightDimension: .fractionalHeight(1.0))
                let item = NSCollectionLayoutItem(layoutSize: itemSize)
                let groupSize = NSCollectionLayoutSize(
                    widthDimension: .fractionalWidth(1.0),
                    heightDimension: .estimated(500))
                let group = NSCollectionLayoutGroup.horizontal(
                    layoutSize: groupSize,
                    subitems: [item])
                section = NSCollectionLayoutSection(group: group)
                section.orthogonalScrollingBehavior = .groupPaging
                
            } else if sectionKind == .descritption {
             ....
            } else {
                fatalError("Unknown section!")
            }
            
            return section
        }
        return UICollectionViewCompositionalLayout(sectionProvider: sectionProvider)

스크롤하니 section이 사라지는 현상이 발생했다.

앱 폴더 CRUD 버그

🚨 문제 설명

문제

AppFolderSelectView - > AppFolderCreator present 안되는 버그
AppFolderSelectView 전환시 기존 선택 폴더 체크 안됨
savedApp 0개일 때 defaultIconImage 표시 안됨

✅ 해결 방법

문제 분석 & 해결 방법

AppFolderSelectView - > AppFolderCreator present 안되는 버그

AppFolderSelector의 coordinator가 nil로 밝혀짐
Coordinator를 할당해주지 않아서 발생
AppFolderSelectorCoordinator에서

AppFolderSelectView 전환시 기존 선택 폴더 체크 안됨
- AppFolderRealmRepository에서 savedApp의 AppFolder를 읽을 때, 저장되어있던 savedApp을 읽어오지 못하는 문제
- savedApp을 fetch하고 filter할 때 사용한 검색 국가명(englsihName)과 savedApp을 저장할 때 사용한 국가명(isoCode)가 달랐기 때문에 발생
- filter 조건을 isoCode로 통일
- searchingConturyISOCode로 변수명 명확하게 수정

👩🏻‍💻결과와 피드백

앱폴더에 CRUD하는 작업 정상화
SavedApp을 identify하는 property들을 캡슐화하여 이전과 같은 혼동이 없도록 개선 필요

AnimatableArrow 방향 오표시 문제

🚨 문제 설명

문제

SearchView의 화살표(AnimatableArrow)가 iPad, Mac을 가리킬 때, 화살표가 12시방향으로 표시되어 부자연스러움

✅ 해결 방법

문제 분석

기존 setPostition의 애니메이션에서 아래와 같이 설정했기 때문에 화살표의 위치만 정확하고, 화살표는 회전하지 않았음
- startAngle과 endAngle이 동일
- rotationMode 적용하지 않음
- fillMode적용하지 않음

해결 방법

따라서 animate(to:)와 동일하게 애니메이션 특징을 추가하고, startAngle은 iPhone을 가리키는 1.5 * .pi 로 고정
duratioin을 아주 짧은 시간을 할당하여 애니메이션 없이 원래 그 위치인 것처럼 구현

👩🏻‍💻결과와 성과

SearchView를 처음 띄었을 때, iPad 또는 mac일시 화살표 바닥이 원에 붙어서 자연스럽게 표시

Swift Concurrency 적용

async/await로 비동기 함수 리팩터링

APIService 구현

HTTP 통신 모듈 APIRequest
APIService 인터페이스 정의
ItunesAPIService 구현
Parsing Test

앱 Model 정의

AppDetail 모델 정의

Usecase 구현

SearchUsecase
AppDetailUsecase

yeahg-dev / chajabwa Goto Github PK

chajabwa's People

Contributors

Stargazers

Watchers

chajabwa's Issues

🚨 문제 설명

✅ 해결 방법

문제 분석

해결 방법

👩🏻‍💻결과와 피드백

🚨 문제 설명

환경

문제

✅ 해결 방법

문제 분석 & 해결 방법

👩🏻‍💻결과와 피드백

검색 기능 확장

Model

UI

Refactoring

🎯 목적

💡 구현 아이디어

사용 Language & Region 추출 방법

지역화 적용 대상

✅ Task

👩🏻‍💻 결과와 피드백

🚨 문제 설명

상황

문제

✅ 해결 방법

문제 분석

해결 방법

👩🏻‍💻결과와 피드백

🎯 목적

💡 구현 아이디어

1. 라이브러리 선택

2. 구현 방법

👩🏻‍💻 결과와 피드백

최근 검색 기록 기능 구현

구현 사항

Model

UI

캐시의 필요성 인식

문제 상황

해결 방법

HTTP Header

URLSession의 configuration 변경

캐시 작동 확인 테스트

performance test

LaunchScreen, App Icon 구현

ContentView에 따른 Self-sizing CollectionViewCell 구현 방법

환경

1. layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize

2. AppDetailSummaryCollectionViewCell에서 제약 충돌 발생

해결

Combine 적용

문제 인식 : 뷰에 포함된 로직

해결 방법 : UIView를 UIImage타입으로 변환하기

트러블 슈팅 : Label이 뷰의 중앙에 오지 않는 문제

Before & After

문제 상황 : Cell에 데이터 표시 지연

해결 방법 : UITableViewDataSourcePrefetching 사용

추가 보완점

목적

API 정보

구현 방법

구현 중 트러블 슈팅

🚨Response Type이 xml로 오는 문제

🚨 런치가 끝난 후에 데이터가 도착해서 기존 Country 불러올 수 없는 문제

앱 저장, 폴더링 기능 구현

구현 사항

Model

Repository

UI

문제 상황

🚨 문제 설명

문제

✅ 해결 방법

문제 분석 & 해결 방법

1. `layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize`

2. `AppDetailSummaryCollectionViewCell`에서 제약 충돌 발생

해결 방법 : `UITableViewDataSourcePrefetching` 사용