안녕하세요, iOS 개발하는 루피입니다. 오늘은 WWDC21 Demystify SwiftUI 영상을 정리하는 마지막 3번째 시간입니다. 지난 글들에서는 지금까지 "Identity가 무엇이고", "Identity가 View의 Lifetime과 어떻게 연관되는지"에 대해 정리해 봤다면, 이번에는 “SwiftUI가 UI를 업데이트하는 방법”에 대해 정리해보도록 하겠습니다. 바로 시작합니다.Dependencies(의존성)Dependencies는 흔히 우리에게는 의존성, 종속성이라는 단어로 불리고 있습니다. 이번 글에서는 쉽게 의존성이라는 단어를 이해하기 위해 View가 동작하기 위해 필요한 입력값이라고 얘기해 두겠습니다. 그러면 아래의 코드부터 같이 보도록 하시죠.현재 코드에는 2개의 property가 있습니다..
SwiftUI
안녕하세요, iOS 개발하는 루피입니다. 오늘은 WWDC21 Demystify SwiftUI 영상을 정리하는 2번째 시간입니다. 저번 글에서는 SwiftUI가 뷰를 식별하는 방식을 이해했다면, 이번 글에서는 ID가 뷰와 데이터의 수명과 어떻게 연결되는지 정리해 보는 시간을 가져보도록 하겠습니다. 바로 시작합니다.Lifetime영상에서는 고양이 테세우스의 예시를 들고 있습니다. 이 고양이가 일어나서 밥을 먹던지, 시간이 지나 밖에서 나가서 산책을 하던지, 기분이 안좋아 저에게 화를 내더라도 똑같은 테세우스라는 것은 변합이 없습니다. 이러한 생각이 바로 Identity와 Lifetime을 연결하는 핵심입니다.이전 글에서 봤던 위 앱도 동일합니다. 각각의 상태는 시점에 따라 다른 값을 가지게 됩니다. 코드를 ..
안녕하세요, iOS 개발하는 루피입니다. 오늘은 WWDC21 Demystify SwiftUI 영상을 보고 정리해보는 시간은 갖으려 합니다. 이번 영상은 선언형 프레임워크인 SwiftUI가 내부적으로 무엇을 하고 있는지에 대해 설명하면서, “SwiftUI가 내 코드를 볼 때, 무엇을 보는가?”라는 주제를 바탕으로 정보를 전달하는데요, 이번 글은 정리를 목적으로 진행하며, 총 3개의 글로 정리해보겠습니다. 바로 시작합니다.SwiftUI가 집중하는 3가지Identity : SwiftUI가 여러 업데이트에서 요소를 동일하거나 별개로 인식하는 방식이다.Lifetime : SwiftUI가 시간 경과에 따라 뷰와 데이터의 존재를 추적하는 방식이다.Dependencies : SwiftUI가 인터페이스를 업데이트해야 하..
안녕하세요, 루피입니다. 오늘은 캡스톤 작품인, 효도르 프로젝트를 진행하면서, 직접 구현했던 ImageCache를 KingFisher로 변경한 내용에 대해 글을 적어보려합니다. 바로 시작합니다.1. 왜 ImageCahe가 필요했는가?현재 Hyodor 앱은 가족 공유 앨범이라는 기능이 있습니다. 서버에서 이미지 URL 목록을 받아와 화면에 효율적으로 뿌려줘야 했기 때문에 캐시 구현이 필수로 요구 되었습니다. 캐시가 필요했던 가장 큰 이유는 한번 받아온 이미지 URL을 사용할때, 반복해서 서버에 API 호출하는 것이 아닌 메모리에 캐싱해 빠르게 접근해서 사용하기 위해서였습니다.2. 왜 직접 구현을 먼저 했는가?이거는 제가 생각하는 고집이자 공부의 방향성이긴 한데요. 저는 학습을 하는 과정에서는 제가 생각하는..
안녕하세요, 루피입니다!! 오늘은 제가 SwiftUI로 개발한 Hyodor 앱에서 공유 앨범의 이미지 로딩 성능을 개선하기 위해 이미지 캐싱을 활용한 경험을 공유하려 합니다. 특히, 반복적인 API 호출로 인한 로딩 지연 문제를 해결하기 위해 ImageCache를 구현하고 트러블슈팅한 과정을 중심으로 포스팅해 보겠습니다.문제 상황: 반복적인 API 호출과 로딩 지연Hyodor 앱의 핵심 기능 중 하나는 공유 앨범입니다. 사용자가 공유 앨범 뷰에서 사진을 볼 때, 각 사진의 이미지를 서버에서 가져오기 위해 API를 호출합니다. 하지만 동일한 이미지에 대해 매번 네트워크 요청을 보내다 보니 다음과 같은 문제가 발생했습니다:로딩 시간 증가: 네트워크 요청과 데이터 다운로드로 인해 이미지 표시가 느려짐.데이터..
안녕하세요, 루피입니다!! 오늘은 제가 SwiftUI로 개발한 Hyodor 앱에서 공유 앨범 데이터 로딩 문제를 해결한 경험을 공유하려 합니다. 특히, 앱 실행 시 서버에서 데이터를 가져오는 동안 UX를 개선하기 위해 Splash View 를 활용한 과정에 대해 포스팅해보려합니다.문제 상황: 데이터 로딩과 UX의 충돌Hyodor 앱의 핵심 기능 중 하나는 공유 앨범입니다. 사용자가 HomeView에서 공유 앨범 뷰로 진입하면 서버에서 공유된 사진 데이터를 가져오는 API를 호출합니다. 이 과정은 필수적이지만, 네트워크 요청과 데이터 파싱에 시간이 걸리면서 사용자에게 대기 시간이라는 불편함을 줄 것이라는 생각을 했습니다.이미 로드한 사진은 ImageCache을 통해 빠르게 표시했지만, 앱을 처음 실행할 때..
안녕하세요, iOS 개발하는 루피입니다.오늘은 SwiftUI의 근간을 이루는 핵심 개념인 뷰와 모디파이어에 대해 깊이 있게 알아보려고 합니다.바로 시작합니다.1. SwiftUI가 View에 Struct를 사용하는 이유UIKit이나 AppKit을 사용해 보셨다면, 두 프레임워크에서는 뷰를 클래스로 구현한다는 것을 알고 계실 겁니다. 그러나 SwiftUI는 다른 접근 방식을 취합니다. SwiftUI에서는 뷰를 구조체로 구현하며, 여기에는 몇 가지 중요한 이유가 있습니다.1) 성능적 이점구조체는 클래스보다 단순하고 빠릅니다.UIKit에서는 모든 뷰가 UIView라는 클래스에서 파생되며, 이 클래스는 배경색, 위치 제약조건, 렌더링 레이어 등 수많은 속성과 메서드를 포함하고 있습니다. 상속의 특성상 UIView..
안녕하세요, iOS 개발하는 루피입니다. 오늘은 최근 SwiftUI를 기반으로 컴퓨터종합설계 프로젝트를 진행 중인데, 느린 사진 업로드 문제를 해결했던 트러블 슈팅 경험을 정리해보려 합니다. 바로 시작합니다.1. 문제 발생 배경최근 SwiftUI 기반 사진 공유 앱의 사진 업로드 기능에 성능 문제가 발생했습니다. 사용자가 사진첩에서 사진을 선택해 S3 버킷에 업로드하는 기능이었는데, 10장의 사진을 업로드하는 데 12초 이상 걸렸습니다. 이렇게 될 경우 사용성이 많이 떨어질 것으로 판단하여, 기능 개선을 위해 노력했습니다. 느린 업로드 문제를 진단하고, 최적화 과정을 통해 업로드 시간을 단축한 트러블슈팅 과정을 공유합니다.2. 문제 상황 : 느린 사진 업로드앱의 PhotoListViewModel은 사용..
안녕하세요, iOS 개발하는 루피입니다! 오늘은 공식문서를 바탕으로 StateObject에 대해 정리해 보는 시간을 가져보려 합니다. 바로 시작합니다.StateObject란?StateObject는 SwiftUI에서 참조 타입 객체를 관리하기 위한 프로퍼티 래퍼로, iOS 14부터 도입되었습니다.(iOS 17 이후부터는 참조 타입도 @Observable 매크로와 함께 @State로 관리하는 것을 Apple이 권장하고 있습니다.) ObservableObject 프로토콜을 준수하는 참조 타입 객체의 생명주기를 관리하고, 뷰가 업데이트될 때도 객체의 상태를 안정적으로 유지하는 역할을 합니다.@MainActor @frozen @propertyWrapper @preconcurrencystruct StateObjec..
안녕하세요, iOS 개발하는 루피입니다. 오늘은 공식문서를 바탕으로 Bindable에 대해 정리해보는 시간을 갖겠습니다. 바로 시작합니다.Bindable이란?@Bindable은 Observable 객체의 변경 가능한 속성들에 바인딩을 생성할 수 있게 해주는 프로퍼티 래퍼입니다.이 프로퍼티 래퍼를 사용하면 Observable 프로토콜을 준수하는 데이터 모델 객체의 변경 가능한 속성에 바인딩을 만들 수 있습니다. 예를 들어, 아래 코드에서는 @Bindable로 book 입력을 감싸고 있습니다. 그런 다음 TextField를 사용해 책의 title 속성을 변경하고, Toggle을 사용해 isAvailable 속성을 변경합니다. 이때 $ 문법을 사용하여 각 속성에 대한 바인딩을 컨트롤에 전달합니다.@Observ..
