따라하며 공부하기 1.4 - Memo App 메모 목록

KxCoding 메모앱 따라 하며 공부하기
( 영상과 공부시점의 버전차이가 있어 UI 등 다른 부분이 있음 )

 

Table View 구현 과정
1. 테이블 뷰 배치
-> Table View Controller를 이용하여 자동으로 Table View가 배치되었음

2. 프로토타입 셀 디자인
-> Cell Style을 Subtitle로 변경하였음

3. 셀 아이덴티파이어 지정
-> Identifier를 cell로 지정하였음

4. 데이터 소스, 델리게이트 연결
-> Table View Controller가 자동으로 연결해 줌

5. 데이터 소스, 델리게이트 구현

 

Data Source란?

Table View는 몇 개의 셀을 표시해야 하는지 모른다

데이터 베이스에 저장된 셀의 개수를 표시해줘야 하고 어떤 디자인으로 해야 하는지, 어떤 데이터를 표시해줘야 하는지도 모른다
따라서 직접 프로토타입 셀을 디자인하고 이 디자인을 사용하라고 알려줘야 하며 데이터 역시 직접 지정해줘야 한다

이 역할을 하는 것이 Data Source 이고 UITableViewDataSource프로토콜을 채용한 형식이다

 

 

17 ~ 19
Table View는 몇 개의 셀을 출력해야 하는지 모르기 때문에 return 값을 통하여 셀의 개수를 확인할 수 있다

22 ~ 30
디자인과 데이터의 내용이 들어가 있다
1개의 셀을 화면에 표시할 때마다 반복적으로 적용이 되고 indexPath를 사용하여 목록 내에서 특정 위치를 지정한다

Table View에서 우리가 지정한 cell Identifier를 가져오고 cell이라는 상수에 저장한다

indexPath.row를 통해서 몇 번째 셀인지 확인할 수 있고 실제 데이터를 표시해 준다

 

위와 같이 정상적으로 나왔다

 

 

5 ~ 11
DateFormatter의 속성은 Closure를 통하여 초기화하였다
( 프로젝트에서 다국어를 지원하도록 하지 않아서 날짜가 영어로 나와 한국어로 설정해 주었다 )

 

35
작성한 formatter를 셀에 표시되도록 변경했다

 

위와 같이 한국어로 날짜가 나왔다

 

 

KxCoding
https://youtu.be/1O6EXgVk5C0