1주차(3) - 데이터 관리 / 테이블 뷰(Table View) / 네비게이션

 

---

<3주차 TIL>

오늘은 강의는 한 번에 이해하기 조금 어려운 부분들이 있어서,
두 번째 강의인 '테이블 뷰 구현'은 3번을 봤다..ㅎㅎ
보고 나니 저절로 외워지는 부분들도 있었고, 계속 보니 익숙해져서 자연스레 받아들여졌던 것 같다.

[내배캠]을 시작하고, '하루 12시간'이 진짜 길다고 생각했는데,
복습을 여러 번 하다 보니, 시간이 부족하다는 생각이 들었다.🥹

그래도 하나씩 알아나가는 재미가 있다! ^0^

---

---

오늘 강의 간단하게(?) 정리해보면~!🤥

<3주차_1강>
① array와 dictionary를 활용한 데이터 접근법을 활용한 장점 알아보기
② 설계를 하고 개발을 하다보면 만나게 되는 데이터들을
'모델링이 되어있는 데이터'라고 하는데,
강의를 통해 나도 직접 모델링을 해보기

<3주차_2강>
① 테이블 뷰에 셀(cell)을 추가하기, 그 셀(cell)에 Label 추가하기
② 빌드 후, 실행했을 때 원하는 문구가 보이도록 코드 작성하기
③ 깔끔한 코드를 만들기 위해 extension 활용하기

<3주차_3강>
① 네이게이션을 활용하여 여러 viewcontroller를 서로 연결하기

---

---

그럼 이제부터 '1강_데이터 관리'부터 정리 시작!!


 

---

우선, 'PracticeUI'라는 이름으로 새로운 Project파일을 만들었다.

한 화면에서 바로 보면서 작업할 수 있도록 시뮬레이터도 오른쪽에 함께 띄워놨다.

---

먼저,
view.backgroundColor = .red 
실행하여 잘 연결되어 있는지 확인! 

 

---

역시 푸바오 러버.. 데이터 만들 때도 냅다 바오패밀리 넣기.😂
let friendName: [String] = ["Fubao", "Aibao", "Lebao"]

그리고, Label을 하나 만들어서, 코드랑 연결될 수 있게
cotroll - drag & drop!
(Label 이름 → nameLabel)

 

---

마찬가지로 Button도 하나 추가! (Button → Outlet(X), Action(O))
(→ Button 이름: didTabButton)

스토리보드에 Button이름은 'Change Name'으로 변경!

 

---

var count: Int = 0
( → 일단, 무시. 바로 다음에 바오패밀리 이름 불러올 때 쓸 코드)

nameLabel.text = "Hello!!"

이렇게 하고, 실행시켜서 만들어놓은 버튼(Change Name)을 클릭해보니,
"Hello!!"로 바뀜.

---

nameLabel.text = friendName[count]
(→ 위에 count에 0을 넣었으니, friendName에 0번째 인 "Fubao" 의미.)

다시 실행해서 버튼(Change Name)을 클릭해보니,
"Fubao"로 바뀜.

---

그럼, friendName에 있는 바오 패밀리의 한국어 버전(koreanNames)인
let koreanNames: [String:String] = ["Fubao":"푸바오", "Aibao":"아이바오", "Lebao":"러바오"]
을 만들고,

count = count + 1 을 하면 어떻게 될까?

 

---

※ friendName → friendNames (변경했음) ※

이렇게 한국어 버전의 이름으로 바뀜.

버튼(Change Name)을 클릭하면,
순서대로 "푸바오, "아이바오", "러바오"로 바뀌어 나온다.

---

그럼 이제 Label을 2개 더 만들어서
각 Label에 푸바오, 아이바오, 러바오가 나올 수 있게 해보려고 한다.

위와 같이 2개 또한 코드와 연결한다.
(각 Label의 이름 → bestFriendNameLabel, nextFriendNameLabel)

그리고 만들어 놓은 데이터 활용해서

nameLabel. text = friendNames[0]
bestFriendNameLabel.text = friendNames[1]
nextFriendNameLabel.text = friendNames[2]

이렇게 코드 작성해보자.

실행해서 버튼(Change Name)을 클릭해보면,
위 화면과 같이 바뀐다.

---

그런데, 이렇게 코드를 작성하게 되면
각자 어떤 데이터를 가르키고 있는지 알아보기 힘들다.

그래서 여러 방법으로 이 데이터를 그룹화 할 수 있다.

가장 쉬운 방법으로
struct 혹은 class를 활용하는 방법이 있다.

struct를 활용한 아래 화면 Go!

(기존 코드와 비교하기 위해서 각 바오 패밀리의 이름에는 2를 붙임.)

위 화면을 보면 알 수 있듯이
기존의 코드로 하든, 이렇게 코드로 하든 결과는 같다.

하지만, 데이터가 계속 추가된다면, 지금의 방법이 더 좋다는 것을 알 수 있다.

지금까지
데이터를 명명하고, 가지고 있는 데이터를 그룹화해서(모델링 해서)
알아보기 용이하게 만들어봤다.

이것이 바로 '데이터 모델링'이다.😀

---

이제 '2강_테이블 뷰 구현'이다!

---

