UMC iOS 4주차 세미나 (10/10 월요일)

 

 

 

 

강의로 대체

늦은 시각에 올라와서, 다음날 들었다.

Table view, Collection view -> Protocol

 

 

 

 

 

입력이 숫자인지 확인하는 코드 : 정규식 활용 (정규식 ?!)

present 형식으로 띄우면, root view 가 사라지지 않아, viewWillDisappear 호출 안됨 -> 어떻게 할까?

modal present 형식을 fullScreen으로 변경하면 된다! :)

 

 

미션 점검 끝!

오늘의 내용 ~

 

 

재사용성을 높이기 위해 -> 테이블 뷰, 콜렉션 뷰 언급됐다.

6개의 view를 각각 구현

200개 모두 매일 변경? 너무 귀찮다 + 데이터와 UI 요소가 매우 많아 메모리도 많이 잡아먹음, 렉도 걸림

 

 

iOS 설정 앱 !

 

 

- 나도 밥먹언 설정 화면 구현할 때 table view 활용함 !

: Cell 관련하여 어려움을 겪었던 기억이 난다..

- 재사용 Queue : 뒤에서 설명

- 동일한 내용들을 나열할 때 사용하면 된다.

- 설정 화면, 카카오톡 홈 화면 등등

 

 

테이블뷰와 거의 유사하다. 원하는 화면에 맞게 활용하면 된다.

cell이 반복되는 형태이나, table view로 구현하기 애매함

단순 목록 / 격자무늬. 페이지 형태

 

- Table view : swift option (메모 삭제, 카카오 채팅방 나가기 등)

- Collection view : paging option (어플 상단의 배너 -> 페이지 스와이프 가능)

- 둘 다 Scroll view를 상속받고 있다.

 

- table view로 구현 가능한 것은 collection view로도 구현 가능하다.

- 반대로 collection view로 구현 가능한 것은 table view로는 구현이 어려운 경우가 있다. 

- collection view의 대체 불가능한 기능이 있을 수 있다. (멘토분의 개인적인 의견으로 아닐 수도 있음)

 

 

swift 는 protocol 지향 언어이다! (WWDC)

 

 

- 프로토콜은 메뉴얼이다.

- 프로토콜은 청사진이다. (실질적인 구현은 하지 않음)

: 가이드라인 (최소 요구사항) -> 채택한다면 해당 함수를 반드시 구현해야 한다.

- 프로토콜을 채택 -> 매뉴얼 이름을 정의하고, 내부 함수의 세부 구현을 해야한다. 

 

 

 

 

 

 

- protocol delegate pattern

- table view & collection view 구현

- protocol design pattern

: 데이터를 전달하고, 뷰와 뷰 간의 관계를 맺어주는 패턴

: Swift에 국한된 디자인 패턴이 아니다.

 

 

 

root -> 자식뷰로 넘어가서 텍스트 입력 -> 자식뷰가 닫힐 때, 해당 값을 받아와서 부모 뷰의 라벨에 표시해주는 상황을 구현 !

 

화면 전환까지 구현

 

프로토콜을 선언하는 방법 1. 프로토콜(매뉴얼)의 이름을 정하고 2. 들어가야 할 최소 요구 사항을 적는다. (함수의 이름과 parameter, type 까지만!)

protocol labelChangeProtocol {
    func onChange(text: String)
}

 

protocol의 이름 : labelChangeProtocol

protocol의 최소 요구사항: func onChange(text: String)

-> labelChangeProtocol 프로토콜을 채택하면, onChange 함수를 반드시 구현해야 한다.

 

firstViewController가 labelChangeProtocol 프로토콜을 채택 -> onChange 구현 (라벨의 텍스트에 입력 변수 text 대입)

 

 

- 이상하다? 

- text 값을 바꾸어주려면 onChange 함수를 사용해야한다.

- 근데 이 text 데이터는 자식 뷰의 textfield에서 받아와야 한다. 

-> 즉, onChange 함수는 부모 뷰에서 호출 X, 자식 뷰에서 사용할 함수이다! 

: 이제야 이해가 제대로 된다 !!! 

: 부모 뷰에서는 정의만 해두는 것

 

 

 

 

Protocol Delegate Pattern

- Delegate는 무엇인가? -> 대리자, 위임자

- 프로토콜을 채택하고 구현하는 것은 부모뷰 -> onChange 함수의 실제 사용은 자식 뷰에서 한다.

- 프로토콜 채택과 구현은 다른 뷰컨트롤러에서 -> 사용은 다른 뷰컨트롤러에서 대신 하는 것 !

 

 

 

 

 

 

 

- 자식 뷰에서 프로토콜을 delegate라는 변수로 가져온다. (옵셔널 타입으로)

- 뭐지? 왜? 프로토콜을 받아오는 걸까?

-> 프로토콜 내부에 선언된 onChange라는 함수를 써야할거 아냐! 

 

