연락처 관리 앱 [STEP3] Howard,Mond

[JEON-Sungsu]

버드 : @yeji1008, @JEON-Sungsu

리뷰어: @corykim0829

STEP3 - 연락처 삭제 / Cell Layout / Dynamic Type

• 필수 테이블뷰의 셀을 스와이프하여 삭제하는 메뉴를 보이고, 실제로 삭제할 수 있도록 구현합니다.
• 아래 기능 중 모두 구현하기에 시간이 부족하다면 구현하고 싶은 기능을 우선적으로 구현해보세요.
  i. 검색기능 통해 연락처 목록 내의 특정 연락처만 테이블뷰에 남길 수 있도록 구현해 주세요.
  ii. Cell을 사용자정의하여 원하는 레이아웃으로 표현하도록합니다. (예시와 똑같지 않아도 됩니다.)
  iii. Dynamic Type을 활용하여 시스템 설정에 따라 앱 글자 크기가 변경될 수 있도록 구현해주세요.

이번 스텝 수행 중 핵심 경험

• 테이블뷰 셀 편집
• 사용자정의 테이블뷰 셀 구현
• 테이블뷰 검색기능 구현
• Dynamic Type 적용

프로젝트 구조

• Controller
  • WholeListTableViewController
  • AddNewContactViewController
  • CustomTableViewCell
• Model
  • ContactBook.swift
  • Person.swift
  • InputError.swift
• View
  • Main
  • Assets
  • LaunchScreen

프로젝트 동작 화면

코드 설명

1. UISearchResultsUpdating
   • 검색 창의 입력을 받기 위해서 UISearchResultUpdating 프로토콜을 채택하여 사용자가 검색창에 입력을 할 때 마다, 기존 리스트의 name 을 filter하여 새로운 배열에 추가하게 만들었습니다.
   • localizedCaseInsensitiveContains 을 사용하여, 입력값이 대/소문자 구분없이 검색이 가능하도록 만들었습니다.

     extension WholeListTableViewController: UISearchResultsUpdating {
         func updateSearchResults(for searchController: UISearchController) {
             guard let text = searchController.searchBar.text else {
                 return
             }
     
             searchFilterdList = self.contactBook.personContactList.filter {
                 $0.name.localizedCaseInsensitiveContains(text)
             }
     
             tableView.reloadData()
         }
     }

2. isSearching
   • 사용자가 검색을 시작하게 되면, tableView가 cell 을 그리기 위해 filter가 된 데이터를 가지고 cell을 그려야 되고, 아닐때는 기존의 데이터로 그려야하는 분기처리를 위해서 isSearching 이라는 연산 프로퍼티를 만들어서 검색창이 활성화 되었을때, 검색창에 text가 존재할때만 true값을 리턴해주도록 만들었습니다.

      private var isSearching: Bool {
             let isActive = searchController.isActive
             let isSearchBarHasText = searchController.searchBar.text?.isEmpty == false
             return isActive && isSearchBarHasText
         }

프로젝트를 진행하며 고민한 내용

1. 검색 기능을 만들기 위해서는 searchBar를 사용하는 방법과 searchController를 사용하는 방법 2가지가 있어서 어떤 것을 사용하면 좋은지 고민하였습니다.
2. 연락처 검색 기능을 만들 때 대소문자 구분을 안하도록 예를 들어 'Howard'를 검색하고 싶으면 'Howard' 혹은 'howard' 둘 다 검색이 가능하도록 하고 싶었습니다. localizedCseInsensitiveContains를 사용하여 구현하였습니다.

궁금한 사항

1. 연락처 리스트 화면에서, 이름,나이,연락처 정보에 Dynamic type을 설정했을 때, text의 크기를 키우면 label 의 text 가 ... 말줄임으로 되는데, 저희가 원했던 것은, text가 커져서 container의 크기를 초과되는 상황이 오면 ...으로 처리되는게 아니라, 텍스트의 크기를 더이상 키우지 않게하여 ... 처리가 안되도록 하고 싶은데 어떻게 해야될 지 방법을 못찾았습니다. 어떻게 해결해야 할까요?
2. Dynamic type을 코드로 구현하는것과, storyboard를 통해서 구현하는것의 장단점은 어떤것인지, 현업에서는 주로 어떤 방식으로 구현하는지 궁금합니다!

