Table Views : 스위프트 Swipt 해석가이드

안녕하세요. 애플앤마블입니다.

오늘 데려온 Swipt 두번째 시간은 'Table Views'입니다.

iBooks에 무료로 배포되어있는 책을 참고하셔서 책과 함께 따라오면 더욱 좋습니다.

Apple Education. ‘App Development with Swift.’ Apple Inc. - Education, 2017. iBooks. https://itun.es/kr/SoKQib.l

Preview 영상입니다. 오늘은 이것을 해석가이딩 해보려고 합니다! 교재는 504p부터이구요! 시작하겠습니다.

우선 Xcode를 실행시켜 'create a new single view controller'를 만들고 이름은 "EmojiDictionary"로 설정하고 Create합니다.

이번에 만들 테이블뷰에서는 기본으로 생성되어 있는 Main.stroyboard의 'View Controller Scene'과 'ViewController.swift'파일을 삭제를 해준 뒤 다시 만들거에요 ㅎㅎ 미련없이 삭제 해주세요!

삭제해주세요. Main.Storyboard의 View Controller Scene은 누른뒤 Delete버튼을 누르면 삭제가 되요.

완벽히 깔끔한 화면이 됐습니다.

"Emoji.swift"라는 새로운 스위프트 파일을 만들어 주기 위해 'Command + N'키를 누르고 Swift File을 누른채 Next. 파일 이름은 'Emoji'로 설정해준 후 Create.

이제 Emoji.swift 파일 안에 다음과 같이 코드를 넣을건데요. 강의에 있어서 모르는 코드는 다 이해하려하시지 말고 그대로 써 넣어 주세요. 그 이유는 익숙해지면 알게되고 그것을 하나하나 외우려하면 오히려 지쳐서 더 나아갈 힘을 잃을지도 모르기 때문이죠..... 저도 다 못외우니 모르셔도 따라써 주시면 어플이 만들어지는!

class Emoji를 위와 같이 만들어 주세요. 이제, Table View Controller를 만들 차례입니다.

Main.Storyboard로 가셔서 오른쪽 밑에 있는 도구모음(Object library)에서 'Navigation Controller'를 드래그로 가져와 놓아주세요.

이제, 이 Navigation Controller에 코드를 넣을 파일을 만들텐데요.

맨처음 지운 'ViewController.swift'는 기본으로 있는 'View Controller'(우리가 지운거에요)에 코드를 넣는 파일이라고 하면,

드래그로 가져온 Navigation Contoller에도 코드를 넣는 파일이 필요하겠지요?

다시 Command + N을 눌러 Cocoa Touch Class를 누른 후 Next. 이름은 "EmojiTableViewController"라고 설정한 후 Create.

그렇다면 파일이 생길텐데요. 다시 Main.Stroyboard로 가시면 두개의 창 중에, 오른쪽 창이 Root View Controller라고 써져있죠?

그 창을 선택하되, 가장 위쪽을 선택하신 후 '창과 파일을 연결시켜주는' 설정을 하셔야 합니다.

상단에 보시면 오른쪽에서 4번째 칸이 파란색으로 선택되어 있습니다.(Identity inspector.)

이 창으로 들어가 Class를 아까만든 'EmojiTableViewController'와 연결시켜주셔야 합니다.

자, 근데 여기서 중요합니다.

제가 이번 앱을 만들 때 정말정말 많이 해매었던 구간인데요. 그 이유가

*책에 안 나와 있었습니다.*

ㅋㅋㅋ...... 그것이 무엇이냐 하면!

Navigation Controller를 선택하셔서 Attribute inspector(상단의 왼쪽에서 세번째 버튼)을 누르시고 아래쪽에 보시면 View Controller 항목 아래

*"Is Initial View Controller"* 체크박스가 해제 되어 있는데 이것을 체크 해주셔야 합니다!

이것은 앱이 실행될 때 시작하는 화면이 저것이다는 것을 설정하는 체크박스인데.....

도대체 도대체 도대체 왜 책에는 저걸 ㅠㅠㅠㅠㅠㅠ안적어놨는지 제가 못 찾았던 걸까요.....???

어쨋든 ㅎㅎ 체크해줍니다.

자, 이제 앱을 실행시켜 볼까요?

이 처럼 '빈 테이블 뷰'가 실행되셨으면 지금까지 잘 따라오신거에요.

이제, 이 Table View를 채우는 과정입니다.

좌측에 파일 목록에서 'EmojiTableViewController.swift'로 들어오시면 아래와 같은 화면이 나오는데, //Mark: - Table view data source로 주석이 달려있는 (초록색 글씨) 저 부분에 목록을 채울 데이터를 입력할거에요. 아래 사진을 참고 해주세요.

이곳에 Table의 목록을 채우는 코드를 입력할텐데요. 안의 내용은 원하는대로 넣으셔도 되고 갯수도 상관 없습니다.

하지만 이 안의 내용은 아까만든 Emoji.swift에서 만든 class Emoji{}로 '틀'을 만든 [Emoji]를 사용한다는 것만 알고 가시면 좋겠죠?

이렇게 입력해주시면 되세요. 하지만 여기서 앱을 실행시켜도 목록은 그대로 업데이트가 되어있지 않은 상태입니다.

실망하시지 마시구 ~ 이제부터 이 데이터를 이용하여 목록을 구현시키는 코딩을 할 차례에요.

Main.Stroyboard를 여신 후, 오른쪽 창에 있는 Prototype Cells 의 흰부분을 클릭하고 상단에 Attribute inspector에 들어간 화면입니다.

