전체 글 175

[iOS : Toy Project] Apple Music App (8) : 다크모드

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 - AppleMusicApp(2) : Track 모델 (데이터 구조) - AppleMusicApp(3) : UiCollectionViewCell 업데이트 - AppleMusicApp(4) : HeaderView (CollectionReusableView) - AppleMusicApp(5) : Player 화면 + 싱글톤 - AppleMusicApp(6) : 뷰사이 데이터 이동 - AppleMusicApp(7) : Music Slider 기능 자세한 코드는 여기로! https://github.com/yexjin/iOS_Study/tree/main/AppleMusicApp GitHub - yexjin/iOS_Study: iOS 토이프로젝트 모음집📱 ..

iOS/Toy project 2022.09.27

[iOS : Toy Project] Apple Music App (7) : Music Slider 기능

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 - AppleMusicApp(2) : Track 모델 (데이터 구조) - AppleMusicApp(3) : UiCollectionViewCell 업데이트 - AppleMusicApp(4) : HeaderView (CollectionReusableView) - AppleMusicApp(5) : Player 화면 + 싱글톤 - AppleMusicApp(6) : 뷰사이 데이터 이동 자세한 코드는 여기로! https://github.com/yexjin/iOS_Study/tree/main/AppleMusicApp GitHub - yexjin/iOS_Study: iOS 토이프로젝트 모음집📱 iOS 토이프로젝트 모음집📱. Contribute to yexjin..

iOS/Toy project 2022.09.26

[WPO] 이미지 사이즈 최적화 : WEBP

이미지 포맷 크기 : PNG > JPG > WEBP 📌 WEBP 구글에서 나옴, 지원하지 않는 브라우저가 꽤 있음 하지만 화질, 용량을 따져봤을 때 JPG보다 좋은 면이 있어서 사용하려는 움직임이 있음! 이것을 이용해서 이미지 사이즈를 최적화 해볼것! 📌 Squoosh.app 구글에서 출시 WEBP를 위한 서비스 홈페이지에 적용해보기 - squoosh를 이용하여 이미지를 webp 확장자로 변경한 뒤, import! 하지만, 앞서 언급했듯이 webp를 지원하지 않는 브라우저가 있다. 이럴 경우, 맨 처음에 webp를 지원하는 브라우저인지 판단하는 작업이 필요하다 태그 이용! 📌 예제 1) : 내가 어떤 환경에서 특정 이미지를 사용하겠다를 명시하기 위한 태그, 여기서는 사이즈에 따라 로드할 이미지가 달라지고..

[iOS : Toy Project] Apple Music App (6) : 뷰사이 데이터 이동

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 - AppleMusicApp(2) : Track 모델 (데이터 구조) - AppleMusicApp(3) : UiCollectionViewCell 업데이트 - AppleMusicApp(4) : HeaderView (CollectionReusableView) - AppleMusicApp(5) : Player 화면 + 싱글톤 자세한 코드는 여기로! https://github.com/yexjin/iOS_Study/tree/main/AppleMusicApp GitHub - yexjin/iOS_Study: iOS 토이프로젝트 모음집📱 iOS 토이프로젝트 모음집📱. Contribute to yexjin/iOS_Study development by creati..

iOS/Toy project 2022.09.21

[WPO] 이미지 지연(Lazy) 로딩 : IntersectionObserver

📌 이미지 지연(Lazy) 로딩 - 스크롤을 했을 때 화면에 특정 요소(이미지)가 뜨는 시점에서만 요소가 로딩되도록 해보자 - 단점 : 스크롤 이벤트를 가진 함수를 너무 많이 사용해서 오히려 성능이 저하될 수 있다 이런 단점을 해결할 방법은 ?! 바로, IntersectionObserver을 사용! 📌 IntersectionObserver - 지정한 특정 요소가 화면에 보여지는지 아닌지 판단 - 화면에 특정 요소가 보여질때 함수를 실행시켜 성능의 이득을 취할 수 있다! let observer = new IntersectionObserver([callback함수], [미리선언한 option]) observer.observe([Dom element]) → callback 함수 : 스크롤을 내리다가 지정된 요..

[Swift] 모나드, 옵셔널 !

