Instagram 회고 (3)

이건준·2022년 3월 25일
0

문제제기

-> Instagram 코딩을 하며 나에게 도움이 될 수 있는 혹은 공부해야할것들을 적어놓는 메모장

문제해결

1. Accessibility


-> 코더가 어느순간 위 코드에서처럼 accessibilityLabel, accessibilityHint라는 코드를 작성하였다

-> 그래서 이게 뭐지? 하는 마음에서 찾아보았는데...

-> 비장애인분들을 위한 즉 UX를 위한 코드였다, 사실 아직까지도 정확한 사용방식을 모르지만 Xcode에 Accessibility Inspector를 열게되면 위와 같은 창이 뜨는데

-> 타깃을 정해주거나 재생버튼을 누르면 여자목소리로 각각의 뷰에 대한 Label, Title, Value, Type에 대해서 말을 한다 오오오오오오

-> 보통 모바일 기기에서는 Voice Over라는것을 실행하여 사용하는것같은데...

2. prepareForReuse

-> 위 코드 또한 코더가 항상 tableCell이든 collectionCell이든 생성하게되면은 위 코드를 항상 사용을 하였다

Q. 대체 왜 계속 이러한 코드를 해주는것일까 ??

-> 기존에 cell들은 재사용하기때문에 셀들이 재사용되기위해 이 메소드가 호출된다는 사실은 알고있었다

-> 그 이유를 찾아보니 내가 기존에 겪었던 문제의 해결방법까지 알 수 있었다
-> 위 화면은 API를 통해서 포켓몬 이미지를 collectionCell에 뿌려주어 보여지게된 화면이다

-> 이의 문제는 너무 빨리 스크롤될때 해당 라벨에 맞는 올바른 포켓몬이미지가 들어가게되는것이 아니라 전혀 생뚱맞은 이미지가 계속 바뀌면서 들어가게되는것이였다

-> 이에 대한 원인은 생각보다 간단했는데 collectionCell이 재사용되기때문이였다

-> 일반적으로 cell들은 우리 보여지는 셀들은 화면에 존재하지만 보이지않고있는 셀들은 재사용큐라는 곳에 대기하고있다가 스크롤되었을때 재사용큐에 존재하는 셀을 꺼내어 보여지게한다

-> 그렇기때문에 스크롤을 빨리 내리게되면은 재사용큐에 있는걸 곧이곧대로 사용하기때문에 전혀 다른 이미지가 보여지게 되는것이였다

결론!!! 테이블셀, 컬렉션셀은 모두 register에 의해서 등록된 셀들을 dequeueReuseableCell 혹은 dequeueReuseableView를 통해서 재사용된다, 헌데 이때 스크롤이 되면 이미 보여지고있던 셀이 재사용큐에 들어가게되는데 스크롤되면서 다시 보여지는 셀들은 prepareForReuse함수가 호출되면서 cellforRowAt메소드에 의해 다시 바인딩되어 나타나게된다

-> 위와 같은 이유로 초기화되지않았던 기존의 셀들이 재사용큐에 나와 기존에 보였었던 이미지, 라벨과 같은것들이 보이다가 다시 자신에 맞는 이미지, 라벨로 변경되어 보이는 불편한 현상들이 나타났던것이다 !!

-> 즉 해결방법으로 cellForRowAt메소드가 호출되기 이전에 prepareForReuse메소드에서 각각의 UI들을 초기화시켜준다면 우리가 눈에 보이기에 바로 그에 맞는 API가 파싱되는것을 볼 수 있을것이다 !!

주의사항...

어쨌든 prepareForReuse메소드에서 초기화를 진행하면 모든 재사용이 되는 셀들은 초기화를 한번 거치고 cellForRowAt메소드에 의해서 바인딩되어 보여지게된다, 그렇기때문에 다시 바인딩되었을때 전에 이미 했었던걸 유지하고싶다던가 이럴 경우엔 cellForRowAt메소드를 통해서 그에 맞춰 코드해야할것이다

3. didSelectRow, deSelectRow

-> 이 또한 코더가 cell에 대한 delegate함수중 셀을 클릭했을때 동작하는 didSelect함수안에 항상 deselect메소드를 넣어주는것을 보고 왜 넣을까? 하는 고민에 빠졌다

-> 그 이유는 기존에 내가 tableViewCell이나 collectionViewCell을 클릭하면 클릭했다는듯이 색이 변하지만 계속 그 색이 유지되면서 보기 불편하여 항상 selectorStyle을 .none으로 두고 따로 setHighlited라든지 토글버튼처럼 따로 만들어주었던적이 있었다

-> 근데 알고보니 이 deselect함수가 위와 같은 문제처럼 계속 그 클릭 색이 유지되는것을 클릭과 동시에 deselect해줌으로써 그런 효과를 없애려고 코드했던것이였다...

-> 메모... 완전 꿀팁

4. scrollToRow, scrollToItem

-> 이는 전에 tableView에서 본적이 있다, tableView에선 scrollToRow를 collectionView에선 scrollToItem을 사용하는것같다

-> 이 함수는 3개의 인자를 받는데 첫번째 인자 at에선 indexPath를 이용하여 어디로 스크롤될것인지 두번째 인자 at에선 그 이동한 indexPath가 상대적으로 어떤 위치인것인지 마지막 인자인 animated는 애니메이션 효과를 넣을것인지 !!

-> 위 코드에선 row 0 section 1인 곳으로 스크롤되고 그곳은 .top 즉 상대적으로 맨 위를 의미합니다하고 알려주는것이다 !!

0개의 댓글