본문 바로가기

분류 전체보기

(313)
01. 인터페이스 디자인 #1 인터페이스 디자인 #1 ProgressRing, Timer ProgressRing ProgressRing은 총 진행상황을 표시할 PlaceHolder와 현재 진행 상황을 표시할 진행링 두 개의 View의 조합이다. 같은 좌표에 겹쳐 표시돼야 하므로 ZStack으로 구현한다. struct ProgressRing: View { @State var progress = 0.0 var body: some View { 우선 진행 상태를 나타낼 변수를 하나 정의한다. var body: some View { ZStack { // MARK: Placholder Ring Circle() .stroke(lineWidth: 20) .foregroundColor(Color(UIColor.systemGray)) .opacity(..
00. 시작하며 이제 막 UIKit에 대한 공부를 마치고 작은 프로젝트를 진행하던 작년에 이야기다. 작은 프로젝트를 몇 개 해 봤지만 여전히 개념들은 어려웠고, 특히나 만들려고 했던 인터벌 타이머는 thread 분리와 함께 완전히 박살났다. 1초 간격으로 실행 돼야 할 코드가 어느 때는 0.5초 만에, 어느 때는 1초가 넘어서 동작하니 제대로 된 기능을 한다고 볼 수 없다. 올해는 SwiftUI를 배웠고, 다시 이전의 프로젝트를 재시동 하기 전에 시계나 타이머에 관한 프로젝트를 몇 개 해 보고자 한다. 이번에 만들어 보는 FastingTimer는 식단 관리 앱이다. 원형의 Indicator를 가지고 진행 상황을 알려주고, 매 초 업데이트 되니 내가 구현하려던 매커니즘과 동일하다고 할 수 있다. 앱 Swift Swift ..
26. 기본 UI 구현하기 #9 기본 UI 구현하기 #9 프로필 수정 버튼 표시하기 ProfileView에는 EditProfile 버튼이 존재한다. 지금은 본인의 Profile인지 상대방의 Profile인지 구분 없이 Edit Profile을 표시하지만, 이 둘을 구분해 Follow 버튼으로 치환해 표시할 수 있도록 구현해 본다. class ProfileViewModel: ObservableObject { @Published var tweets = [Tweet]() @Published var likedTweets = [Tweet]() private let service = TweetService() private let userService = UserService() let user: User init(user: User) { sel..
25. DB와 연결하기 #4 DB와 연결하기 #4 좋아요 한 Tweet 표시하기 ProfileView의 Likes 탭에는 해당 계정이 작성했던 Tweet도, 답변을 달았던 Tweet도 아닌 좋아요를 눌렀던 Tweet을 표시해야 한다. 이전에 구현한 좋아요 기능에서 사용하는 user-likes 하위 collection 활용하면 굉장히 간단하게 구현할 수 있다. 좋아요 한 Tweet 표시하기 | TweetService, fetchLikedTweets fetchTweets(foruid:) func fetchTweets(foruid uid: String, completion: @escaping([Tweet]) -> Void) { Firestore.firestore().collection("tweets").whereField("uid", i..
24. 기능 구현 #10 기능 구현 #10 좋아요 취소(unLike) 기능 추가하기 좋아요 취소(unLike) 기능 추가하기 | TweetService, unLikeTweet 이미 좋아요가 된 글을 취소할 수 있는 기능이 있어야 한다. Tweet에 관련된 기능인 TweetService LikeTweet, uploadTweet, fetchTweets(), fetchTweets(foruid:) 모두 TweetService에 정의돼 있으므로 unLikeTweet도 해당 파일에 구현하면 된다. likeTweet func likeTweet(_ tweet: Tweet, completion: @escaping() -> Void) { guard let uid = Auth.auth().currentUser?.uid else { return } ..
23. 기능 구현 #9 기능 구현 #9 좋아요 기능 추가하기 SNS에서 빠질 수 없는 좋아요 기능을 구현해 본다. TweetRow의 하트 버튼을 누르면 붉은색으로 표시되고, 이를 모아서 볼 수도 있어야 한다. 기본적인 UI는 이미 존재하는 상태이므로 기능만 구현하면 된다. 좋아요 기능 추가하기 | Tweet model import FirebaseFirestoreSwift import Firebase struct Tweet: Identifiable, Codable { @DocumentID var id: String? let caption: String let timestamp: Timestamp let uid: String var likes: Int var user: User? var didLike: Bool? = false }..
22. 버그수정 #2 버그수정 #2 fetchTweets의 정렬 문제, SideMenu의 배경색 문제 fetchTweets의 정렬 문제 지금도 Tweet들을 Firebase에서 가져오는 데에는 문제가 없지만, 사소하지만 대단히 중요한 문제가 하나 있다. 바로 Tweet이 글을 작성한 순서대로 표시되지 않는다는 점이다. 해당 문제를 해결하기 위해 두 가지 접근법을 사용한다. fetchTweets의 정렬 문제 | FeedView의 경우, Firebase order Firestore.firestore().collection("tweets").order(by: "timestamp", descending: true).getDocuments { snapshot, _ in guard let documents = snapshot?.docu..
21. DB와 연결하기 #3 DB와 연결하기 #3 ProfileView에 실제 데이터 연결하기 ProfileView에 실제 데이터 연결하기 | ProfileView 더보기 Source import SwiftUI import Kingfisher struct ProfileView: View { @State private var selectedFilter: TweetFilterViewModel = .tweets @Environment(\.dismiss) var dismiss @Namespace var animation private let user: User init(user: User) { self.user = user } var body: some View { VStack(alignment: .leading) { headerView ..
20. 기능 구현 #8 기능 구현 #8 TweetRowView 데이터 연결 TweetRowView 데이터 연결 | FeedViewModel 이전에 구현한 대로라면 FeedView가 표시되고, FeedViewModel을 호출하는 순간, fetchTweets 메서드가 작동하게 된다. class FeedViewModel: ObservableObject { @Published var tweets = [Tweet]() let service = TweetService() init() { fetchTweets() } func fetchTweets() { service.fetchTweets { tweets in self.tweets = tweets } } } Tweet은 위와 같이 내용, 좋아요 카운트, 작성 날짜, 유저 정보(uid)를 가..
19. 기능 구현 #7 기능 구현 #7 Tweet 가져오기 Tweet 가져오기 | Tweet Model Firebase에 저장된 Tweet의 모습이다. 이 데이터들을 앱에서 보여줄 수 있도록 객체화가 필요하다. import FirebaseFirestoreSwift import Firebase struct Tweet: Identifiable, Codable { @DocumentID var id: String? let caption: String let timestamp: Timestamp let uid: String var likes: Int var user: User? } Identifiable과 Codable 프로토콜을 채용한 Tweet 구조체를 하나 정의했다. Tweet의 id에 해당하는 DocumentID는 Identif..