모나드에 대한 자세한 설명 [Swift] 모나드 : 컨텍스트, 함수객체, 모나드 💡함수형 프로그래밍에서의 모나드? - 순서가 있는 연산을 처리할 때 자주 활용하는 디자인 패턴 💡프로그래밍에서 모나드가 갖춰야 할 조건 1. 타입을 인자로 받는 타입(특정 타입의 값을 포 yexjinitlog.tistory.com 이전에 모나드에 대해 자세히 설명을 했었다! 근데 저건 그냥 책에 있는 내용을 정리한 것이고 정확히 옵셔널과 모나드와의 관계에 대해 쉽게 써놓지 못한 거 같아 다시 정리해보고자 한다. 모나드? - 함수와 더불어 순서가 있는 연산을 처리할 때 자주 활용되는 디자인 패턴 및 자료구조 - 함수객체 자체이며, 값이 있을 수도 있고 없을 수도 있는 상태를 포함한 개념 📌 값이 있을 수도 있고 없을 수도 있다..

Swift 2022.09.17

[iOS] UICollectionViewDelegate

🌱 UICollectionViewDelegate - 사용자와 CollectionView의 아이템 사이의 상호작용을 관리해주기 위한 객체들에 의해 채택된 방식 - 이 프로토콜의 메소드들은 모두 Optional! 이 프로토콜을 통해 CollectionView의 Cell 클릭시 일어날 이벤트를 설정할 수 있다. 실습 해볼 내용 - HomeViewController의 CollectionViewCell 클릭 시, PlayerViewController를 가져와서 HomeView 에서 PlayerView로 전환시켜보겠다 extension HomeViewController: UICollectionViewDelegate { // 클릭했을때 어떻게 할까? func collectionView(_ collectionView:..

iOS 2022.09.15

[WPO] 컴포넌트 Preloading

.. 임시저장 되어있던 이 포스팅.. 모르고 삭제해버려서 다시 쓰는^^.. 예전 글에서 Lazy Loading을 통해 Code Splitting 하는 과정을 기록해놨었다. 이 Lazy Loading에는 단점도 있는데..! Lazy 로딩을 통해 최초 페이지에서는 속도가 빨라졌지만, 이때 로드해두지 않은 특정 컴포넌트를 선택하여 로드해야할 때 다소 느릴 수 있다는 점이다. 이 Lazy로딩의 단점 컴포넌트 Preloading으로 해결해보고자 한다! 🌱 컴포넌트 Preloading? - 말 그대로 컴포넌트를 미리 로딩해 두는 것이다! 그럼 언제 컴포넌트를 미리 로드해야할까? - 두가지 방법이 있다. 컴포넌트를 띄우는 버튼 위에 마우스를 올려 두었을 그 때! 최초 페이지 로드가 되고, 모든 컴포넌트의 마운트가 끝..

[WPO] 이미지 Preloading

저번 포스팅에서는 컴포넌트를 특정 시점에 Preloading 하는 것을 기록했었다. (이후 업로드 예정,, 실수로 삭제해버렸기 때문에^^) [WPO] 컴포넌트 Preloading .. 임시저장 되어있던 이 포스팅.. 모르고 삭제해버려서 다시 쓰는^^.. 예전 글에서 Lazy Loading을 통해 Code Splitting 하는 과정을 기록해놨었다. 이 Lazy Loading에는 단점도 있는데..! Lazy 로딩을 통해 최 yexjinitlog.tistory.com 이번에는 이미지를 Preloading 해보자! Modal 을 선택했을 경우, Modal 내부 이미지들 중에 가장 먼저 뜰 대문사진이 다른 이미지들과 함께 로딩이 되어 느리게 뜨는 것을 경험해본적이 있을 것이다. 이 Modal의 대문? 대표? 사..

[iOS : Toy Project] Apple Music App (5) : Player 화면 + 싱글톤

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 - AppleMusicApp(2) : Track 모델 (데이터 구조) - AppleMusicApp(3) : UiCollectionViewCell 업데이트 - AppleMusicApp(4) : HeaderView (CollectionReusableView) 자세한 코드는 여기로! https://github.com/yexjin/iOS_Study/tree/main/AppleMusicApp GitHub - yexjin/iOS_Study: iOS 토이프로젝트 모음집📱 iOS 토이프로젝트 모음집📱. Contribute to yexjin/iOS_Study development by creating an account on GitHub. github.com 9..

iOS/Toy project 2022.09.13