728x90
반응형


테이블 뷰 메모이제이션(memoization) 도 문제점이 있습니다.


데이터가 수십건, 수백건 이라면 화면 로딩이 지연(Blocking) 되는 문제가 생깁니다.






목록을 보여주는 앱이라면 첫 화면부터 대량의 정보를 보여줘야 하기때문에


처음 실행한 부분부터 화면이 보이지 않는다면 오류인줄 알고 앱을 종료해버리고 말것입니다.


거기에 텍스트보다 용량이 높은 이미지를 메모리에 저장까지 해야 하는 부담도 있습니다.






이를 해결하기위해 iOS에서 제공하는 법용 비동기 함수를 이용하는 것입니다.


DispathchQueue.main.async() 라는 비동기 실행 함수를 Swift에서 제공하고 있기 때문에 


내부적으로 스레드에 직접 접근없이 비동기 처리를 할 수 있도록 지원합니다.






이 함수는 블록(Block) 과 GCD(Global Centeral Dispath) 를 이용하여 글로벌 범위에서 사용할 수 있고,


GCD는 애플의 기술로서 병렬처리와 스레드 풀의 기반인 비동기 방식을 구현함으로


멀티코어 프로세서에 적합한 앱을 개발할 수 있도록 지원합니다.







    // 이미지 객체가 존재하면 리턴, 존재하지 않으면 새로 내려받아 저장 후 리턴
    func getImage(_ index: Int-> UIImage {
        
        let model = list[index]
        
        if let imageData = model.imageData {
            return imageData
        } else {
            let url: URL! = URL(string: model.imageUrl!)
            let data = try! Data(contentsOf: url)
            model.imageData = UIImage(data: data)
            return model.imageData!
        }
    }
cs


override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    ...
 
    // 비동기 처리    
    DispatchQueue.main.async {
        cell.imgView.image = self.getImage(indexPath.row)
    }
 
    return cell
}
 
cs



이전 메모이제이션 기법과 비동기 처리를 하여 로딩 지연을 방지하도록 수정하였습니다,


이로써 지연에 대한 고민도 해결하고 부드러운 UI를 유지할 수 있습니다.


728x90
반응형

'프로그래밍 > iOS' 카테고리의 다른 글

Swift 4 TextView PlaceHolder  (0) 2019.02.21
Swift 4 WKWebView 로딩(Indicator)  (0) 2019.02.20
Swift 4 WKWebView  (0) 2019.02.20
Swift 4 TableView 이미지 메모이제이션 기법  (0) 2019.02.20
Swift 4 TableView 동적 높이 설정  (0) 2019.02.19
728x90
반응형

IOS 개발을 하면서 테이블 뷰를 정말 많이 사용합니다.


애플도 문자 목록, 메일, 통화 목록 등 집합 데이터를 표현하는 필수 뷰이기 때문입니다.






AOS의 리사이클러 뷰 와 iOS 테이블 뷰는 동일한 구조입니다.


재사용 매커니즘(Reuse Mechanism) 원리를 통해 동작 한다는 것입니다.


데이터가 30가 있어도 화면에 보여질 셀 만큼만 만들어 지기 때문에 7개만 셀이 생성될 수도 있고 5개만 생성될 수도 있습니다.


스크롤 할때 마다 보여지지 않는 셀을 가져오거나 새로 생성해서 다시 데이터를 보여주는 방식이기 때문입니다.






인스타그램 처럼 레이아웃을 만들어보고 싶어서 API Server 만들고


네트워크 통신을 해서 이미지를 불러오는 방식을 쓰려고 url을 그대로 사용하는데. 


tableView(_:cellForRowAt:) 함수에서 매번 url 이미지 정보를 


네트워크 통신으로 가져온다면 스크롤 할 때마다 네트워크 통신을 하는것과 같습니다.






메모이제이션(memoization) 기법


네트워크 통신을 통해 읽은 데이터는 재사용할 수 있도록 캐싱(Caching) 처리하여 네트워크 통신 횟수를 줄이는 것이 좋습니다.



import UIKit
 
 
class Model {
 
   ...
 
   var imageData: UIImage?    
   
   ...
 
}
cs

UIImage 객체를 담을 변수를 Model에 선언해 줍니다.




    // 웹 이미지를 읽어와 UIImage 객체로 생성
    let url: URL! = URL(string: model.imageUrl!)
    let imageData = try! Data(contentsOf: url)
    model.imageData = UIImage(data: imageData)
cs

네트워크 통신을 최초로 하는 처리 메소드에서 


이미지 url을 UIImage 객체화 해서 Model에 넣어줍니다.




override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    ...
 
    // 매번 이미지를 웹으로 읽는 방식
    // let url = URL(string: row.imageUrl!)!
    // let data = try! Data(contentsOf: url)
    // cell.imgView.image = UIImage(data: data) // 이미지 캐싱
 
    // 이미지 객체를 대입 메모이제이션 (memoization) 기업
    cell.imgView.image = row.imageData
 
    return cell
}
cs

