yevdev◡̈

지난 포스팅에서 브라우저 렌더링 과정에 대해 설명했었다. 마지막 내용에서 GPU의 도움을 받아서 Repaint, Reflow 를 생략할 수도 있다는 글을 적었는데, 자세히 이번 포스팅에 기록해보고자 한다! 📌 GPU(Graphics Processing Unit)? - 컴퓨터 화면에 이미지를 렌더링하는데 사용되는 처리 📌 GPU가 관여할 수 있는 속성 - transform, opacity 등등.. - 무거운 자바스크립트 코드를 돌리는 대신 이 속성을 사용할 경우, 독립된 스레드 상에서 재생되어 애니메이션이 빠르고 부드럽게 나타날 수 있다. 이제 transform 속성을 이용하여 애니메이션 최적화를 해보겠다! 기존 코드 const Bar = (props) => { return ( {props.percent}..

렌더링 최적화를 위해서 알아야할 개념! 💡 Critical Rendering Path ( = Pixel Pipeline ) Critical Rendering Path (= Pixel Pipeline, = 브라우저 렌더링 과정)은 크게 4가지 프로세스로 진행된다. DOM + CSSOM DOM : 요소들 간의 관계 CSSOM : Style 요소들 Render Tree DOM + CSSOM의 조합 Layout 요소의 위치와 크기 정보를 가지고 레이아웃을 잡음 Paint Layout에 색을 칠해 넣음 Composite 각 Layer들을 합성하는 과정 🌱 Reflow - Critical Rendering Path 과정이 다시 모두 재실행되는 것 🌱 Repaint - color, background-color가 변..

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 - AppleMusicApp(2) : Track 모델 (데이터 구조) - AppleMusicApp(3) : UICollectionView 업데이트 자세한 코드는 여기로! 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/13 - 이번엔 CollectionReusableView로 만들어뒀던 HeaderView를 마무리지어보겠다!..

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 - AppleMusicApp(2) : Track 모델 (데이터 구조) 자세한 코드는 여기로! 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 이전 포스팅에서 TrackModel을 통해 Track 폴더에서 데이터구조를 완성했었다. 이번 포스팅은 이 모델 객체를 통해 HomeView의 collection view cell을 업데이트..

이전 포스팅 - AppleMusicApp(1) : 뷰 구성 자세한 코드는 여기로! 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/12 오늘은 Track 모델을 구현해봤다! 자세히 말하면 Track 구조체와 이 Track을 View와 연결해줄 Track Manager을 만들었다. 이 부분은 Track 폴더로 묶어줄건데, Track 폴더안의 파일은 1. Track.swift : Tra..

Code Splitting - 말 그대로 코드 분할하기! - Code Splitting을 통해, 불필요한 코드 또는 중복되는 코드가 없이 중복되는 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 한다. Code Splitting을 하기전에 cra-bundle-analyzer을 사용해보자 📌 cra-bundle-analyzer Webpack을 통해 bundle 된 파일들이 어떤 코드로 구성되어 있는지 확인 가능 cra-bundle-analyzer 라이브러리 설치 및 실행 방법 여기서 image-gallery.js는 모달창을 띄우는 모듈인데, 최초 화면이 렌더링될 때, 굳이 모달창은 렌더링을 할 필요가 없으니 이 모듈을 분리해보자 최적화 이전 코드 import React, { useState } from ..

오랜만에 하는 iOS 개발.. 요즘 다른 활동들이 너무 빡세기도 했고 iOS 스터디가 좀 정체되는 감이 있었어서 한동안 쉬었지만 다시 아자아자😇 이번주부터 2주간 진행될 과제는 Apple Music App 클론 프로젝트! 이번에도 이미 완성된 프로젝트의 코드를 따라가면서 천천히 구현해볼 예정이다 자세한 코드는 여기로! 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/6 1. 폴더 구..

Lighthouse? - 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구. - 웹, 앱의 품질개선을 위해 성능을 검사해주고 성능 향상을 위한 가이드를 제공 → 추천 : 로딩 성능 최적화를 위한 지표로 활용 → 진단 : 렌더링 성능 최적화를 위한 지표로 활용

Extension - 구조체, 열거형, 클래스, 프로토콜 타입에 기능을 추가할 수 있는 기능 - 기능 추가는 가능하나, 기존 기능들은 재정의는 불가능 📌 추가할 기능 정의 extension 확장할타입이름 { } 기존에 존재하는 타입이 추가적으로 다른 프로토콜들을 채택할 수 있게도 정의 가능 extension 확장할타입이름: 프로토콜1, 프로토콜2, 프로토콜3... { /* 프로토콜 요구사항 구현 */ } 🚀 Extension 구현하기 1) Int 타입에 두개의 연산 프로퍼티 추가 (isOdd, isEven) extension Int { var isEven: Bool { return self % 2 == 10 } var isOdd: Bool { return self % 2 == 1 } } print(1.i..

Protocol? - 특정 역할을 수행하기 위한 method, property, initializer 등의 요구사항을 정의한다. 📌 Protocol 정의 protocol 프로토콜이름 { } 📌 Protocol 구현 protocol Talk { // 1) 프로퍼티 요구 var topic: String { get set } var language: String { get } // 2) 매서드 요구 func talk() // 3) 이니셜라이저 요구 init(topic: String, language: String) } → 프로퍼티 요구에서, 꼭 var 키워드로 선언되어야 하며 get은 읽기 전용, get과 set이 함께 쓰일 경우 읽기+쓰기 모두 가능한 프로퍼티 여야한다. 💡 Protocol 을 채택한다 ? ..