본문 바로가기

전체 글

 (179)
[iOS] UICollectionViewDelegate 🌱 UICollectionViewDelegate - 사용자와 CollectionView의 아이템 사이의 상호작용을 관리해주기 위한 객체들에 의해 채택된 방식 - 이 프로토콜의 메소드들은 모두 Optional! 이 프로토콜을 통해 CollectionView의 Cell 클릭시 일어날 이벤트를 설정할 수 있다. 실습 해볼 내용 - HomeViewController의 CollectionViewCell 클릭 시, PlayerViewController를 가져와서 HomeView 에서 PlayerView로 전환시켜보겠다 extension HomeViewController: UICollectionViewDelegate { // 클릭했을때 어떻게 할까? func collectionView(_ collectionView:..
[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..
[WPO] transform을 이용한 애니메이션 최적화 지난 포스팅에서 브라우저 렌더링 과정에 대해 설명했었다. 마지막 내용에서 GPU의 도움을 받아서 Repaint, Reflow 를 생략할 수도 있다는 글을 적었는데, 자세히 이번 포스팅에 기록해보고자 한다! 📌 GPU(Graphics Processing Unit)? - 컴퓨터 화면에 이미지를 렌더링하는데 사용되는 처리 📌 GPU가 관여할 수 있는 속성 - transform, opacity 등등.. - 무거운 자바스크립트 코드를 돌리는 대신 이 속성을 사용할 경우, 독립된 스레드 상에서 재생되어 애니메이션이 빠르고 부드럽게 나타날 수 있다. 이제 transform 속성을 이용하여 애니메이션 최적화를 해보겠다! 기존 코드 const Bar = (props) => { return ( {props.percent}..

티스토리툴바