TIL 29

오늘 한 일 / 배운점

  • 9/12 9:00 앱개발 심화 주차 발제
  • 팀 노션 작성
  • iOS 앱개발 심화 KDT 실무형 iOS 앱 개발자 양성과정 수강
  • 9/12 17:00 협력사 특강

과제

  • iOS 앱개발 심화 KDT 실무형 iOS 앱 개발자 양성과정 수강

느낀점

드디어 심화 주차에 들어왔다
오늘도 역시 발제 끝나고 새로 팀 배치받았는데
지정 좌표계부터 호주, 고양이 얘기까지..
여태 내가 있었던 팀들은 다 조용했어서 이렇게 말 많이 해본적 처음이라 웃겼다 ㅋㅋㅋ

1 그리고 JE님 덕분에 갤럭시 브레인 배지도 받았는데 간지 촬촬
처음 할 때 하나도 없었던 것 같은데 하다 보니까 어느샌가 4개나 생겼다

아무튼 오늘 오랜만에 심화과정 새로운 강의가 들어와서 들었는데 거기서 SnapKit이 나왔다.
SnapKit은 오토 레이아웃 간결하게 해주는 라이브러리라고.. 대충 전에 들어보기도 했고

9 저번에 프로젝트 때 코드로 작업했을 때
이렇게 방대하게 쮸르륵 써 내려가는 게 보기 좋은 코드는 아닌 것 같아서(내 생각)
이참에 나도 배워서 앞으로 과제할때 적용해 보고 싶다고 생각했다

강의는 들었지만 일단 직접 써보는 게 제일 이해가 빠르다고 하니까
연습장인 ColorApp을 오랜만에 켜고 여기에 설치해 보기로

https://cocoapods.org/pods/SnapKit

찾아보니 SnapKit은 애플에서 직접 만든 라이브러리는 아니라고 한다
그렇지만 오픈 소스 라이브러리로 계속 업데이트와 개선이 이루어지고 있고
iOS 개발자 커뮤니티에서 많이 쓰이고 있다고..

Xcode의 SPM(Swift Package Manager)를 이용해서 설치도 가능하다고 하지만
나는 터미널에 약하니까.. 좀 익힐 겸 CocoaPods를 이용해서 설치를 해봤다

  1. 터미널 열고 개발 프로젝트 폴더로 이동 (.xcodeproj파일이 있는 폴더) 2

  2. Podfile 초기화 (cocoapods가 설치가 안 되어있다면 설치 먼저 하고 해야 한다)

    3

    pod init
    

    이 과정이 끝나면 프로젝트 폴더에 Podfile이 생성됨

  3. 생성된 Podfile 편집

    4

    nano Podfile
    

    위 키워드를 입력하면 리눅스 nano 에디터로 Podfile이 열린다
    그리고 키보드를 이용해서 이동하여 pod 'SnapKit'내용을 추가하고 저장해 주면 된다
    Ctrl + X → Y → Enter 입력
    결국 파일을 수정해 주면 되는 거라 이게 번거롭다면
    직접 Finder에서 Podfile을 텍스트 에디터로 열어 수정하는 것도 가능하다

  4. SnapKit 라이브러리 설치

    7

    pod install
    

    위 명령어를 입력하면 쮸르륵 뜨면서 설치는 끝

    그리고 프로젝트 폴더를 다시 열어보면
    8 *.xcodeproj 아닌 *.xcworkspace가 생성되어 있을 텐데
    *.xcworkspace 파일로 열어주면 SnapKit이 잘 들어와있는 것을 확인할 수 있다
    똑같이 상단에 import SnapKit 입력해서 사용하면 된다

예시
import UIKit
import SnapKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    let data = ["apple","banana", "cherry", "durian", "elderberry"]
    var tableView: UITableView!
    override func viewDidLoad() {
        tableView = UITableView(frame: view.bounds, style: .plain)
        tableView.dataSource = self
        tableView.delegate = self
        
        view.addSubview(tableView)
        
        tableView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.height.equalTo(300)
            make.top.equalToSuperview().offset(100)
        }
    }
   
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("선택", data[indexPath.row])
    }

}

만든 테이블 뷰를 SnapKit으로 화면에 띄어보았다

그리고 전에 스토리보드 안 쓰고 코드로 짤 때
(뷰).translatesAutoresizingMaskIntoConstraints = false 이거부터 적고 시작했는데 (오토사이징과 오토 레이아웃의 충돌을 막기 위해서)
이것도 SnapKit를 사용하면 쓸 필요가 없다고 한다
그 이유는 SnapKit 안에 이미 프로토콜로 정해져있다고 ㄴㅇㄱ

따라서 사실상 SnapKit을 사용한 코드는 아래밖에 없는데

tableView.snp.makeConstraints { make in
    make.center.equalToSuperview() // 부모 뷰 중심에 위치 시켜줘
    make.width.height.equalTo(300) // 가로 세로는 300으로 해
    make.top.equalToSuperview().offset(100) // 부모 뷰의 상단으로부터 100 간격 둬
}

10

before - 아무것도 적용하지 않았을 때

11

after - SnapKit을 사용해서 위 3가지 제약 조건을 적용했을 때

확실히 SnapKit을 사용한 쪽이 코드가 간결하고 한 눈에 바로 이해하기 쉬운 것 같다
아직은 내가 SnapKit에 대해 아는 게 없어서 이것밖에 시도해 보지 못했지만
SnapKit 관련해서 따로 정리해둔 블로그도 있고.. 심지어 애니메이션도 구현할 수 있다고 하니
찾아가면서 이것저것 써봐야겠다