REST 통신을 통해 가져온 데이터를 객체로 받은 url로 네트워크 통신하는게 아닌


이미지 객체화 하여 변수에 담아 스크롤 할때 매번 통신을 방지하는 기법입니다.


이렇게 객체에 저장한다면 테이블 뷰의 셀을 재사용 하더라도 매번 네트워크 통신을 하지 않아 스크롤이 부드러운 UI를 유지할 수 있습니다.







728x90
반응형

'프로그래밍 > iOS' 카테고리의 다른 글

Swift 4 TextView PlaceHolder  (0) 2019.02.21
Swift 4 WKWebView 로딩(Indicator)  (0) 2019.02.20
Swift 4 WKWebView  (0) 2019.02.20
Swift 4 TableView 이미지 비동기 처리  (0) 2019.02.20
Swift 4 TableView 동적 높이 설정  (0) 2019.02.19
728x90
반응형

테이블 뷰를 사용할때 고정된 정적 높이가 아닌 동적 높이로 구현하고 싶을때가 있습니다.


카카오톡의 장문 내용처럼 개행을 했을때 일정하게 늘어나야 하지만


조금씩 뒤틀립니다.






기존에는 아래와 같은 방식으로 대략 높이를 맞추었습니다.


 
    // 높이 설정
    override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        let row = list[indexPath.row]
 
        // Default 50 + 글이 30자를 넘어갈 때마다 20만큼 높이를 증가
        let height = CGFloat(50 + (row.count / 30* 20)
        return height
    }
cs







하지만 IOS 8.0 버전 부터 동적으로 셀 높이를 정하는 방식을 도입했습니다.


이전과 달리 높이에 신경쓰지도 않고 깔끔하게 콘텐츠 높이가 조절됩니다.


이를 셀프 사이징 셀(Self-Sizing Cell) 방식이라고 합니다.







    tableView.estimatedRowHeight = 50
    tableView.rowHeight = UITableView.automaticDimension
cs



셀프 사이징 셀을 사용하려면 위의 2가지를 이해하면 됩니다.





1. extimatedRowHeight


임시 셀의 높이를 정할때 사용합니다.


셀 높이가 결정되기 전의 높이를 정해주면 됩니다.





2. UITableView.automaticDimension


테이블 뷰의 rowheight 속성에 대입되어 동적 높이가 설정되는 것을 테이블 뷰에 알려줍니다.


테이블 뷰의 rowHeight 속성이 UITableView.automaticDimension으로 설정되면


목록이 모두 만들어지고 레아아웃을 계산한다음 셀의 높이값을 재설정 합니다.








위와 같이 속성을 정하면 더 이상 직접 높이값을 처리 할 필요가 없습니다.


728x90
반응형
728x90
반응형

머리가 좋아도 기록하지 않으면 쉽게 잊어버립니다.


나 또한 머리가 좋은것이 아니기에..


나의 개발 일지를 작성해보려고 네이버 블로그도 만들어보고 했는데!! 만들기만 해두고 정.지.상.태




'개인 NAS로 개인서버를 구축해서 나만의 홈페이지를 만들고 개발일지를 써볼까?' 라는 생각도 있었지만


직장생활을 하다 집에오면 녹초가 되다보니 진행하지 못했습니다.




개발 검색을 많이 하다보면 tistory로 작성된 글을 많이 보다가 


'스킨도 쉽게 바꿀수있고 디자인이 세련되있고! 편집도 가능하잖아?!' 라고 생각과 동시에 실행에 옮기게 되었습니다.


하지만 초대장이 없으면 가입을 할수없는 형태로 이루어져 있었습니다.





페이스북 커뮤니티에서 'tistory초대장이 남는데 필요하신분 있으신가요?' 글이 올라오자마자 확인해서


바로!! '초대장 보내주세요!!! 제발!! 저 주세요!! 제발!!!!!! 개발일지를 남기고싶어요!! 를 남기니 메일로 초대장이 왔네요!





이와 같이 커뮤니티에서 조르고 졸라서 받을수도있지만 


SNS를 안하시는 분?도 있으실테니 다른방법을 찾아봤습니다.




티스토리 홈페이지에서 초대장을 받는 방법을 찾았습니다.


티스토리 로 접속한뒤 초대장 카테고리에 들어갑니다







초대장을 가지고있는 블로거들이 나열되고 


커뮤니티와 동일하게 달라고 조르면 됩니다!




이메일 주소를 남기고 해당 주소로 초대장이 왔습니다.


링크를 타고 들어가면 기본 정보를 입력하고 가입하면 끝!


드디어 저도 희소성이 있는 티스토리 회원이에요!!



개발을 진행하다가 어렵게 해결한 문제점을 정리하지 않아 똑같은 일을 반복할때가 있습니다.


더이상 심장 쫄깃 하면서 두려움에 떨고싶지않으니 꼼꼼하게 정리를 시작해보겠습니다.







728x90
반응형

+ Recent posts