본문 바로가기

프로젝트

 (86)
02. 기본 UI 구성하기 #2 기본 UI 구성하기 #2 MainTabView & ProfileView MainTabView 이전에 구현한 FeedView를 시작으로, 이후에 구현할 SearchView, NotificationView, MessageView를 포함한 TabView를 추가한다. 더보기 Source struct MainTabView: View { @State private var selectedIndex = 0 var body: some View { TabView(selection: $selectedIndex) { FeedView() .onTapGesture { self.selectedIndex = 0 } .tabItem { Image(systemName: "house") }.tag(0) ExploreView() .onTa..
01. 기본 UI 구성하기 #1 기본 UI 구성하기 #1 TweetRowView & FeedView TweetRowView Twitter의 글들은 Tweet으로 불리고, 위와 같은 레이아웃을 가진다. 더보기 Source struct TweetRowView: View { var body: some View { VStack(alignment: .leading) { //profile image & user info & tweet HStack(alignment: .top, spacing: 12) { Circle() .frame(width: 56, height: 56) .foregroundColor(Color(.systemBlue)) //user info & tweet caption VStack(alignment: .leading, spacin..
00. 시작하며 백엔드 Firebase Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com DB를 혼자 구성할 능력도, 생각도 없기 때문에 이 부분은 클라우드 서비스를 적극적으로 사용한다. 이번에도 가장 익숙한 Firebase를 활용하는 방향으로 계획했다. 앱 UI Apple Developer Documentation developer.apple.com 역시나 SwiftUI를 사용한다. 22년 iOS16 및 여러 새 OS들의 배포와 함께 SwiftUI 4.0도 함께 출시됐다. 여러 API들이 새로 생겼고, 기존의 API 중 일부가 deprecated 되는 등 변화가 있다. 아직 관련 자료들이 최신화되지..
04. 동작 검증, 더 나아가기 동작 macOS 문제없이 파일을 저장하고, 최근 사용한 파일의 목록을 불러올 수 있으며, 편집도 제대로 동작한다. iOS iOS도 마찬가지로 잘 동작한다. 더 나아가기 iOS와 macOS에서 모두 잘 동작하지만, 미관상 거슬리는 부분이 하나 있다. 바로 이 부분이다. 심지어 오른쪽 뒤로가기 버튼은 아무런 동작도 하지 않기까지 하는데, 이는 DocumentGroup과 TextEditor의 기본 UI가 겹쳐서 발생하는 문제다. struct ToyEditorApp: App { var body: some Scene { DocumentGroup(newDocument: TextFile()) { file in ContentView(document: file.$document) .toolbarRole(.automati..
03. 프로젝트 설정 변경 앱이 iOS와 맥의 저장소에 접근하기 위해 몇 가지 설정을 변경해 줘야 한다. Project > Target 프로젝트의 Target으로 이동해 'App Sandbox' 부분의 User Selected File의 권한을 'Read/Write'로 변경한다. 이 과정으로 맥에서 Finder를 사용해 기존의 파일을 읽거나 수정할 수 있고, 새 파일을 생성할 수 있다. 특히 해당 권한은 이전 Xcode 버전에서 maxOS.entitlements 파일의 'com.apple.security.files.User-selected.read-write'를 대체하는 부분이다. Project > info 프로젝트의 Target으로 이동해 info에 새로운 Key를 추가한다. 추가하는 'Support Document Browse..
02. 구현 FileDocument Apple Developer Documentation developer.apple.com 파일을 불러올 구조체를 정의한다. struct TextFile: FileDocument { static var readableContentTypes: [UTType] init(configuration: ReadConfiguration) throws { } func fileWrapper(configuration: WriteConfiguration) throws -> FileWrapper { } } 구조체의 프로토콜은 FileDocument로 필수로 구현해야 하는 메서드와 생성자는 다음과 같다 init(configuration: Self.ReadConfiguration) throws 열기에 해당한..
01. 배경지식 UniformTypeIdentifiers 예제는 해당 모듈을 import 하는 걸로 시작한다. utf-8이나 utf-16으로 인코딩 된 파일을 읽기 위해 사용한다고 하는데 조금 자세히 알아보자. Apple Developer Documentation developer.apple.com The Uniform Type Identifiers framework provides a collection of common types that map to MIME and file types. Use these types in your project to describe the file types in your app. 해석하면 MIME과 파일 타입에 대한 형식을 제공한다는 의미이다. 아직도 모르겠으니 조금 더 찾아보자...
00. 시작하며 개인적으로 필요한 앱을 만들어 보기 위해 Finder를 호출할 일이 생겼는데, 간단한 예제 프로그램 만들기가 있어 따라하며 정리해 본다. 앱 UI 별도의 UI를 구성하진 않는다. 특이점이라면 항상 사용하던 WindowGroup이 아닌 DocumentGroup을 사용해 본다. 애플에서 제공하는 Finder와 File 앱의 API를 그대로 사용한다. 기능 FileBrowser(Finder, Files App) 호출 plaintext 파일에 대한 CRUD 참고 굉장히 간단한 샘플 코스가 있다. 내용은 간단하지만 설명이 많이 빠져있어 이를 채우며 진행할 예정이다.
05. 더 나아가기 자동 스크롤 메시지의 양이 많아한 화면에 표시하지 못하는 경우 Scroll View는 화면 밖에 새로운 메시지를 표시한다. 카톡이나 기본 메시지 앱의 경우 새 메시지가 화면 밖에 표시되면 자동으로 맨 아래로 이동하게 되는데, 이를 구현해 본다. Apple Developer Documentation developer.apple.com 원리는 간단하다. Scroll View의 scrollTo(_:anchor:) 메서드를 사용하는 것으로, 파라미터로 대상을 전달하기만 하면 된다. struct ContentView: View { @StateObject var messagesManager = MessagesManager() var body: some View { VStack { VStack { TitleRow()..
04. Firebase에 쓰기 메서드 구현 import Foundation import FirebaseFirestore import FirebaseFirestoreSwift class MessagesManager: ObservableObject { @Published private(set) var messages: [Message] = [] let db = Firestore.firestore() init() { getMessages() } func getMessages() { db.collection("messages").addSnapshotListener { querySnapshot, error in guard let documents = querySnapshot?.documents else { print("Error fetchin..

티스토리툴바