잡코더

뷰 간의 데이터 이동 Home View에서 collectionView Cell을 클릭하게 되었을 때 PlayerView가 뜨도록 구현해보자 현재는 indexPath에 해당하는 item을 클릭하게 되면 몇 번째 아이템인지 출력만 해놓은 상태이다. 여기서 PlayerViewController을 가져와서 present를 시킬 것이다. 우리는 Segue없이 구현하였기에 Storyboard를 가져올 것이다. storyboard를 가져와서 해당 ViewController를 가져올 것이다. —> 여러 ViewController를 가질 수 있기에 identifier로 접근 Storybaord id는 다음과 같이 지정한다. 우리는 Player.Storyboard를 가져와서 연결되어 있는 PlayerViewControll..

Player View Player View에서 필요한 것: Thumbnail, Title, Artist, 재생 관련 정보 우선 Player에 Storyboard를 생성하고 ViewController을 Storyboard에 띄우자 그리고 PlayerViewController을 만들어서 View 와 code를 연결하자 Auto layout 이제 위의 형식에 맞게 View Conponents를 추가하자. 그리고 auto layout을 지정해보자. Auto layout은 이제 알아서 할때 됐지~ PlayerViewController 이제 PlayerViewController에서 View components를 연결해보자 우리는 현재 Home Storyboard와 Play Storyboard를 Segue로 연결하지..

HeaderView code Header View 를 구성하는 코드는 다음과 같은 구조를 가진다. viewSupplementaryElementOfKind 는 보충하는 뷰의 종류를 나타내는 것이며 이것은 Header, Footer를 구분하는 것이다. 구조는 간단하다. 우리는 지금 trackManager에서 todayMusic이라는 변수 안에 우리가 보여줄 item을 갖고 있다. 그리고 Header View의 구조를 완성하였다. 그렇다면 HomeViewController에서는 header view와 item을 가져와서 header view에서 그 item을 보여주도록 controller부분을 구현하면 되는 것이다. item 우선 기본적으로 header view에 표시할 today’s item 이 있어야한다...

HeaderView - View 구성 이제 HeaderView에 대해 배워보자 우리가 이전 시간까지 배운 headerview의 내용은 아래의 코드를 완성해야 한다는 것이다. 우선 HeaderView를 구성할 때 필요한 Storyboard에서 View를 구성하는 방법을 배우고 다음시간에 DataSource에서 headerView를 구현 등 코드에 대해 배울 것이다. Storyboard Storyboard에서 object library를 확인하면 Header 또는 Footer View를 표현할 수 있는 component가 존재한다 —> Collection Reusable View 위와 같이 추가하게 되면 아래와 같이 표현된다. Header view의 사이즈는 414 296으로 설정하자 우리는 지금 밑의 사진..

