iOS 프로젝트/클론 10

[iOS] Jetflix 9. 리팩토링 - 무한 스크롤과 TabBar 클릭

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 서론이번 Jetflix 9 리팩토링은 무한 스크롤과 Tab 이벤트를 구현했습니다. 상용 앱처럼 스크롤 맨 아래까지 내려오면 다음 컨텐츠를 load하는 기능과 탭바를 누르면 맨 위로 스크롤되는 기능입니다. (이번 포스팅을 마지막으로 iOS 공부는 줄이고 코딩 테스트 연습에 주력하려고 합니다. 작년부터 코딩 테스트를 보기 시작했는데 초조함, 부담감때문인지 어째 작년보다 통과율이 더 낮네요 ㅎㅎ; 그래서 iOS 공부보다는 코딩테스트 공부에 주력하려고 합니다. iOS 취업을 하려면 iOS 공부를 줄여야 하다니.. 아이러니하면서 속상함이 크네요. (코테만을 ..

[iOS] Jetflix 8. 리팩토링 - 의존성 주입

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 서론 이번에는 프로젝트에 의존성 주입을 개선했습니다. 기존에는 객체가 필요한 곳에서 바로 객체를 생성하여 사용했습니다. 그래서 ViewController에서 ViewModel을 생성할 때면 UseCase와 Repository를 매번 생성해야 했습니다. 이를 DI Container를 이용해 외부에서 주입해서 중복되는 코드를 줄이고, 의존성 관심사를 DI Container로 몰아 넣어서 프로젝트 관리 용이, 객체 재사용성을 높이도록 개선했습니다. let viewModel = HomeViewModel(getContentUseCase: .init(repos..

[iOS] Jetflix 7. 리팩토링 - CollectionView 개선

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 서론 이번 포스팅에서는 리스트 레이아웃을 개선한 내용을 작성하겠습니다. 기존의 UITableView + CollectionView FlowLayout 구조를 CollectionView CompositionalLayout 단일 구조로 변경했습니다. 고수님들께는 간단한 작업일 수 있지만, 저는 이 작은 작업에서도 왜 오래된 코드를 최신 코드로 바꾸기 어려운건지 느낄 수 있었습니다 ㅎㅎ; 개선 내용은 아래와 같습니다. CollectionView CompositionalLayout 적용 UICollectionViewDiffableDataSource 적용 D..

[iOS] Jetflix 6. 리팩토링 - UseCase 구현

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 서론 원래는 UseCase와 View 개선을 함께 다루려고 했지만 UseCase만 먼저 작성하기로 했습니다. Clean Architecture에서 UseCase를 구현할 때 가장 애매하고 고민이 많아지는 것 같습니다. Clean Architecture 학습을 목표로 제 프로젝트에 맞게 고민하면서 코드를 작성하고 있으나 잘 구현하고 있는지...조차 잘 모르겠습니다. 혹시나 보시는 고수분이 계신다면 댓글로 가르침 주시면 정말 감사할듯 합니다 ㅎㅎ 개선 내용은 아래와 같습니다. UseCase를 구현하여 ViewModel과 Repository의 연결을 끊음..

[iOS] Jetflix 5. 리팩토링 - ViewModel 개선

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 개선 내용 첫 번째 리팩토링은 코드와 구조 수정에 집중했습니다. MVC 구조를 MVVM으로 변경 Enum을 이용해 ViewModelActions 정의 Enum을 이용해 API 콜 메서드 정리 1. 클론 코딩 영상에서는 MVVM이라고 설명하고 있었지만, 제가 느끼기에는 MVC의 구조를 가지고 있다고 느꼈습니다. ViewController에서 데이터를 직접 API Call을 하고 데이터를 생성, 조작했기 때문입니다. 따라서 이부분을 개선하여 ViewModel에서 데이터를 생성, 관리했습니다. 이 과정에서도 고민점은 있었는데요. 과연 변화가 없는 데이터도..

[iOS] 넷플릭스 클론 코딩 4. CoreData 사용 (영상 끝)

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 이번 포스팅까지가 영상을 따라 구현하는 내용입니다. 다음 포스팅부터는 스스로 고민하며 리팩토링하는 과정을 작성하겠습니다. 서론 넷플릭스 클론 코딩 - 4 내용은 Amr 유튜브 채널의 Building Netflix App in Swift 5 and UIKit - (Xcode 13, 2021) 에피소드 11, 12, 13, 14 내용입니다. 에피소드 11, 12, 13, 14에서는 유튜브 API와 웹뷰를 사용해 트레일러 영상을 재생하고, CoreData를 이용해 Entity를 저장하는 과정까지 진행했습니다. 구현 내용 Youtube Data API 사용..

[iOS] 넷플릭스 클론 코딩 3. 이미지 표시

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 서론 넷플릭스 클론 코딩 - 3 내용은 Amr 유튜브 채널의 Building Netflix App in Swift 5 and UIKit - (Xcode 13, 2021) 에피소드 7, 8, 9, 10 내용입니다. 에피소드 7, 8, 9, 10에서는 Upcoming 화면과 Search 화면에 CollectionView를 등록하고, 이미지를 보여주는 작업을 했습니다. 이 파트를 보면서 알게된 것은 ViewModel을 View에서 사용하는 Model로 구현하고 있다는건데요. 단어만 보면 틀린건 아닌거 같은데... MVVM에서의 VM 역할과는 거리가 멀다고..

[iOS] 넷플릭스 클론 코딩 2. 네트워크 통신

* 진행 코드는 https://github.com/jeongju9216/Jetflix에서 볼 수 있고, PR에서 에피소드 단위로 코드를 확인할 수 있습니다. 서론 넷플릭스 클론 코딩 - 2 내용은 Amr 유튜브 채널의 Building Netflix App in Swift 5 and UIKit - (Xcode 13, 2021) 에피소드 5, 6 내용입니다. 에피소드 5, 6에서는 네트워크 통신을 진행했습니다. API는 https://www.themoviedb.org를 사용했고, 사용법은 원본 영상을 참고해 주세요. 구현 내용 네트워크 통신 Protocol과 Enum을 이용해 Mixed Type 파싱 completionHandler -> async/await 변경 Domain, Data 레이어 추가 Repo..

[iOS] 넷플릭스 클론 코딩 1. 기초 UI 구현

서론 넷플릭스 클론 코딩 - 1은 Amr 유튜브 채널의 Building Netflix App in Swift 5 and UIKit - (Xcode 13, 2021) 에피소드 1, 2, 3, 4 내용입니다. 아직 초반이라 그런건지, 클론 코딩이라 그런건지 코드를 보면 확실히 일회성 코드라고 느껴졌습니다. 이런 부분은 포스팅에 기록해두고 리팩토링을 하며 유의미한 클론 코딩 경험을 가지려고 합니다. 구현 내용 에피소드 1, 2, 3, 4에서는 아래 내용을 진행했습니다. TabBar 생성 ViewController 파일 생성 및 TabBar 등록 HomeVC에 TableView 추가 Table HeaderView 추가 네비게이션바 설정 위로 스크롤 시 네비게이션바가 숨겨지도록 설정 아래는 지금까지 구현한 스크린..

[iOS] 넷플릭스 클론 코딩 0. 목표

목표 기존에는 클론 코딩의 효과에 대해 의아함이 있었지만, 인턴십을 하면서 생각이 바뀌었습니다. 클론 코딩을 하면서 스킬이 늘고 다른 프로젝트에 응용할 수 있기 때문입니다. 이번 넷플릭스 클론 코딩도 이와 같은 목표로 시작합니다. 넷플릭스 앱에는 이미지, 리스트와 관련된 기능이 많습니다. 1. 가이드에 따라 개발을 하고, 2. 제 코드 스타일로 리팩토링을 하고, 3. 제 개인 프로젝트에 기술을 적용을 해보려고 합니다. 클론 코딩은 1년 전에 Amr 유튜브 채널에 게시된 영상을 토대로 진행하고, 다음 넷플릭스 클론 코딩 - 1부터 본격적인 포스팅을 시작하겠습니다. 감사합니다. 아직은 초보 개발자입니다. 더 효율적인 코드 훈수 환영합니다! 공감과 댓글 부탁드립니다.

반응형