0718 새싹 11회차 정리

iOS 앱 개발자 데뷔 과정 11회차

 

 

 

 

#0. Memo

 

- TableView

TableView는 반복되는 형식의 UI를 쉽게 만들 수 있는 특수한 View로, 리스트와 같은 형태로 사용된다.

TableView에는 기본적으로 Section이 하나이며, 하나의 섹션에 하나 이상의 Cell이 위치하게 된다.

Section은 TableView 내의 Cell을 용도에 따라 나눈 것이다.

 

 

 

- TableViewController와, 일반 ViewController에 TableView를 넣는 것의 차이

전자는 RootView가 TableView이고, 후자는 RootView가 일반 View이다.

이 두 가지의 방법은 기능은 비슷하더라도 세세한 접근법이 다를 수 있다.

 

1. ViewController에서는 TableView의 크기를 변경할 수 있으므로 자유도가 훨씬 높다.

2. TableViewController에서는 TableView를 Outlet 연결하지 않아도 자동으로 이름이 정의되어 있다.

3. TableViewController에는 코드 작성에 필요한 dataSource, delegate가 자동으로 연결되어 있다.

 

 

 

- Static과 Dynamic

TableView는 Static과 Dynamic 두 가지로 나뉘며, 쉽게 말하면 아래와 같다.

Static : 어느 사용자가 봐도 같은 화면 (설정 화면 같은 항목)

Dynamic : 사용자의 데이터에 따라 다른 화면 (친구 목록, 채팅방 같은 항목)

 

 

 

- Header와 Footer

Header : 테이블 뷰의 윗쪽 영역

Footer : 테이블 뷰의 아랫쪽 영역

Header와 Footer의 타이틀은 스크롤 할 때에도 위/아래에 고정된다.

 

 

 

 

- TableView의 Inspector 영역 살펴보기

 

인스펙터 영역을 보면 아래부터 View - ScrollView - TableView로 되어있다.

ScrollView를 상속받고 있기 때문에 스크롤을 따로 구현해주지 않아도 테이블뷰는 스크롤이 가능하다.

 

Selection : Cell을 클릭했을때 보여지는 효과(클릭 자체는 다 됨)를 선택할 수 있다.

Sections : 테이블 뷰의 인스펙터 영역에서 섹션 갯수 조절 가능

 

Style : 셀의 스타일을 Plain, Grouped, Inset Grouped에서 선택할 수 있다.

 

Separator : 말 그대로 구분선을 선택할 수 있다. Default는 Single Line이며, Single Line Etched는 사용하지 않는다.

 

Separator Inset : Custom을 선택할 시 구분선의 외곽(+ 헤더, 푸터)에 자동으로 들어가는 여백을 커스텀 설정할 수 있다.

 

Selection : Multiple Selection을 선택하면 사용자가 셀을 여러개 선택할 수 있다.

 

Bounce On Scroll : 스크롤을 끝까지 했을 때 통통 튀는 옵션이 기본이지만 해제할 수 있다.

Show Vertical Indicator : 왼쪽의 Indicator를 보여주는 옵션이 기본이지만 해제할 수 있다.

 

 

 

 

- TableView를 코드로 구현할 때 필수 항목

 

1. numberOfRowsInSection

 

Cell의 갯수를 정하는 메서드이다.

Int를 return하며, 조건문을 통해 Section마다 셀의 갯수를 다르게 설정할 수 있다.

 

 

2. cellForRowAt 

Cell의 디자인과 데이터를 정하는 메서드이다.

스토리보드에서 만든 TableView를 let cell에 초기화시킨 후, 이 cell을 return한다.

조건문을 통해 Section마다 다른 데이터를 넘겨주고 각각의 디자인을 설정할 수 있다.

 

 

 

- TableView를 코드로 구현할 때 선택 항목

 

선택 항목은 엄청나게 많지만, 오늘 사용해본 기본적인 메서드들만 정리해보려고 한다.

 

1. numberOfSections

Section의 갯수를 정하는 메서드이다.

이 메서드가 선택 항목인 이유는, 기본값이 1이기 때문이다.

 

 

2. titleForHeaderInSection

Section의 Hearder Title을 정하는 메서드이다.