- 자식 뷰에서 delegate라는 변수로 프로토콜을 가져온다.

: 이때, 데이터 타입만 존재하고, 초기화가 이루어지지 않음 (값을 넣어주지 않은 것)

- 해당 delegate는 그럼 뭔데? 

-> 이것이 바로 부모 뷰의 프로토콜! 

: 따라서 반드시 부모 뷰에서 이를 처리해줘야함! (self를 활용한다!!)

SecondViewController.delegate = self

 

자식뷰로 넘어가기 전에, delegate 변수를 초기화한다.

-> 자식뷰의 delegate (label change protocol)은 부모뷰다 (self다)

-> 어떻게 자기 자신이 될 수 있냐?! -> 부모 뷰컨 정의를 봐라! class FirstViewController가 프로토콜을 채택하고 있음! wow

 

- 다시 정리하자면 

- 자식 뷰의 delegate (labelChangeProtocol)은 부모 뷰 (FirstViewController)가 되는 것! 

- 오,, 완 - 벽 이해됨 

- 따라서 자식뷰에서 delegate(==부모뷰)의 onChange 메소드를 실행시키는 것

 

- 부모뷰의 onChange 메소드는, 부모뷰에서는 실행되는 부분이 없다!

-> 메모리에만 올라가고, 사용될 준비를 하는 것 (아직 사용 안 됨)

- 화면 전환 (present) 되기 전에, 자식 뷰의 delegate로 부모 뷰를 전달

 

 

Delegate 의 역할

- 데이터 전달

- 뷰 간의 연결

- 징검다리 같은 역할이 이제서야 잘 이해 된다!

- 자식 뷰와 부모 뷰를 연결해주는 역할

+ 연결과 더불어, 데이터 Pass

 

 

 

자식뷰의 구현 내용! (뒤로가기 버튼이 눌릴 때, delegate를 통해 onChange 함수를 호출함) + dismiss 정의

 

- onChange로 값이 넘어간 이후에, dismiss가 된다. 

: 비동기 처리 측면에서 이건 괜찮은건가? (데이터가 넘어오기 전에, 화면이 그려지게 된다면?)

- 서버 or API를 활용하여 데이터를 가져온다면? 

- 이거 때문에 원인 모를 오류가 많이 생겼던 적이 있는데,, (원인 이제는 알지만)

-> 그래서 RX or Combine or escaping closure 활용? 

 

 

데이터 전달을 위해 Protocol을 썼는데, 다시 escaping closure나 비동기 처리와 관련된 작업들을 해야하는가? 

- URLSession (URL 갖고오는 걸) 부모 뷰에서 갖고 있고, 

- 해당 delegate를 자식뷰가 가져가서, URL Request만 유발 (특정 텍스트라던지, 시작만 자식 뷰에서 하는 것)

- 자식뷰가 죽으면, 해당 contents들도 다 죽기 때문에 ! 곤란하다.

- 이건 부모 뷰가 갖고 있는게 맞다. (자식뷰는 start만)

: 이스케이핑 클로저나, 프로토콜 처리들은 나중 문제

 

 

 

 

 

Table view 실습 

 

 

 

table view와 함께 cell도 같이 깔아줘야 한다!

 

 

채팅방 셀이 하나하나 깔려있음

 

- table view를 깔 때, 화면의 safe area 끝까지 닫게 구성

-> 잘린 채팅방 부분을 통해 유추할 수 있음 

+ table view의 장점 : 반복되는 화면을 cell 하나만 구현하여, 재사용하면 된다! :)

 

 

cell 내부의 content view에서 레이아웃을 잡는다. (셀 내부의 이미지, 라벨들 등등)

UI를 이런 방식으로 짜면 된다!

 

- 개인 톡 같은 경우는, 인원수 label을 hidden 처리하던지, 해당 text 값을 비워두면 된다.

- 뒤에서 로직을 짜서, 재사용성 높게 쓰면 된다.

 

 

table view 만 연결된 상태

 

+ UITableVeiwDelegate 프로토콜 채택! 

: 이젠 delegate가 낯설지 않다 :)

 

+ UITableViewDataSource

: 데이터를 집어넣어주는 프로토콜

: 이거 왜 처음 보는 것 같지?

 

-> 에러가 뜬다 

: 필수 구현 사항을 가져와야 함

: error fix하면 자동으로 생성된다.

: cell 관련 메소드들 구현 !

 

테이블 뷰 델리게이트와 데이터소스 공식문서를 읽어보면 정말 좋을 것!

 

데이터 소스라는 프로토콜 내부에는, 다양한 함수들이 있는데, 그 중에서 필수로 구현해야하는 함수! (!= optional)

 

parameter 요소로 필수 구현 함수를 파악하면 된다. 

: 이름은 다 tableView라고 표현됨 (왜지?)

 

