# 오늘의 주제
1. 이미지 웹에서 로딩하기
2. 테이블 뷰 섹션 이름 넣기
서른 아홉번째 시간입니다.^^
지난 번에는 스레드 관리와 네트워크 상태 감지까지 해 보았습니다.
잘 실행 되시나요?
혹여나 부족한 부분이 있다면 꼭 댓글주세요!
오늘은 이미지를 웹에서 로딩해서 테이블 뷰에 넣어주고, 테이블 뷰에 섹션 이름 넣는 것 까지 해보려 합니다.
우리가 이미 만들어 놓은 것들이 많으니 소스를 조금만 추가하면 될거예요~
자! 출발!
## 웹 이미지 로드
우리는 지난 번에 item을 불러올 때 책 이미지에 대한 URL을 함께 받아왔습니다.
네, 이렇게 서버에서 정보가 내려올 때, 이미지 데이터를 직접 보내주지 않고 이미지의 주소를 보내줍니다.
혹여 이미지가 필요하면 받아가라~ 그런 뜻이겠죠 ㅎ
그래서 이미지를 불러와서 이미지 데이터를 각 item dictionary에 넣어주는 작업을 합니다.
item dictionary에 이미지를 넣어주고, 아래 테이블뷰 데이터소스 메서드에서 item 내부의 데이터를 불러와서 테이블뷰에 나타내게 되므로, 우리는 이 스레드에서 데이터를 딕셔너리에 넣어주기만 하면 되는거예요~ 플로우를 잘 이해해 보시기 바랍니다 ㅎ
또한, 지난 번에 제가 실수 한 부분중에 우리가 실행하고 있는 검색 스레드에서 테이블뷰의 데이터를 reload하는 부분이 있었는데요, 이는 잘못된 것이고 메인 스레드에서 변경해 주어야 하는 것이 맞습니다. 그래서 그에 관한 부분을 수정했습니다.
그리고 이제 위에서 말씀드린대로 데이터소스 메서드인 cellForRowAtIndexPath 메서드로 와서 이미지도 불러와서 셀에 넣어주는 코드를 넣어줍니다.
그리고 이번엔 책 말고 동영상도 로드해와 볼게요~
그런데 제가 작업하다 보니 지난번에 복사-붙여넣기 신공으로 코드를 작성하다 보니 오타낸 부분이 있더라구요 ㅎ
찾아서 이렇게 다시 바꿔주세용 ㅎ
자, 그리고 이제 아까 책 이미지 데이터를 가져온 것과 마찬가지로 동영상 썸네일 이미지도 가져와 보겠습니다.
책 이미지 URL은 받아온 item 에서 'coverImage'라는 키값으로 찾을 수 있었는데, 여기서는 키값이 'thumbnail'로 되어있네요.
자세한 사항은 다음 오픈 API 의 동영상 검색 섹션을 참고하세요 ㅎㅎ
그런데 우리가 데이터 소스 메서드에 작성했을 때, 이미지를 꺼내오는 키워드는 'coverImage'였으므로 여기서도 item 딕셔너리에 넣어줄 때에는 'coverImage'라는 키로 넣어주었습니다.
이제 준비가 끝났으니 호출해 주어야 겠죠?ㅎ 책 검색 스레드를 만들어 준 것 같이 동영상 검색 스레드도 만들어 줍니다.
텍스트를 변화시킬때와 검색 버튼을 눌렀을 때 모두 해야 하므로 두 번 이렇게 생성해 주죠 ㅎ
생각해 보니 이것도 따로 메서드로 만들어서 빼주는게 좋겠네요~^^
자, 그리고 실행해 봅니다~
그런데 두 가지 정보를 모두 가져왔는데, 어디가 어디껀지 구분이 잘 안가네요
섹션 헤더에 이름을 넣어서 구분을 지어보도록 합시다~
## 테이블 뷰 섹션 제목 달기
자, 이렇게 테이블뷰 딜리게이트 메서드를 하나 더 작성해 줍니다.
책 검색 결과 섹션에는 Book이라는 제목을, 동영상 검색 결과 섹션에는 Video라는 제목을 넣어주었습니다~
짜잔~ 검색 해보시면 이런식으로 이쁘게 섹션이 구분되어지네요 ㅎ
그런데 제가 막 스크롤을 해 보던중 이상한 현상이 생겼어요
분명히 이미지가 들어가 있지 말아야 할 cell에 이미지가 박혀있는거예요 ㅎ
데이터소스에서 불러들일때 제대로 nil처리를 해주지 않아서 생기는 현상이예요 ㅎ
조건을 확인하고 검사해서 원치않는 다른 cell의 내용을 가져오지 않도록 처리해 줍니다.
왜 이런 현상이 발생하는지는 하아... 내용이 너무 길어져서...
일단 cell을 만들 때 이런것에 주의해야 한다는 점 잊지 말아주세용~
이렇게 깔끔하게 처리해 주면 더이상 원치 않는 화면이 나타나는 것을 막을 수 있습니다~
자... 이렇게 오늘도 또 하나 해 보았네요~
포스팅이 점점 길어지고 있어요~ 할 내용들이 정말 많네용 ㅋ
이 모든 내용들을 따로따로 분리해서 할까도 생각해 보았지만 이렇게 묶어서 하나의 프로젝트로 진행하는 것이 실전 감각에 도움이 되실거라 생각하여 이렇게 진행해 보았습니다~
질문사항이나 요청사항 있으시면 댓글주세요~^^
by yagom
p.s 제 포스팅을 RSS 피드로 받아보실 수 있습니다.