String을 return하며, 조건문을 통해 Section마다 다른 HeaderTitle을 설정할 수 있다.

 

 

 

 

#1. Checklist

- UITableViewController

numberOfRowsInSection : #0. Memo TableView를 코드로 구현할 때 필수 항목 참고

cellForRowAt : #0. Memo TableView를 코드로 구현할 때 필수 항목 참고

IndexPath : (Section, Row) --> 두 번째 섹션의 네 번째 셀이라면 IndexPath의 section과 row는 각각 1, 3이 된다.

UITableViewController ( vs UIViewController + UITableView) : 

#0. Memo TableViewController와, 일반 ViewController에 TableView를 넣는 것의 차이 참고

 

 

- TableView

Dynamic Prototypes vs Static Cell : #0. Memo Static과 Dynamic 참고

Plain vs Grouped vs Inset Grouped :  TableView의 스타일!! 글로 정리하기보다 직접 적용시켜보는 것이 좋을 것 같다.

Plain은 가장 기본적이고 투박한 느낌이며, Grouped는 Header와 Footer의 간격이 늘어나 깔끔한 느낌을 준다.

마지막으로 Inset Grouped는 Section의 Bounds가 둥근 모양이 되고, Row 양 옆에 Inset이 들어간다.

 

 

- TableViewCell

Basic, Subtitle, Right Detail, Left Detail : Cell의 스타일!! 글로 정리하기보다 직접 적용시켜보는 것이 좋을 것 같다. 이름에 충실하다.

Editing Control, Cell Content, Reordering Control : 아래의 그림을 참고해보자!

 

 

- TableViewCell Reuse mechanism

뷰의 재사용은, 보여줄 데이터의 양은 많은데 보여줄 수 있는 뷰의 수가 적은 경우 활용할 수 있다.

재사용 메커니즘으로 인한 메모리 절약과 성능 향상으로 부드러운 UI를 구현할 수 있다.

재사용 메커니즘은 테이블 뷰와 컬렉션 뷰에서 동작하는데, 원리는 아래와 같다.

 

1. 테이블 뷰가 화면에 나타날 셀 객체를 데이터 소스에게 요청

2. 데이터 소스는 테이블 뷰의 재사용 큐에서 사용 가능한 셀이 있는지 확인 후 있으면 전달, 없으면 새로운 셀 생성

3. tableView(_:cellForRowAt:)메서드가 셀의 컨텐츠를 구성한 후 반환하면 테이블 뷰는 이 셀을 받아 화면에 표시

4. 사용자가 스크롤함에 따라 화면을 벗어난 셀은 테이블 뷰에서 제거되지만, 완전히 삭제되지 않고 재사용 큐에 추가

5. 사용자가 스크롤함에 따라 1에서 4의 과정을 반복

 

 

 

 

#2. Assignment

- TableViewController 구현하기

- Case 1

코드가 아닌 스토리보드의 어트리뷰트 인스펙터 영역만을 활용하여 구현 

참고 자료(왼), 결과물(우)

Switch는 셀의 스타일을 커스텀으로 변경하여 넣고, 오토 레이아웃을 잡아주었다.

기본적으로 어렵지는 않았다.

 

 

 

 

- Case 2

테이블뷰컨트롤러의 Dynamic Prototypes 학습을 위한 코드 구현

참고 자료(왼), 결과물(우)

Header의 색상을 변경해주고 싶었는데, 이 부분이 어려웠다ㅠㅠ

팀원분들께 여쭤봤더니, 다크모드 하면 색상이 동일하다고 하셔서(!!!!!!) 해봤더니 정말 그랬다.

ㅇ그 외에 셀이나 섹션에 대한 코드를 작성하는건 어렵지 않았다.

 

 

 

 

# 그 외

- OutletCollection을 사용할 때 알아두면 좋을 것

OutletCollection을 사용할 때에는 용도에 따라 접근 방법을 다르게 하는 것이 좋다.

디자인적인 부분에 대한 코드를 작성할 때에는 반복문으로 컬렉션을 돌려도 되지만, 기능적인 부분은 인덱스를 활용하는 것보다는 뷰의 이름으로 하나씩 코드를 작성하는 것이 더 좋을 수 있다.