참고 링크

• 아래 링크를 참고하여 코드를 작성하였습니다. 링크를 보고 바로 사용한 것이 아닌 참고 + 완전히 이해한 후에 프로젝트에 사용하였습니다.
  TableView Cell 삭제
  UITableViewCell Custom
  Dynamic Type
  UISearchController

[corykim0829]

두분 마지막 스텝 정말 고생하셨습니다!

궁금한 사항

1. 연락처 리스트 화면에서, 이름,나이,연락처 정보에 Dynamic type을 설정했을 때, text의 크기를 키우면 label 의 text 가 ... 말줄임으로 되는데, 저희가 원했던 것은, text가 커져서 container의 크기를 초과되는 상황이 오면 ...으로 처리되는게 아니라, 텍스트의 크기를 더이상 키우지 않게하여 ... 처리가 안되도록 하고 싶은데 어떻게 해야될 지 방법을 못찾았습니다. 어떻게 해결해야 할까요?

➡️ label numberOfLines를 아직 처리를 안하신 것 같아서 이 부분 한번 점검해보면 좋을 것 같습니다!

Dynamic type을 코드로 구현하는것과, storyboard를 통해서 구현하는것의 장단점은 어떤것인지, 현업에서는 주로 어떤 방식으로 구현하는지 궁금합니다!

➡️ Dynamic type 에 대한 질문을 해주셨지만 결국 이 질문은 코드와 스토리보드, xib 선택 이슈로 귀결된다고 생각이 듭니다. 명확한 정답은 없습니다. 근데 다만 이번에 구현하신 것처럼 스토리보드에 tableView와 cell을 모두 구현하면, 이 tableView를 다른 곳에서 재사용하거나 특정 뷰컨트롤러 스토리보드에 옮기는 것은 번거로워집니다. 즉, 유지보수가 어려워지죠.

그래서 현업에서도 조직마다 스토리보드, 코드, xib를 어느정도 섞어서 사용하는지는 다 다르다는 점을 참고해주시고, 유지보수가 잘되는 쪽으로 고민을 해보면 좋을 것 같습니다!

[corykim0829]

이렇게 searchFilteredList를 놔두는 것도 괜찮지만, 추후에 코드들이 많아지면 복잡해질 수 있습니다.
기존 연락처와 같이 데이터들을 관리할 객체를 생성해서 처리하는건 어떨까요?

[JEON-Sungsu]

여기 부분은 오늘 시간이 부족해서 완료하지 못했습니다. 새로 알게된 문제가 하나 있었는데, 검색을 통해서 나온 리스트를 삭제했을 때, 문제가 발생하더라구요.. 그래서 말씀해주신대로 따로 객체를 생성해서 처리하면 이부분도 해결될 것 같다 라고 생각했는데, 일단.. 오늘은 시간이 부족해서 이후에 다시 만들어서 해보도록 하겠습니다!

[corykim0829]

이 부분은 제가 위에서 말한 데이터 관리하는 객체를 변경하신다면 변경해주시고

다음으로 cell에 있는 UI 요소들을 직접 가져와서 데이터를 주입시키는 것보다 뷰 요소인 cell에게 데이터를 넘겨서 뷰를 업데이트 하는 흐름으로 개선을 하면 좋을 것 같아요.

[JEON-Sungsu]

여기는 cell 에게 데이터 넘겨줘서 업데이트하도록 변경하였습니다!

[corykim0829]

CustomTableViewCell이라고 추상적인 클래스명을 갖는 것보다는, 어떤 Cell을 나타내는지 간단한 네이밍을 해주면 좋을 것 같아요!

[yeji1008]

9a08713
연락처 정보를 담고있는 TableViewCell이라서 ContactInformationTableViewCell로 네이밍 변경하였습니다. Cell의 Identifier도 ContactInformationCell로 변경하였습니다.