이제 home 화면을 채울 것이다. 구현 가능한 것들을 확인해보자 이제 Track폴더에서 구현할 내용을 끝났다. 한마디로 데이터의 구조는 완성 되었다는 것을 의미한다. 현재 Model과 ViewModel부분은 home에서는 완성한 것이다. 그렇다면 home에서의 View에 해당하는 View와 ViewController을 완성해야 한다. 현재 TrackCollectionViewCell 파일에 우리가 home View에서 사용할 Cell을 정의했었다. 그렇다면 HomeViewController에서 지정한 Cell을 알맞게 표현하는게 목적이다. [HomeViewController] 우리는 ViewController에서는 ViewModel의 메소드를 통해 데이터를 접근하기에 (그리고 우리는 이렇게 사용하기 위해..

우리는 AVPlayerItem의 데이터를 관리하다가 AVMetadataItem 타입을 알게 되었다. 이것이 무엇이고 어떻게 사용하는지를 살펴보자 우리는 AVPlayerItem type를 갖는 데이터들의 array에서 특정 index를 인자로 주면 Track type로 반환하는 함수를 만들었다. 그런데 기존의 파일은 AVPlayerItem이기에 우리는 extention 키워드를 사용해서 convertToTrack() 라는 메소드를 만들어 사용했다. AVPlayerItem.convertToTrack() 우선 AVPlayerItem 안에는 asset라는 property가 존재하는데, 이 asset property안에는 metadata라는 것이 존재한다. 우리가 곡이라는 파일이 있을 때, 우리들이 현재 듣고 있..

우리는 이제 Track이라는 Struct를 만들고 Track형 데이터와 View와의 중계자 역할인 ViewModel을 만들어 볼 것이다. [ViewModel] 우리는 Track가 어떤 구조로 구성되어 있는지 알고 있다. 이제 TrackManager에서 Model을 정의하고, ViewModel의 메소드를 구현하겠다. 우선 initialize를 완성한다. 여기서 array에서 사용할 수 있는 메소드 randomElement()가 존재한다. loadTrack() 우리는 Resource 폴더에 존재하는 음악 파일들을 읽어와서 AVPlayerItem 객체로 다루며, 이를 array로 반환할 것이다. 파일 위치의 url을 이용할 것이다. Bundle은 이 앱 안에~ 를 의미한다. Bundle.main의 main은 ..

Home 화면 우선 셀 사이즈를 계산해서 넣어주면 다음과 같은 화면이 나온다. 이상하네? 우리는 마진을 생각해서 셀크기를 계산 하였다. 그런데 우리는 margin을 지정해주지 않았다!! 우리는 셀 사이즈를 생각해서 아이템간의 거리, margin을 계산해서 셀의 크기를 만들었지만 실제로는 margin이 적용되어 있지않다. 적용하러 가보자 collectionView에서 size inspector을 살펴보면 실제 margin을 줄 수 있는 부분이 존재하며 이는 section Insets이다. margin 넣으니깐 훨씬 보기좋다ㅎㅎ AVPlayer!! AVFoundation: 음악 재생관 관련된 아이템들이 존재하는 공구함 (프레임워크다) AVPlayer는 실제 재생시키는 객체 AVPlayerItem은 실제 재생..

목차 1. collectionView, custom Cell 2. project 분석 1. collectionView, custom Cell 앞으로 다음과 같은 파일 경로로 지정하여 프로젝트를 진행할 것이다. 이는 파일들을 이쁘게 지정하여 기술부채의 최소화와 유지보수 및 관리, 재활용에 이득이 되며 코드 가용성을 높히게 될 것이다. 시작! 이전에 배웠던 개념들을 이용해서 간단한 기초작업을 한다. collectionView의 auto layout을 화면 가득하게 지정해준다. 그리고 cell의 크기를 지정하는데 180,240으로 맞추고 우리가 크기를 지정할 것 이기에 Estimate Size 를 None 로 지정한다. 각각의 auto layout의 세부적인 픽셀 같은 것은 개발자의 느낌에 맞기도록 하겠다. ..

애플뮤직 앱 시작 구상해보자 Main page Main 화면 어떻게 할지 곡 load는 어떻게 할지 Player page 화면을 어떻게 할지 재생을 위한 곡준비 노래 재생은 어떻게 할지 UIKit 또한 View를 구성하기 위한 프레임워크다 그래서 View와 관련한 객체를 사용하게 되면 UIKit Framework를 이용하게 된다. AVFoundation : 아이폰 앱 개발시 음악 재생을 포함한 모든 미디어 관련 작업을 할 시 AVFoundation 이라는 Framework를 사용하게 된다. 카메라, 비디오, 음악을 사용하게 될때 사용한다. 재미난 개념들을 배워보자!! AVPlayer Object: 미디어를 플레이어 시켜주는 객체 Dark Mode: ios13 이후에 다크모드의 대응이 중요해졌다. 간략하게..

광고있음

Animating View Properties 바로 이전의 animation은 Auto layout의 값을 바꾸는 형식으로 구현하였다. 이재 Auto layout 값이 아닌 View 의 속성 값으로 Animating하는 방법을 알아보자 그렇다면 View.asdfasdf() 이런 식으로 구성되겠지~ animating할 View의 속성들은 3가지 카테고리로 나뉜다. 1. 2. 3. alpha(투명도) 여기서 주의사항!!!! position과 size의 경우 auto layout과 겹쳐서 문제가 생길 수 있다. 왜냐하면 Auto layout을 지정한 View를 auto layout에서 벗어나게 animating을 하게되면 시스템은 해당 auto layout으로 다시 돌아오게 만든다. 그렇기에 우리가 View ..

Animation 시간에 따라, View의 값 또는 상태가 바뀌는 것 Animation 3요소 : 시작, 끝, 시간 우리는 UIView에서 제공해주는 API를 사용할 것이다. 이것은 두 가지로 구분되며 애니메이션이 진행되는 시간과 애니메이션 클로져로 구성 : 애니메이팅 시킬 component를 넣어주면 된다. DetailViewController에서 애니메이션 작업을 시작해보자 우리는 ImageView를 한바퀴 돌리고, Label을 오른쪽에서 왼쪽으로 가게하는 애니메이션을 구현할 것이다. Label에 애니메이션 넣기 우선 label에 설정되어 있는 constraint를 살펴보면 NameLabel의 constraint를 클릭하여 코드에 연결시킨다. bountyLabel 또한 연결시킨다. 그렇다면 애니메이션..

CollectionViewDelegateFlowLayout 해당 데이터가 이렇게 나오는 이유는 CollectionView 하나가 열에 2개를 넣기 힘들다고 판단을 한 것이다. But, 이 사이즈를 우리가 custom하게 계산해서 넣어줄 수 있다. 우리가 지금 생각 할 것은 각 Cell 간의 간격이다. 행에서 보여지는 데이터 2개의 horizontal space는 10, 열의 2개는 vertical space 10. 그렇게 되면 1행의 열 길이에서 10을 빼고 나누기 2를 하게 되면 하나의 cell 크기가 나올 것이다. 그리고 그 넓이에 따라서 imageView는 aspect ratio가 7:10 으로 나타나고, 밑의 label 2개가 들어간 곳은 고정적으로 65 정도 높이를 줄 예정이다. 이 정보를 코드..

CollectionView: 여러개의 아이템을 보여주는 View List를 구현하기 위해 TableView를 사용했었다. TableView의 경우 표현의 한계가 존재한다. 하나의 Column만 존재하기에 여러개의 아이템을 넣고 싶으면 사용할 수 없다. 위의 어플에서는 한 행안에 다양한 데이터들이 존재한다. CollectionView의 특징 Column을 한개 이상 가질 수 있다. 각 데이터의 나열을 수직 혹은 수평으로 지정할 수 있다. CollectionView의 데이터는 CollectionViewCell 을 통해 표현이 되며 다양한 스타일로 표현될 수 있다. UITableView에 비해 데이터의 나열이 자유롭기 때문에, 많은 데이터를 보여주는 경우 CollectionView를 커스터마이징하며 사용한다...

목차 1. MVVM 코드구현 계획 2. MVVM 패턴 적용 전 3. MVVM 패턴 적용 후 4. 내가 이해하고 느낀 MVVM 패턴 MVVM 코드구현 Refactoring(리펙터링): 우리가 기술부채를 줄이고, 재사용 가능하며 유지보수와 관리가 잘 되도록 코드를 수정하는 과정 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 여기서 사용자는 서비스의 이용의 변화는 생기지 않는다. 중복제거 : 똑같은 코드 제거 단일 책임 갖기 : 어떤 데이터, 기능이 여러가지 일을 하면 자신의 역할이 아닌 곳을 건드리거나 유지보수 및 관리가 힘들어진다. 10, 200 rule —> 메소드는 10줄 안에, 클래스는 200줄 안에 (최대한 그렇게 해보자) 그렇다면 우선 이전에 완성했던 코드에서 어떤 문..

Design Patton: MVVM 목차 1. 개발의 Design Patton? 2. MVC 패턴: Model - View - Controller (디자인 패턴의 근본) 3. MVVM 패턴 1. 개발의 Design Patton? Patton은 보통 어떤 일이나 목적을 효율적으로 달성하기 위한 체계 이전의 개발은 개발의 패턴이 없어 유지보수와 관리가 힘들었다. 그래서 특정 패턴을 만들어 유지보수와 관리가 쉽게 하였다. 그것이 우리가 알고있는 MVC, MVVM 같은 패턴이다. 디자인 패턴의 목표 기술부채의 최소화 재사용 및 지속 가능 위에는 추상적이고, 구체적인 코드 구조에 대한 전략을 짜는 것이 목표겠지. 클린 아키텍처 디자인 패턴 이에 대한 고민에 대한 답을 찾아보자!! 2. MVC 패턴: Model -..

정확하게는 Segueway 로 연결된 두 ViewController 간의 전환 시, 데이터 넘기는 방법 우선 DetailView 구조를 만들어보자. 이제 데이터를 받게 되었을 때를 셋팅하면 다음과 같다. 그럼 이제는 BountyViewController에서 name과 bounty에 해당하는 데이터를 DetailViewController에 던져주면 된다. 그럼 그것은 변수 name, bounty에 받으면 끝나는 작업이다. 어떻게 던지는가..?? Segueway를 수행하는데는 perform이 사용된다. Segueway를 수행하기 전 준비하는 단계에서 호출되는 함수가 있다: prepare(준비하다) IndexPath는 row와 section으로 보낼 수 있는데 우리는 단일 섹션 이기에 row 로 보내면 몇번째..

우리가 만든 TableView의 Cell을 클릭했을때 상세페이지가 뜨도록 할 것이다. 우리는 DetailViewController을 만들려고 하는데 그럼 코드를 작성해보자! File을 생성해서(커맨드+N) DetailViewController을 생성하자. 그리고 StoryBoard에 DetailViewController에 대응되는 것을 하나 만들자. Object library에서 새로운 ViewController을 가져오서 DetailViewController과 연결시킨다. 이제 object library에서 button가져와서 close_ic 이미지를 넣어보자. 글자빼기 그리고 Auto Layout 바로 적용. 자신에게 끌고와서 넓이높이 만들고, 상단우측과 연결. (상단 우측은 View에 가져다 대야한..

애플에서는 충분히 활용가능하고 디자인 잘 된 Cell을 제공하고 있지만 실제 앱을 만들때는 제공하는 다양하고 자신의 서비스에 맞는 데이터 표현이 각각 다르기에 Cell로 데이터 표현시 어떻게 하면 사용자 정의가 가능한지를 살펴보자. 우리는 이렇게 생긴 Custom Cell을 만들어 보려고 한다. Custom Cell의 경우 ViewController 외부에 또다른 Class로 선언되며, 당연히 이름은 알아서 지정하고, UITableViewCell을 상속받아 사용된다. 이렇게 필요한 것들을 변수로 선언하고 타입이 각각 어떤 UI 기능 인지를 지정해주면 된다. 왜 weak 키워드를 사용했는지? 왜 타입 젤뒤가 !가 되었는지? 대충 조사해보면 weak는 optional로 선언되야 한다고 했는데 !가 되었는지 ..