그렇다 어김없이 개인과제가 시작되었다.

이름하야 " 포켓몬 전화번호부 " 만들기. 시작한다.

우선 새로운 프로젝트를 만드는데 스토리지는 core data로 꼭 지정해주기.

Lv.1 UI 구현하기

레벨 1 부터 차근차근 해나가보자!

우선 예시도 봐야하니 더미데이터를 만들어줬고 테이블뷰도 생성했고,

새로운 swift파일을 만들어 안에 tableViewCell에 대한 코드를 작성했다.

---

clipToBounds

contentMode는 이미지 뷰 내에서 이미지가 어떻게 표시될지 결정하는 속성인데,

.scaleAspectFill으로 설정한 이유는 이미지가 이미지 뷰의 크기에 맞게 확대되거나 축소되어 꽉 차게 표시되도록 하기 위함이다.

단점은 비율을 유지하면서 이미지가 잘리기도 할 수 있다는 점이 있고,

이미지의 가로 세로 비율은 유지가 되지만 이미지의 일부가 뷰의 경계를 넘을 수 있다.

그래서 뒤이어 clipsToBounds를 true로 적용해본 것인데,

이미지 뷰의 경계를 벗어난 내용이 잘리도록 설정하는 속성이라 true로 설정하면 이미지가 이미지 뷰의 경계를 넘어가지 않도록 잘리게 된다.

음 그러니까 이미지가 .scaleAspectFill로 확대되어도 뷰의 크기를 초과한 부분은 보이지 않게 잘린다는 것.

---

안전한 초기화 방법

프로필 이미지, 이름 레이블, 전화번호 레이블 정도만 추가하고 초기화를 해주었다.

근데 초기화 당시에는

이런식으로 Xcode가 추천한 대로 Fix를 해주었지만,

나는 아래의 코드로 작성했다. (까먹어서 마빈님이 한번 더 알려주심)

required init?(coder: NSCoder) {
    super.init(coder: coder)
}

required init?(coder: NSCoder)에서 super.init(coder:)를 호출하면

인터페이스 빌더(스토리보드나 XIB 파일)에서 해당 클래스를 사용할 때 자동으로 인스턴스가 생성되는데,

이 방식은 코드와 인터페이스 빌더 간의 일관성을 유지하는 데 중요하다. (기억 좀 하자)

왜 이 방식이 중요한가?

• 스토리보드와 코드의 일관성
  이 방식은 코드와 스토리보드에서 동일한 클래스를 사용하고 싶을 때에도
  인터페이스 빌더에서 해당 클래스를 제대로 초기화할 수 있게 해준다고 한다.
  super.init(coder:)이 부모 클래스의 초기화 메서드를 호출하기 때문에,
  스토리보드에서 객체가 제대로 생성될 수 있도록 보장되기 때문이다.

• 필수 구현
  required는 해당 클래스가 반드시 구현해야 하는 초기화 메서드이기 때문에,
  인터페이스 빌더에서 클래스를 사용하려면 이 메서드를 반드시 구현해야 한다.

결론적으로 super.init(coder:) 방식은 인터페이스 빌더에서 해당 클래스를 사용할 때 인스턴스가 자동으로 생성이 되고,

코드에서와 동일한 방식으로 객체를 다룰 수 있게 해주는 멋진 코드다.

---

tableView 델리게이트, 데이터소스 지정

배운대로 아래에 extension을 추가해서 분리해줬다.

아래에 같은 오류들이 쫘악 나왔는데 알고보니

오류의 원인은 nameLabel과 phoneNumberLable이 private으로 선언되어 있어서

ContactListViewController에서 접근할 수 없기 때문이었다.

private 접근 제어자는 선언된 클래스 내부에서만 접근 가능하도록 제한하기 때문..

해결하려면 외부에서 접근 가능하도록 수정해야 해서 저 private 부분을 모두 public 으로 변경해주니 오류가 사라졌다.

굿!

---

상단에 네비게이션 버튼 추가하기

그리고 여기서 추가해야하는 부분은 오른쪽에 "추가" 버튼이 있어야하고 상단에 친구 목록이라고 써있어야한다.

코드를 넣고 실행해보니

원하는대로 나오긴했지만, 친구목록 부분이 너무 짧다. 예시에서는 넉넉했는데..

일단 UI에 너무 사로잡히지말고 기능 구현이 먼저라서 넘어간다.

---

가자 Lv.2~3 으로!

연락처 추가화면 구현을 해보자.

UITextField 접하다

새로운 뷰 컨트롤러를 만들어주었고, 예제를 보며 UI부터 차근차근 진행했다.

이 과정에서 UITextField를 처음 써봤는데,

저 borderStyle은 텍스트 필드의 테두리 스타일을 설정하는 속성이고,

.roundedRect는 둥근 모서리 형태의 직사각형 테두리 스타일을 의미한다고 한다.

그 밖의 여러가지는 이따가 테스트를 하나씩 해보려한다.

우선 잘 넘어가는지 확인하는 1차 점검. 잘 넘어간다.

이제 나머지 UI를 스냅킷으로 레이아웃을 잡아줘봅시다.

---

굿. 이제 잘 나오는데, 이미지 크기가 작아서 늘려주기만 하면 되겠다.

내일 api 연결 부분은 내일 작성해보겠다.

---

음...

그래도 테이블뷰 몇 번 연속으로 사용했다고 UI 설정하는게 어렵지 않았다.

그리고 네비게이션뷰에 대해 그나마 조금 더 이해하게 되었다.

확실히 스토리보드보다 코드베이스가 쾌감도 있고 재밌다.