[Clone/Instagram] 팔로우, 언팔 기능 추가. 이미지 처리 개선 | 새롭게 알게 된 개념 & 느낀점 #10

[Yang seung hyun]

새롭게 알게 된 개념

• UISearchController

검색을 하면 특정 단어만 tableView cell에 나오도록 하는 방법.

UISearchResultsUpdating 프로토콜을 채택해서 updateSearchResults(for:)
메서드로 사용자가 검색을 할 때마다 매개변수.searchBar.text를 통해 받아지는 바인딩 된 사용자의 검색 단어를 얻어서 db의 특정 키워드에서 항목들을 찾아낸다.

그 예로 검색 창에서 타 사용자의 아이디를 찾고 싶은 경우 filter 메서드를 사용한다. 조건에 맞는 원하는 특정 index만 [Element]로 반환하는게 filter함수이다. 그렇게 특정 데이터만 반환된 리스트를 따로 프로퍼티에 저장해서 TableView cell을 특정 조건에 맞게 갱신하면 된다. filter에 의해 searchBar의 바인딩 된 값은 곧 사용자가 검색을 했음을 의미함으로 바인딩 될 때마다 tableView.reloadData()를 통해서 tableView의 numberOfRowsInSection, cellForRowAt를 구현하면 된다.

• 사용자끼리의 팔로우 관계는 어떻게 생성될지에 대해서 많이 궁금했다.

한 휴대폰에서 A가 로그인 했다면 나를 제외한 다른 사람들한테 팔로우를 걸 수 있다. 이때 팔로우를 눌렀을 때 그 사용자에 대한 db의 특정 위치에 값을 증가시키면 된다. 여기서는 맨 처음에 회원가입을 할 때 이메일과 비밀번호를 통해 유일한 사요자 구별 키 값인 uid를 받는데 이를 활용해서 사용자의 인적사항을 포함한 도큐먼트를 uid로 저장하고 팔로우나 언팔도 각각의 uid에 대해서 몇명의 사용자가 팔로우 했는지 uid를 통해 저장, 중복처리를 하면 된다.

누군가를 팔로우 할 때는 followers. following 둘 다 업데이트 해야한다.

앱을 사용중인 현재 사용자가 누군가를 팔로우 한다면 팔로우 당한 타 사용자의 식별 아이디가 필요하다. 그 해당 식별자의 팔로워 수를 증가시키려고 등록해야 하기 때문이다. 그렇다면 내가 팔로우 버튼을 눌렀을 때는 내가 팔로우 중인 db에 타 사용자를 추가해야 하고 타 사용자의 팔로워 숫자에 내 계정을 등록시켜야 한다. 여게서 타 사용자의 모든 정보를 등록해야 할 까? x 최소한으로 식별 가능한 ex) uid와 같은 정보만 등록하면 된다.

느낀점

• 클린 코드를 읽은 후에 중복되는 코드가 없에 최소한, 효율적인 코드를 구성하고 싶어서 ViewModel이 다른 controller에서 실행되는데 성능이 거~의 같아서 컨트롤러는 다르지만 VM을 같은 것을 사용했는데 기능을 추가하다보니 점점 두 컨트롤러의 VM차이가 나서 결국 따로 분리하게 됬다. 따라서 일단 따로 분리하고 다 구현했을 때 같은 거를 묶는 식으로 개발을 해야 할 것 같다는 생각을 했다.

• 강의에서 파이어베이스의 Storge에서 이미지를 다운 받아올 때 SDWebImage 오픈 라이브러리를 사용한다. 이 라이브러리의 함수를 쓰면 이미지를 받아와 ImaeView에 저장하고 비동기 처리와 동시에 캐싱 처리까지 되는 것 같다. 근데 실력향상할겸 그냥 내가 스스로 비동기 처리를 했는데 이미지 한개 받을 때는 그냥 불러오면 됬었다. 근데 여러개의 이미지가 있는 cell을 구현할 때는 dequeue관련 함수를 통해서 cell을 불러오는데 이미지를 다시 불러올 때 상당히 느렸다. 그래서 찾아본 결과 NSCache를 공부해야 할 것 같다. 그렇지 않으면 테이블 뷰를 예로들 때 위에 스코롤 하면 이미 있던 이전 이미지가 나온 후에 스크롤이 끝나고 해당 cell의 이미지로 로드된다. 일단 임시로 이미지가 이전 이상한 이미지에서 현재cell의 이미지로 로딩되는 것보단 흰색 -> 이미지로드로 바꾸었다. 추후에 바로 NSCache등을 통해서 효율적으로 이미지 처리를 해봐야겠다.

//좌 이전 이미지 , 우 임시로 개선한 이미지

마주한 에러

• Auth.auth().currentUser 값이 동기적으로 갱신되지 않는 에러

Auth.auth().currentUser를 통해서 현재 핸드폰에 로그인 한 사용자의 정보를 토대로 팔로우, 언팔, 정보등을 기록하고 업데이트 한다. 지금 현재 사용자가 로그아웃 후 다른 계정으로 로그인 했을 때는 즉각적으로 Auth.auth().currentUser의 값이 Auth.auth().signIn(withEmail:password:)를 통해 synchronous하게 갱신되야 한다. 하지만 실제로 그렇지 않았다. (참고 글) 음.. Auth.auth().currentUser에 상당히 의존적이었다. 프로필 상세정보, 이 정보를 토대로 다른 사용자의 팔로우 언팔 등을 다 Auth.auth().currentUser의 특정 값을 통해서 파싱 받고 처리했는데.... 앱을 완전히 종료 후 재 시작해야 비로소 이 값이 최신 상태로 바뀌기 때문에 다른 대안이 필요했다.

// AUTH.updateCurrentUser(user:) 이 함수도 적용x

영구 저장소를 사용해서 현재 로그인 중인 사용자의 정보를 파싱받을 수 있는 키 값만 따로 저장하고 현재 정보를 파싱받는 관련 함수을 전부 고치니 정상적으로 현재 사용자의 정보가 즉각 갱신됬다.

// currentUser대신 영구저장소에 로그인된 사용자의 정보를 등록하고 이를 토대로 currentUser 정보를 fetch한 이후에 Auth.auth().currentUser의 단점을 보완할 수 있었다. 아래 영상은 정상적으로 팔로우, 언팔이 되는 영상이다.

구현하면 서 어려운 점

• 지금까지 제일 까다로운 것은 다량의 이미지 처리를 효율적으로 사용하도록 구현하는 방법이 제일 어렵고 지금도 고민중이다.

• 파이어베이스에서 이미지 다운을 너무해서 할당량을 초과했었는데 음? 몇번 하지도 않은것 같은데 할당량을 초과해서 기능을 이미지 파싱이 잘 됬는지, 타 VC에서 이미지 로드가 잘 됬는지.. 중복된 코드, 중복 파싱 하려는 코드를 없애는데 할당량 초과가 되버리니까 확인을 못해 답답했다. 파베 쓸 때 이점 조심해야겠다.

색다른 시도

• 검색창에서 특정 cell을 터치할 때 이전에 저장된 dequeue의 cell의 정보를 토대로 사용자의 디테일한 정보를 보여 줬다.

• 추후에 또 개선할 건데.. 일단 임시적으로 정확한 정보를 보여주기 위해 재사용큐에서 꺼내올 때 흰색으로 구현했다.

• Auth.auth().currentUser가 꼭 앱을 종료했다 다시 실행해야 바뀌기에 영구 저장소를 활용했다.