이렇게 하면 나중에 Collection 배열에서 요소를 지우거나, View의 레이아웃을 변경했을 때 문제가 생길 여지가 적다.

 

 

- Constraints 세부 설정하기

 

 

 

AutoLayout을 설정할 때, Inspector의 Constraints를 더블 클릭하면 세부 설정을 할 수 있다.

 

 

 

 

 

 

 

- 아무런 문제가 없는데 시뮬레이터에서 크래쉬가 발생한다면, 모듈을 확인하자

Inherit Module From Target이 해제되어 있을 경우, Module이 None이 되며 오류가 발생할 수 있다.

쉽게 말하면 없는 취급 당하는 것이다.

 

 

 

 

 

 

# 코드 리뷰 + 리펙토링 정리

 

오늘은 신청자에 한해 코드리뷰를 해주신다고 해서! 잽싸게 신청했다ㅎㅎ

매우 친절하고 정성스러운 리뷰가 도착해서, 바로 고칠 수 있는 부분은 고쳐봤다.

 

- for문의 범위가 0...n 으로 정해져있으면 배열 인덱스 오류를 내기 좋은 코드이다.

기념일 계산기 프로젝트 코드(수정 전)

for문의 범위를 Int로 직접 지정해 줬는데, 만약 레이블의 갯수가 줄거나 늘어날 경우 오류를 내기 좋은 코드라고 하셨다!

기념일 계산기 프로젝트 코드(수정 후)

항상 LabelCollection의 갯수만큼, Index 0부터 끝까지 실행할 코드이기 때문에 이런 식으로 바꿔 주었다.

저렇게 범위로 지정한 코드가 저 코드 말고도 여럿 있어서, 앞으로는 조금 더 여러 상황을 생각하며 코드를 써야겠다고 생각했다!

 

 

 

- result가 이미 문자열인데, "\(result)"로 한번 더 담은 코드

감정일기 프로젝트 코드(수정 전)

이건 keyExtraction 함수를 만들어 String(key[...endIdx])를 return하게 해준 것을 까먹고 수정을 안 한 코드이다.

다음부터 리펙토링을 할 때에는 오류가 나지 않더라도 한번 더 꼼꼼하게 읽어보고 끝내야겠다.

 

  

 

- 버튼의 타이틀은 button.currentTitle 코드를 더 많이 작성하는 편

감정일기 프로젝트 코드(수정 전)

현재 버튼의 타이틀을 가지고 오는 목적의 코드로는 titleLabel보다는 currentTitle을 더 많이 사용한다고 한다.

결과적으로는 같은 기능을 하기는 하지만, currentTitle이 조금 더 목적에 맞게 애플이 제공해주는 프로퍼티이기 때문이다.

currentTitle로 수정하고, 앞으로는 currentTitle을 사용하도록 해야겠다.

 

 

- 얼럿 컨트롤러를 하나의 함수로 만들고, 함수의 매개변수를 활용해서 얼럿의 타이틀과 메세지를 표현해보자

Movie SignUpViewController 프로젝트 코드(수정 전)

수정 전 SignUpButtonTapped 메서드의 코드는 얼럿 컨트롤러 4개를 하나의 함수에서 가지고 있고, 조건에 따라 표현했다. 

 하지만 이것보다 얼럿 컨트롤러를 하나의 함수로 만들고 함수의 매개변수를 활용해서 얼럿의 타이틀과 메세지를 표현하면 훨씬 간결해진다고 하셨다.

생각해보니 이미 비슷한 형태의 코드를 주말동안 작성했었던게 떠올라서, 쉽게 구현할 수 있을 것 같았다.

Movie 프로젝트 SignUpViewController 코드(수정 후)

훨씬 깔끔해졌다!!!! return은 함수의 꽃이야...^^*

 

혼자였으면 놓쳤을 문제들이 여럿 있어서, 리뷰 신청하기를 잘 했다는 생각이 들었다.

이 내용들을 잊지 않고, 다음엔 같은 실수를 하지 않도록! 구현뿐만 아니라 조금이라도 더 예쁜 코드를 작성하도록 노력해야겠다.