- numberOfRowsInSection -> Int

- 한 section에 몇개의 셀이 들어갈 것인가? -> Int 타입으로 반환해라

 

return 으로 int 값 넣어주면 됨

 

 

cell for row at : 레이아웃이 잡힌 셀 클래스를 넣어주면 된다.

 

코코아 터치 클래스

 

셀 파일 생성

 

- 이제 좀 이해가 간다. (cell을 다루는 방법이)

 

 

최종 버젼 (먼저 나왔음)

 

 

 

기본 버젼 / awakeFromNib == viewDidLoad

 

awakeFromNib -> LifeCycle 메소드로 생각하면 된다. 

이전에 배운 것 처럼, life cycle과 관련된 처리를 해야한다면, 해당 메소드 내부에서 처리해주면 된다. 

- 원래 생성하면, 아무 것도 없는 채로 뜨는데,

- 프로필이랑 읽지 않은 메세지 개수 띄우는 뷰가 원형이라, corner Radius 값 설정해둔 것 !

 

 

 

 

Cell for row at ( ) 

- tableview와 indexPath가 parameter로 주어진다.

- tableview : delegate -> 즉, 앞서 작성한 카카오톡 뷰컨트롤러를 의미한다. (그냥 tableview라고 가져다 쓰면 됨)

- indexPath도 주어지는 대로 넣어주면 된다. 

 

- guard let 구문을 활용하여 cell을 가져온다. (우리가 새로이 정의한 코코아 터치 파일 옵셔널로 가져오는 과정)

- dequeueReusableCell로 가져온다. (identifier에 우리가 작성한 코코아터치 그거 이름 넣어주고)

- as? KakaoTalkTableViewCell 은 왜 있는것? (해당 형식으로 가져온다는 의미인가?)

- return 만 쓰면 오류남 (return type이 UITableViewCell) 따라서 기본 형식 UITableViewCell()로 가져온다.

 

 

 

내부에 들어갈 데이터는?

Cell마다 다르게 넣어줘야 한다.

-> 구조체를 선언하여 넣어준다. 

-> Data Model

-> 또 드디어 밥먹언 우기 코드가 이해가 가는구만,, 

 

 

 

data model

 

- memberCount의 경우, 개인 채팅방일 때 해당 값이 없을 수도 있으므로 옵셔널로 선언한다.

: 값이 있을 수도 있고, 없을 수도 있다. 

+ UIImage가 에러가 날 수 있어, profile Image도 옵셔널로 선언 (변경)

 

 

보통 서버 개발자가 주는 데이터를 받음

이번 경우에는, 미리 제작된 데이터를 적용

 

 

indexPath -> indexPath.row

 

ChattingRoomData : 채팅방 데이터를 담고 있는 리스트

cellForRowAt 에서 cell 별로 데이터를 담는 과정을 해당 리스트를 활용하여 작성 가능 

예를 들어

cell.이미지뷰.이미지 = ChattingRoomData[indexPath.row].이미지

이러한 방식으로! 

 

몇 번째인지에 대한 정보는 indexPath.row로 활용

-> 얘가 반복문 돌면서 자동으로 지정해주는 건가? (끝은 Int 받아온 값으로 넣고?)

 

 

 

하나하나 넣는 과정이 번거롭다면, tableviewcell 파일 내부에서 다음과 같이 함수를 하나 만들어도 된다.

 

(다시 하나하나 넣어준 것 같음)

 

member의 유무에 따라 hidden 처리하는 과정 (조건문)

cell 에 데이터를 넣어주는 과정은 작성 완료! 

 

 

row의 수는 -> 배열 요소의 개수로 접근 (단순한 숫자보다 훨씬 좋은 것 같다!)

chattingRoomData.count

 

가장 중요한 과정이 남음!

 

자식뷰 (카카오톡 테이블 뷰)의 delegate와 datasource에 self 대입하기! 

-> 이때, 부모 뷰는 카카오톡 뷰컨트롤러 (!= 테이블뷰)

 

 

 - 재사용 큐의 문제점도 있다. 

첫번째 셀일 경우에, 배경색을 빨강색으로

스크롤 하다보면 여러 셀들이 빨갛게 변한다 (무작위로)

 

- 재활용되다보니까,

- 그대로 속성이 남아있다. 

- 재활용 할 때 처리해야하는 부분이 있다. 

-> 이 문제를 해결하여 0번째 셀에만 빨간 배경을 넣어오기! 

: 특정 셀 부분에만, 특정 변형을 적용하기 

 

 

 

 

 

스탠다드 미션: 테이블 뷰를 활용한 메모장 개발하기

첼린지 미션: swift 옵션을 활용하여 커스텀 옵션 만들어오기

 

 

 

추가로 공부하면 좋을 것 (특히 컬렉션 뷰!)

+ 섹션 구성 어떻게 하는지!

+ Header, Footer 조사