본문 바로가기

반응형

iOS 개발/Unsplash 클론 코딩

(16)
Unsplash - 16. 메모리 누수 확인 (진행중) 안녕하세요 Skillist입니다. 물 들어올때 노 저으라는 말이 있듯이, 진행한 프로젝트에 대한 성능체크, 메모리 누수 확인을 하고 있어요. 왜냐면 메모리 누수 확인 공부를 하고 있거든요. 기회가 된다면 "나를 돌아봐" 프로그램의 "박명수 - 이경규" 케미 보세요. 정말 꿀잼입니다. 너~~~무 재미있는데 왜 안떴는지 모르겠어요. 번외로 2006년 3월 11일에 방영된 "무한도전"의 "이경규 - 비난특집"도 추천합니다.ㅋㅋㅋㅋㅋㅋ 아이 오브 살쾡이 본론으로 돌아와서 "Unsplash" 프로젝트에 대한 메모리 누수를 확인해볼게요. 정성스럽게 글 작성완료했는데;;;;;;;;;;;;;; 내용 다 날라가버렸네요 ㅠㅜㅜㅠㅠㅠㅠㅠ 다시 작성해봅니다 ——————————————————————————————————————..
Unsplash - 15. 검색화면 Cell 안녕하세요. skillist입니다. 코로나가 심해지고 있는데, 다들 조심하세요 ㅠㅜㅜㅠ 코로나가 하루 빨리 끝나면 좋겠어요. 바로 시작해볼게요. 검색화면에서 Photo Cell은 PhotoListViewController에서 사용한 PhotoListCollectionViewCell을 그대로 사용했어요. 그래서 설명은 생략할게요. collection Cell입니다. 이런 모양을 가지고 있어요. imageView와 label을 사용합니다. 또한, SnapKit을 활용하여 레이아웃 구성 및 데이터를 설정합니다. 다음은 User입니다. 앞선 글에서 말한적이 있지만, user의 cell은 row값에 따라 상이합니다. 이를 구현해볼게요. 11라인 : imageview를 구현했습니다. 17라인 : stackView를..
Unsplash - 14. Search Result 화면 안녕하세요 Skillist입니다. SearchMainViewController에서 결과 화면을 지정한것 기억하시나요 바로 이부분이에요. 이번엔 검색 결과 화면인 SearchResultViewController을 보겠습니다. 12라인 : collectionView를 선언합니다. 레이아웃은 flowlayout입니다. 또한, cell들을 등록합니다. 28라인 : scope 버튼 변경 시 동작합니다. collectionView를 top으로 이동하고, 변경된 scope에 대한 검색을 수행해요. 43라인 : ViewDidLoad에서 레이아웃을 구성합니다. 60라인 : section은 1개로 구현할거에요. 64라인 : items 개수를 리턴합니다. 68라인 : 현재 설정된 scope Type에 따라, cell을 리..
Unsplash - 13. Search화면 Cell 안녕하세요. Skillist입니다. 어제 너무 머리 아파, 포스팅을 급하게 했는데, Cell 코드 설명이 빠졌더라구요. 그래서 오늘은 Cell에 대해서 알아 봅시다. 너무 간단한것들이라 먼저 구현해보세요~~~~~~~~~~~ 맨 먼저 SearchMainCollectionViewHeader~ 10라인 : Header이다 보니까 UICollectionReusableView를 사용합니다. 11라인 : Header의 text를 보여주는 label입니다. 28라인 : SnapKit으로 레이아웃 제약사항을 구성해줬습니다. 36라인 : title을 전달 받아, text를 지정합니다. 넘 쉽죠??? 다음은 Category에 대한 cell입니다. 12라인 : 다운로드 가능한 이미지 뷰입니다. 19라인 : center te..
Unsplash - 12. Search 화면 안녕하세요. Skillist입니다~~ 오랜만에 찾아왔어요. 주말엔 집중하여 개발하기 좋아, 주말에는 개발을, 주중에는 글작성을 하고 있어요. 오늘은 주말동안 개발한 Search 화면에 대해서 작성해볼게요. 사실은 Search 화면 구현하기 싫어서, 새로운 클론코딩 프로젝트를 진행하다가, Search까지 구현하고자 다시 마음 먹고 구현했어요. 아직 미완성 코드지만, 메인 로직은 구현했기 때문에, 소개해볼게요. 수정 사항이 발생하면, 추후 새로 글 작성할게요. 현재 코드는 다음 레이아웃을 갖게됩니다. 먼저 Search화면은 navigationBar를 가지고 있어요. 그래서 NavigationViewController을 사용하여 TabBarItem을 구현했어요 navigationBar의 rootViewCont..
Unsplash - 11. Account 화면 안녕하십니까 Skillist입니다. 날이 꽤나 춥네요. 개인적으로 더운것보다 추운것을 좋아하기 때문에, 아주 맘에 듭니다. 이번엔 AccountVC에 대해서 알아보려고 합니다. AccountVC는 특정 로직이 없고, 단순 레이아웃만 구성하였습니다. 화면좀 볼까요?? 이전에 만든, UnderLineTextField를 사용했습니다. Account 관련 VC에서 사용하기 위해 만든것이죠. title은 LargeTitle입니다. 그외 버튼을 추가했어요. 쪼~~~끔 귀찮을 뿐이지, 할 수 있습니다. 이번 기회에 SnapKit 라이브러리를 학습해봐요. git에 코드가 있으니, 따로 코멘트는 하지 않겠습니다. Account Group의 LoginViewController, ResetPasswordViewControl..
Unsplash - 10. underLine을 가지는 TextField Hello world~ Skillist입니다. 여러분, 오늘은 UnderLine을 가지는 TextField를 구현할거에요. 이렇게 underLine을 가지고 있죠? 그뿐만이 아닙니다. focus를 가지면 underLine 색상이 tint색상으로 변경돼요. 티가 잘 안날거 같은데 보이나요? 게다가, error 발생시 빨간색으로 error를 표시할 수 있어요. Q. 와~우. 이걸 어떻게 구현해요?? A. 그냥 하면 됩니다. 그럼, 빡세게 가봅시다!! 15, 16라인 : placeholder의 string과 color을 저장할 수 있는 저장 프로퍼티를 선언합니다. 18라인 : under에 추가할 line입니다. 아주 간단하죠? 24라인 : 초기화할때, underLine을 추가하고, SnapKit으로 botto..
Unsplash - 9. PhtoDetailViewController의 제스처 안녕하세요 Skillist에요. PhotoDetailViewController에 구현한 제스처를 알아보죠 231라인 : 제스처를 추가합니다. 233라인 : Fullscreen에 대한 제스처에요. 237라인 : PullDownGesture에요. VC를 아래로 끌어내려 사라지게끔하는 제스처에요. 242라인 : 뷰를 터치하면 isFullScreen값만 토글합니다. 그럼 isFullScreen값을 토글하면 어떤 일이 일어나는지 볼까요? 네, 프로퍼티 옵저버로 willSet, didSet을 사용했습니다. 82라인 : didSet에선 StatusBar와 HomeBar를 세팅하구요 66라인 : 변경될 값에 따라서, topInfoView의 isHidden을 설정하고 애니메이션을 수행합니다. 간단하네요?? 아 물론, ..
Unsplash - 8. 사진 상세 화면(PhotoDetailViewController, Cell)의 메인 로직 안녕하세요 Skillist에요. 이번엔 사진 상세 화면을 살펴볼게요 다음은 상세화면이에요. 상세화면엔 콜렉션뷰 추가 및 구현하여 좌우 스크롤이 가능합니다. 좌우 스크롤 시 상단의 사진 정보가 변경됩니다. 또 화면 터치시 FullScreen Mode로 변경돼요 그리고 화면을 아래로 드래그하면, VC가 사라집니다. 그럼 바로 코드 설명해볼게요 다음은 상단의 View를 구현하기 위한 코드입니다. 14라인 : 상단 뷰를 UIView로 구현했습니다. 20라인 : 상단 뷰의 가운데에 존재하는 label입니다. 28, 36라인 : 상단 뷰 양옆에 존재하는 버튼들이에요. 다음은 collectionView입니다. 45라인 : flowlayout을 활용했어요. 51라인 : 기존 사진에서 다음사진으로 이동할 경우, 자석 처..
Unsplash - 7. 사진 목록 구현하기 안녕하세요. Skillist에요. 이번엔 사진 목록을 보여줄 PhotoListViewcontroller을 알아볼게요. 코드를 기능별로 차근차근 알아볼게요 12라인 : 현재 호출한 페이지 넘버를 저장합니다. 13라인 : 사진 목록을 저장합니다. 16라인 : 아주 소중한 CollectionView입니다. UICollectionViewflowLayout으로, 라인 사이즈 설정하고, uicollectionView를 생성했습니다. collectionView에 대한 delegate와 datasource를 self로 설정했습니다. 25라인 : 콜렉션뷰를 스크롤 할 때, 남아있는 cell의 개수가 일정 수가 되면, 다음 페이지의 사진을 가져올건데, 이를 prefetchDataSource를 통해 구현합니다. 26라인 :..

반응형