[니카내카] 업데이트 내역 정리(+ 리드미 수정) 및 코드 개선 ing

업데이트 내역 정리 

이 글을 작성하고 있는 지금 .. 221030 이다 ..

그동안 니카내카 업데이트는 꾸준하게 .. (?) 하고 있었지만 정리를 하고 있지 않았어서 .. (키워드만 정리해두고 어떤 이슈가 있었는지 등의 ..) 오늘 날을 잡고 한번 사-악 정리를 했다 ..

 

정리를 하면서 기분 좋아지는 나 .. 역시 J인간 ..

 

노션 정리 

니카내카 작업 노션 안에 소개 노션이 있는데 .. 소개 노션이 앱에 연결된 정보라서 작업 노션을 숨기고 소개 노션만 공개한 상태이다.

그래서 아마 .. 현재는 아래의 링크로 들어가도 접속할 수가 없을텐데 곧 .. 두 페이지를 나눠서 작업 노션과 소개 노션을 분리해야겠다 .. !

 

https://receptive-humidity-bf2.notion.site/3fc56a8891a74b2cb4aec9ea16da3be9

니카내카

(-> 일단 다시 공개로 돌려놓았다 .. 크게 문제가 될 것 같지는 않은데 .. 생각을 해보자 .. !!)

 

 

개인일지도 .. 물론 여전히 빠진 부분이 있지만 최대한 다 채웠다 .. 후 .. 겨울방학 끝나기 전에 밀린 일기를 끝내는 기분이랄까 ..

https://www.notion.so/c18b22fa0fc7420fa55d06a3f4986500

개인일지

 

 

리드미 업데이트 

그리고 .. 그것과 함께 리드미도 같이 업데이트 했다.

좀 더 예쁘게 꾸미고 싶은데 .. 쩝스 ;;

시간이 나면 .. 이력서 준비할 시기 즈음 되어서 필요한 레포지토리의 리드미를 한번 다 정리해야겠다 ..

(디투가 진짜 예쁘게 해놓았는데 ㅋㅋ)

 

---

코드개선 

이번주에 Rx를 배웠기 때문에 .. 나름 오 .. 좀  알겠다 .. 싶어서 바로 적용해보았다 ..

개념을 정리하는 것이 중요하고 .. 그것과 더불어서 직접 적용해보는 것도 중요하다고 생각한다. 그래야 흐름까지 잘 이해가 된기 때문에 .. ?

 

 

검색 화면 코드개선 

먼저, 조금 만만한? 검색화면 .. 을 골랐다.

만만하다의 이유는 Rx와 함께 사용하면 좀 더 좋을 것 같다. 였는데 Rx는 반응형을 위한 것이므로 검색했을 때, 실시간 검색이 반영되어서 UI가 업데이트 되는 검색 화면에 적합하다고 생각이 들었다.

 

 

코드를 개선하는 좀 더 자세한 과정은 따로 글에서 다루도록 하고 .. 여기에 간단한 느낀점?을 적자면 ..

Rx를 적용할 것이라면?

• 먼저 MVVM 패턴으로 뷰모델을 만들고
• 뷰모델에서 모델을 참조해서 모델의 변화에 따라서 다룰 로직과 함께
• 뷰의 인터랙션 등을 받아서 처리할 비즈니스 로직을 뷰모델에 적으면 된다. 

즉, MVVM 패턴을 잘 적용한 뒤에 Rx를 사용해서 반응형으로 관리하고,

그 뒤에 좀 더 찾아보면서 RxDataSource 등을 사용하면 좋을 것 같다.

 

 

Bind하는 코드만 조금 적자면 아래와 같다.

    private func bind() {
        viewModel.filteredLocation.accept(viewModel.location)
        
        viewModel.filteredLocation
            .withUnretained(self)
            .bind { vc, location in
                vc.rootView.tableView.reloadData()
            }
            .disposed(by: disposeBag)
        
        searchBar.rx.text.orEmpty
            .debounce(RxTimeInterval.microseconds(5), scheduler: MainScheduler.instance)
            .withUnretained(self)
            .bind { vc, value in
                if value != "" {
                    vc.viewModel.isFiltering.accept(true)
                    vc.viewModel.filterLocation(value)
                }
            }
            .disposed(by: disposeBag)
        
        searchBar.rx.searchButtonClicked
            .withUnretained(self)
            .bind { vc, _ in
                vc.searchBar.resignFirstResponder()
            }
            .disposed(by: disposeBag)
        
        viewModel.filteredLocation
            .bind(to: rootView.tableView.rx.items(cellIdentifier: MainSearchTableViewCell.reuseIdentifier, cellType: MainSearchTableViewCell.self)) { [weak self] index, item, cell in
                guard let self = self else { return }
                
                if let text = self.searchBar.text {
                    if self.viewModel.isFiltering.value {
                        cell.setData(item, true, text)
                    } else {
                        cell.setData(item, false, text)
                    }
                }
            }
            .disposed(by: disposeBag)
        
        rootView.tableView.rx
            .itemSelected
            .withUnretained(self)
            .subscribe(onNext:  { (vc, value) in
                vc.locationClosure?(vc.viewModel.filteredLocation.value[value.row])
                vc.navigationController?.popViewController(animated: true)
            })
            .disposed(by: disposeBag)
    }

 

큰 흐름은 아래와 같다.

• SearchBar에서 검색을 하면 이 이벤트에 따라서
• 뷰모델의 filterLocation 메서드를 호출하여 검색한 키워드에 맞는 배열을 거른다.
• 뷰모델에서는 filtering이 된 배열을 BehaviorRelay 형태로 선언한 모델에 넣어서 새로운 이벤트를 방출하면
• 이를 bind를 통해서 테이블 뷰에 reload하여 보여준다.

 

그리고 tableview에도 rx를 적용해서 검색 중일 때와 아닐 때의 DataSource를 분리했고,

하나의 데이터를 선택했을 때에 대한 클로저 실행 및 화면 전환도 구현했다.