테이블 뷰 구현 방법은 크게 3가지가 있는데,
오늘은 가장 간단한 방법을 배웠다.
(이번 강의는 글로만 정리할 예정)

연습할 때 아래 순서대로 진행하면 된다!

---

▷ 위에서 만들었던 PracticeUI 파일 그대로 진행.
▷ 새로운 ViewController 생성하기 ('MyTableViewController'라 하겠음)
▷ is initial View Controller로 설정하기
▷ class에 새로 만든 'MyTableViewController'로 할당하기


(↓)해당 스토리 보드에서 진행(↓)


→ 스토리 보드에서 'Table view' drag & drop!
→ 실행하면, 아무것도 보이지 않으니, 배경 색상 설정 Go!
→ 이어서 스토리 보드에서 'Table View Cell'을
'Table View' 안쪽에 drag & drop!
→ 셀이 보여지나 check! (아마 안보일 거임)


이제 main.storyboard 화면과 새로운 ViewController 같이 띄워놓고 진행


→ 'Table View'를 control로 코드와 연결 (▷ class ~ 밑에)
→ 이름은 'myTableView'라고 하겠음.
→ myTableView.backgroundColor = .blue ( ▷ super. ~ 밑에)
(이렇게 해보면 연결된거 확인 가능!)


이제 UITableViewDelegate, UITableViewDataSource를 추가할 거임.
("나는 테이블 뷰가 동작했으면 좋겠어. 테이블 뷰에 데이터를 넣고 싶어.")
이런 의미임.


class MyTableViewController: UIViewController,
UITableViewDelegate, UITableViewDataSource {
 
→ 이렇게 Go!
(근데, 오류가 발생할 거임. 추천해 주는 대로 Fix 클릭!)

<클릭하면 뜨는 코드 읽어보기>
(외울 수 없다면, 이해하기 위해서.)

"한 section에 몇 개의 row가 들어갔을면 좋겠어?"
→ 첫 번째, code 자리에는 'return 원하는 개수'
ex) return 3

"각 row마다 어떤 셀이 들어갔으면 좋겠어?"
→ 두 번째, code 자리에는 cell을 하나 만들어 주어야 한다.
let cell = myTableView.dequeueReusableCell(withIdentifier:
"MyFirstCell", for: indexPath)

노란색으로 표시한 부분에 빈칸이 있을 것이다.
스토리보드 우측 창에 보면 'Identifier'가 있을 것이다.
거기에 이름 정해주면 된다.
ex) "MyFirstCell"

두 번째 회색 자리에는 IndexPath를 넣어달라고 되어 있으니,
위에 코드에 적힌대로 indexPath

→ 이제 반환해주기.
return cell  (▷ 바로 밑에)

→ (super. ~ 밑에 이어서 아래 코드 추가)
myTableView.delegate = self
myTableView.dataSource = self

이렇게 하고 실행하면, 지정한 개수만큼 셀이 생겨있음!

---

<이제. extension 활용해보기>

extension(확장)을 이용해서 위에 코드를 가져오기.
이렇게 하면 테이블 뷰와 관련된 코드들을 한 눈에 볼 수 있음.

---

데이터를 하나 만들어서 셀에 구현해 볼거임.
(<1강>에서 만들었던 데이터 활용할 예정)

let friendNames: [String] = ["Fubao", "Aibao", "Lebao", "Ruibao", "Huibao"]
( ▷ class ~ 밑에)

→ 그리고 'return 원하는 셀 개수' 자리에
return friendNames.count


이제 이름을 나열해 보려고 한다.

→ 밑에 return cell 위에
cell.textLabel.text = "Fubao"
(cell.textLabel?.text = "Fubao" 로 자동으로 바뀔거임)

그럼 위에 푸바오~후이바오까지 다 나오게 하려면?
반복문을 사용해야 한다.

→ cell.textLabel.text = friendNames[indexPath.row]
로 바뀌보자!

그리고 빌드 Go!!

<끝!🥹>

---

여기까지가 <2강_테이블 뷰 구현> 내용을 정리한 것이다.

---

이제 <3강_네이게이션 및 화면 전환> 정리 시작!

---

네비게이션은 하나 이상의 화면을 오고갈 수 있게 하는 기능이다.
아이폰에서 '설정'을 들어가보면,
원하는 곳에 들어갔을 때, 좌측 상단에 '뒤로가기 키'가 있는 것을 볼 수 있을 것이다.
이게 바로 네이게이션을 활용하여 구현한 것이다. (= Show)
그 밖에도 상세페이지 화면은 또 다른 느낌으로 구현되어 있다. (= Show Detail)

네이게이션(navigation)

---

네비게이션은 어디로 가야할 지 알려주는 장치이다.
이동을 도와주는 기능이기 때문에 사용자가 화면을 계속해서 이동해도 길을 잃지 않을 수 있다.

---

이 기능 또한 Button과 Label 등을 추가했던 것 처럼
Show Library에서 추가할 수 있다.

검색 : Navigation Controller

---

<연결하기 쉬운 방법>

컨트롤러 상단 클릭

하단에 동그라미 누르고, Navigation Controller 클릭.

---

이후에 연결하고 싶은 ViewController를 계속 추가해서
버튼을 만들고, drag & drop을 하면

이 창이 뜬다!
희망하는 스타일로 선택해서 누르면 끝이다!

---