아래 보시면 Identifier에 EmojiCell로 설정을 하시면 좌측 창이 아래 사진처럼 이름이 바뀌는 것을 알 수 있습니다. 이것은 나중에 식별하는 이름표라고 생각하시면 편할 듯 해요ㅎㅎ.

그리고 위에 사진에서 Style Custom이라고 되어 있는 부분을 Subtitle로 바꿔주세요

올바르게 바꾸시면 위 사진 처럼 이름이 바뀌어 있어요.

자 이제, 이번 해석가이드에서 가장 중요한 ! Table View의 사용방법의 핵심이라고 할 수 있는 부분!을 할 차례에요.

'EmojiTableViewController.swipt'파일로 가주세요.

우리가 아주 많이 써놓은 목록 데이터를 쓴 곳 밑을 보면 

override func numberOfSection(in ...

과

override func tableView(_ tableView:....,numberOfRowsInSection....

이라고 적혀있는 부분(아래 사진참고, 그리고 그 밑에 초록색 주석 /* ~ */로 묶여있는 부분도 주목해주세요)

을 아래 사진처럼 코딩을 해주세요 (첫번째 return값을 0에서 1로 바꾼 것 잊지마세요!)

이렇게 코딩을 하셨다면 아래에 /* ~ */ 로 묶인 초록색 부분 (override fund tableView( _ tableView: UITableView, cellForRowAt....))을 주목해주세요.

이렇게 되어 있는 부분을 프로토콜(Protocol)이라고 부르는데 그렇다고만 아시고 '준비되어 있는 기능'정도로 이해하시면 편해요.

저 부분의 주석 맨위와 아래 /*, */를 지워주시면 프로토콜이 활성화 됩니다. 그 후 아래 사진처럼 코딩해주세요.

여기서 주의해야할 점은 (withIdentifier: "EmojiCell",....)이라고 바뀐 부분입니다.

아까 '식별하는 이름표' 에 EmojiCell이라고 넣은거 기억하시죠? 바로 저 부분을 바꿔주셔야 서로 식별하게 되는거에요.

그리고 그 아래에 있는

 cell.textLabel?.text = "\(emoji.symbol) - \(emoji.name)"

은 cell에 textLabel의 text에는 emoji 의 symbol을 출력 - emoji의 name을 출력

이라는 의미 이고

cell.detailTextLabel?.text = emoji.description

은 cell에 detailTextLabel(textLabel 밑의 작은 Label)의 text 에는 emoji.description을 넣어라 라는 의미의 코드입니다.

자, 이제 앱을 실행 해볼까요?

이제 제법 Table View 어플같은 화면이 실행되었죠? 이 화면이 나오신다면 아주 잘 따라오셨습니다.

하지만 항목들을 눌러도 아무런 기능을 하지 않는데, 누른 후 그 ACTION이 정보를 담고 있다면 더 '유의미'한 앱이라고 볼 수 있습니다.

사진처럼 밑에 3줄 분량의 코딩을 해주세요. 그 후 앱을 실행시키고 항목들을 누르면

Xcode하단에 입력한 정보들이 출력되는 것을 볼 수 있습니다. 이렇게 정보를 넣으면 훨씬 유의미한 앱이 되겠죠?

이제 , 우리가 일상에서 앱을 써보면 수정, 삭제, 순서바꾸기를 하는 앱들을 사용해왔습니다. 

이 기능을 넣을거구 이것이 이제 바로 마지막! 단계! 입니다 ㅎㅎ

끝까지 잘 따라오셔서 앱을 완성시켜보아요 ~

이 부분에 밑줄 쳐 놓은 코드를 추가해 주세요.

그리고 Main.Storyboard로 가서 이제 Edit버튼을 만들거에요.

Bar Button Item을 사진과 같이 놓아주시고,

버튼을 눌러 Attribute inspector에 System Item 설정을 "Edit"으로 변경

우측 상단에 원 두개가 겹쳐진 버튼을 클릭(Assistant editor) 후 Edit 버튼을 Control + Drag 후 Connetion을 Action, Name은 editButtonTapped, Type은 UIBarButtonItem으로 변경 후 Connect  버튼을 클릭해주세요.

그 후 만들어진 코드 안에 아래와 같이 코딩해주세요.

override func viewDidLoad()에도 아래처럼 코드 넣어주세요.

 (한줄 추가: navigationItem.left..... 파란색 블록처리)

자, 이제 대망의 마지막 차례입니다 ! 두근두근두근두근

아래쪽으로 내려서 이 부분의 주석을 풀어주시고,

위와 같이 코드를 넣어주시면 이제 끝!! 끝났습니다~

🎉🎉🎉🎉🎉

앱을 실행해주세요.

결과물을 즐기세요

자, 오늘의 해석가이드 "Table View"는 여기까지입니다.

그러나 오늘 만든 앱을 그대로 놓아주세요.

다음 해석가이드에서는 이 앱을 가지고 더욱 디테일하게 만들 예정입니다.

그럼 고생하셨습니다.

지금까지 애플앤마블이었습니다.

#스위프트 #Swipt #apple #애플 #imac #macbook #iphone #ipad #swipt3

#코딩 #코드 #프로그래밍 #애플앤마블 #카드 #목차카드

Apple Education. ‘App Development with Swift.’ Apple Inc. - Education, 2017. iBooks. https://itun.es/kr/SoKQib.l]