[iOS] 5주차 세미나 정리

• 미션검사 및 피드백

- TableViewCell에 해당 함수를 추가해주어 셀 하나만 접근해서 변경 (셀 재사용 문제 해결)

override func prepareForReuse() {
        super.prepareForReuse()
        self.backgroundColor = . white
}

- Swipe 기능 추가 (Viewcontroller에 아래 코드 추가)

func tableView(
            _ tableView: UITableView,
            trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath
        ) -> UISwipeActionsConfiguration? {
            let readAction = UIContextualAction(
                style: .normal,
                title: "읽음",
                handler: {
                    (action, view, completionHandler) in
                    completionHandler(true)
                }
            )
            readAction.backgroundColor = .darkGray
            
            let exitAction = UIContextualAction(
                style: .destructive,
                title: "나가기",
                handler: {
                    (action, view, completionHandler) in
                    completionHandler(true)
                }
            )
            
            return UISwipeActionsConfiguration(actions: [exitAction, readAction])
}

 [시연화면]

• Open Source란?

- 실습할 내용 

스크롤을 위에서 아래 방향으로 스크롤할때, 컨텐츠가 업데이트되거나 새로고침되는 기능 (오픈소스를 활용해서 구현해보는 실습)

이 기능 자체가 UI 스크롤뷰를 다룰줄알아야 활용할 수 있다. (cf.테이블뷰와 컬렉션뷰는 스크롤뷰를 상속받고있다.)

+ 이전에 만들어두었던 테이블뷰에 기능을 추가! (테이블을 위에서 아래로 스크롤하면, 아래 보이는것처럼 새로고침 기능이 생기는 화면 구현)

 

그렇다면 Open Source란?

https://ko.wikipedia.org/wiki/%EC%98%A4%ED%94%88_%EC%86%8C%EC%8A%A4_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4

오픈 소스 소프트웨어 - 위키백과, 우리 모두의 백과사전

 

Source가 오픈되어있는 소프트웨어다.

- 구글링했을때, 나오는 코드들도 오픈소스라고 볼수있다!

- 스위프트 프로그래밍 언어 자체도 오픈소스이다, 자연스럽게 사용하고있었던것.

누군가에게 허락을 받지않고 사용할수있는 코드들은 다 오픈소스라고 볼수있다.

 

• Open Source 활용법

- 구글링 하는 Tip

1) 구글링할때, 필요한 기능을 검색한다고 가정하면 (새로고침 기능) 한국어로 검색해도 여러자료가 나오겠지만, 영어로 검색하는걸 추천

전세계 공통언어가 영어인만큼 국내에있는 개발자보다 전세계에 있는 개발자가 더 많으므로 자료가 더 많이 나온다.

+ 영어를 못하면 정말 간단하게 번역기 켜서 필요한 기능 검색하기! 

다양한 자료들이 나오는것을 확인할 수 있다.

2) 만약에 구체적으로 검색을 못하겠다싶으면 앞에다가 how to로 시작하면 어떻게든 자료가 나오기 시작한다. (자료를 정확하게 검색할 수 있다.)

- 최적화된 정보가 나오는것을 볼수있다.

3) 크롬에서 도구를 눌렀을때, 모든 날짜에서 기간을 설정할 수 있다. 이 기간을 지난 1년으로 지정하는것이 좋다. iOS는 매년 신기술이 나오기때문.

이렇게 보면 그나마 최신자료를 얻을 수 있다.

4) stackoverflow 활용 추천

 

5) 구글링 자료는 참고만 하고, 공식문서를 통해 확인해야한다!

- 해당 자료처럼 오래된 자료도 있기때문에

6) 구글링 자료는 최대한 많은 자료를 확인하고, 공통적으로 나와있는 키워드를 찾는게 중요하다!

위 자료에서는 UIRefreshControl이라는 키워드가 많이 나오는것을 볼 수있다.

 

7) 공통적으로 나온 키워드 공식문서에 검색하기!

- 공식문서에는 이러한 키워드의 사용법이 자세하게 나와있다.

https://developer.apple.com/documentation/uikit/uirefreshcontrol

Apple Developer Documentation

 

[공식문서 참고해서 실습해보기]

- ViewController 파일에 공식문서와 구글링을 통해 찾은 아래 코드를 넣어준다.

override func viewDidLoad() {
        super.viewDidLoad()
        // 대리자 위임 (필수로 해줘야함, 안해주면 화면에 뜨지않음)
        KakaoTalkTableView.delegate=self
        KakaoTalkTableView.dataSource=self
        initRefreshControl() // 함수 사용안하고 viewDidLoad()에 바로 적어도 상관없음.
        // Do any additional setup after loading the view.
    }
    
    func initRefreshControl() {
        KakaoTalkTableView.refreshControl = refreshControl
        // addTarget : UI 컨트롤을 상속받은 요소들은 액션을 적용할수있는데, 코드로 구현할때는 해당 키워드를 이용해서 액션을 달아준다. UI refresh 컨트롤에 액션을 부여한다고 보면된다.
        refreshControl.addTarget(self, action: #selector(handleRefreshControl), for: .valueChanged) // 이 기능이 무엇인지 살펴봐야한다. (공식문서나 구글링을 보다가 처음보는것이 나오면 흐름정도는 간단하게라도 이해하고 넘어가기)
    }
    
    // object-c로 컴파일되는 함수 (addTarget이 object-c 기반으로 작동되므로 해당 함수 추가)
    @objc func handleRefreshControl() {
        print("새로고침 됨!!")
        
        // 쓰레드 관리
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) { // delay 추가
            self.refreshControl.endRefreshing()
        }
}

 

아래 화면처럼 새로고침 아이콘이 나오면서, 

새로고침이 될때 아래 콘솔창에도 새로고침됨! 이라는 프린트문이 나오는것을 볼수있다.

 

• 참고

https://developer.apple.com/documentation/uikit/uirefreshcontrol

Apple Developer Documentation

https://stackoverflow.com/questions/24475792/how-to-use-pull-to-refresh-in-swift

How to use pull to refresh in Swift?

 

• CocoaPods 이란?

https://cocoapods.org/

CocoaPods.org

- 외부 라이브러리 이용

1) CocoaPods설치

https://velog.io/@kerri/Xcode-CocoaPods%EC%BD%94%EC%BD%94%EC%95%84%ED%8C%9F-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

[Xcode] CocoaPods(코코아팟) 설치 및 사용 방법

설치 명령어

sudo gem install cocoapods

정상적으로 설치되었는지 확인

pod --version

정상적으로 설치되었다면 설치된 버전이 나올것이다.

 

- 예시로 Lottie 라이브러리를 이용할것이다.

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

Lottie 라이브러리 설치 (깃허브 참고)

https://github.com/airbnb/lottie-ios

GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

 

1) 추가할 프로젝트에 접근해서 pod init(초기화)명령어를 입력해준다.

2) 폴더안에 Podfile이라는 파일이 생성된것을 볼수있다.

3) vi Podfile 명령어를 통해 해당 파일로 들어가기

4) 알파벳 i를 입력하면 편집모드로 전환된다. 라이브러리를 설치하려면 아래 명령어를 입력해주면 된다.

pod 'lottie-ios'

다 입력했으면 esc누르고 따옴표 wq를 누르면 해당 파일을 나오게된다.

5) pod install 명령어를 통해 라이브러리 설치

pod install

설치할때 아래와같은 에러가 발생한다면, 

 

아래 블로그를 참조해서 

https://velog.io/@doka/Dont-forget-to-include-the-Crash-Report-log-file-underDiagnosticReports-directory-in-bug-reports

ios Swift CocoaPods 에러 - You may have encountered a bug in the Ruby interpreter or extension libraries.

해당 명령어를 입력해주면 해결할 수 있다. 

$ sudo arch -x86_64 gem install ffi
$ arch -x86_64 pod install

설치가 완료됨과 동시에 새로운 파일이 생성되는것을 볼수있다.

6) 이제 해당 라이브러리를 사용하려면 반드시  xcworkspace를 통해 파일을 다시 열어주어야한다.

7) 파일을 열고나서 import를 해주면 이제 사용할수있는 상태가 된다.

import Lottie

 

8) Lottie 웹페이지에 들어가서 이용하고자 하는 디자인을 검색해서 찾으면된다.

해당 이미지를 이용해볼것이다.

가장 위에있는 Lottie Json형식으로 다운로드 받으면 된다.

9) 다운로드한 파일을 해당 프로젝트에 추가해준다.

10) 코드 추가

lazy var lottieView: AnimationView = {
        let animationView = AnimationView(name: "refreshIndicator")
        animationView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
        let centerX = UIScreen.main.bounds.width / 2
        animationView.center = CGPoint(x: centerX, y: 40)
        animationView.contentMode = .scaleAspectFit
        animationView.stop()
        animationView.isHidden = true
        return animationView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        initRefreshControl()
    }
    
    func setupTableView() {
        kakaoTalkTableView.delegate = self
        kakaoTalkTableView.dataSource = self
    }
    
    func initRefreshControl() {
        refreshControl.addSubview(lottieView)
        refreshControl.tintColor = .clear
        refreshControl.addTarget(
            self,
            action: #selector(refreshTableView(refreshControl:)),
            for: .valueChanged
        )
        
        kakaoTalkTableView.refreshControl = refreshControl
    }
    
    @objc func refreshTableView(refreshControl: UIRefreshControl) {
        print("새로고침!!")
        lottieView.isHidden = false
        lottieView.play()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
            self.lottieView.isHidden = true
            self.lottieView.stop()
            self.kakaoTalkTableView.reloadData()
            refreshControl.endRefreshing()
        }
    }

 

11) 시연 영상

• 미션 안내

- 스탠다드 미션

1) 지난주에 미흡했던 부분 보충해오기

2) 이번주차 배웠던 오픈소스 활용법 적용해서 테이블뷰 만들어둔것에 애니메이션 추가하기 (새로고침 애니메이션이나 다양한 애니메이션 적용) - 굳이 테이블뷰에 적용하지 않아도 좋음.

 

- 챌린지 미션

테이블뷰에 커스텀 디자인을 적용해서 리팩토링 하기 (테이블뷰에 적용하기)

 

Tip) 

구글에 awesome ios github이라고 검색하면 대부분 컴포넌트 오픈소스가 담겨있음. 

https://github.com/vsouza/awesome-ios

GitHub - vsouza/awesome-ios: A curated list of awesome iOS ecosystem, including Objective-C and Swift Projects

TableView에 사용할수있는 라이브러리 참고하기!

 

+ 추가적으로 공부하면 좋을 내용