인스타그램 클론 앱 개발하기 in SwiftUI 2주차

seokhoho·2024년 3월 4일

인스타그램클론앱개발

목록 보기

2/5

인스타그램 클론 앱 개발하기

2주차 개발

메인뷰 개발, 데이터는 더미 데이터로 스토리 3개, 피드3개 작성하여 하드코딩
피드에 있는 이미지는 따로 url을 찾아서 가져오는 방법 사용하기(라이브러리 활용)

처음에는 Assets에 이미지를 넣어 직접 이미지를 가져와 피드와 프로필에 사용하여 뷰를 만들었고 정상 동작을 하는 것을 확인 후
킹피셔 라이브러리 사용하여 프로필과 피드의 이미지에 사용하였다.
로딩 중의 임시 이미지는 어떤 것을 할지 더 고민을 해보자.

내가 사용한 킹피셔 코드

SPM으로 킹피셔를 설치하고 Postimages에 이미지를 업로드 하였다.

// User.swift
struct User: Identifiable {
    let id: String
    var name: String
    var profileImageURL: String
    var feed: [String]?
    var story: [Story]?
    var liveState: Bool
}

// 임시적으로 각 id들을 UUID().uuidString이 아닌 임시값으로 넣어두었다.
class Store {
    var dummy: [User] = [
        User(id: "333", name: "pepe", profileImageURL: "pepe",
             feed: [
                "f333"
             ],
             story: [
                Story(storyId: UUID().uuidString,
                      userId: "333",
                      storyImage: "")
             ],
             liveState: false) ]
}

// ----------------
// URLImage.swift

import SwiftUI
import Kingfisher

struct URLImage {
    var url: URL
    var size: CGSize?
}

extension URLImage: View {
    var body: some View {
        KFImage(url)
            .placeholder {
                // 이미지 로딩 중에 표시할 임시 이미지
                // https://github.com/Juanpe/SkeletonView
                // https://github.com/facebookarchive/Shimmer
            }
            .fade(duration: 0.25) // 이미지 로드가 되면 페이드 인 효과로 이미지 표시
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: size?.width, height: size?.height)
    }
}

// -------------------
// FeedCell.swift

URLImage(url: URL(string: user.profileImageURL)!, size: CGSize(width: 32, height: 32))
    .clipShape(Circle())
    .padding(.horizontal, 10)
    .padding(.vertical, 11)

킹피셔 깃허브 리드미
킹피셔 참조링크 1
킹피셔 참조링크 2
킹피셔 참조링크 3

어려웠던 점

모델과 뷰, 어떤 걸 먼저 짜야지 다음 스탭으로 수월하게 넘어갈 수 있는지 몰라 그 순서를 정하는 것이 어려웠다.
계속해서 뷰와 모델을 왔다갔다하면서 뷰에서 이게 필요하니 이걸 모델에 작성해야하고 반대로 더미데이터를 짜다 이것도 뷰에 필요한데 뷰를 어떻게 그려야할까 라는 식의 생각들로 머리가 복잡해지기만 했다.

막상 만들고나니 메인 뷰 하나에 많은 기능들, 이어진 뷰, 디테일 뷰들이 많다는 걸 알게되었다.
git을 사용하는데에 있어 오류가 발생해 약 하루정도 버벅였다. git 전략을 설정하지 못한 패착이었다. reset 후 다시 파일을 만들고 push 하였다.

미흡/보완한 점

상단 네비게이션 이미지로고를 넣으면서 스토리뷰와 상단 네비게이션에 알 수 없는 공백이 생겼다.

ToolbarItem(placement: .principal) { }

이미지 로고를 넣기 위해 사용한 .principal이 아닌 다른 방법을 찾아보아야겠다.

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        NavigationLink {            
            // 카메라     
        } label: {
            Image("carmera")
        }
    }
                
    ToolbarItem(placement: .topBarLeading) {
                    
        Image("navigationLogo")
            .padding(.leading, 102)
    }
}

.principal이 아닌 topBarLeading으로 카메라에서부터 padding으로 중앙을 잡았다 하지만 기기마다 사이즈가 달라지니 추후 각 기기별 사이즈를 측정해 가운데를 찾는 방법을 구해서 대입해야한다.
~~대충 비둘기가 목으로 헬리콥터처럼 나는 짤~~

회고

기능을 구현하지 않았기 때문에 기능이나 이어진 뷰, 디테일 뷰 등 미비된 것들이 많다.
필요한 것은 경험같다. 뷰와 모델 어떤 걸 먼저 짜야할지 순서는 상관 없으나 나에게 맞는 방법을 찾을 때까지 반복해야할것같다.

다음주 진행할 내용

상단 네비게이션 버튼 기능 (카메라, 메세지 페이지)
피드셀 프로필 누르면 프로필 탭 화면으로 이동
피드셀 하트 버튼 누르면 색변화, 카운트 증감
피드셀 댓글 버튼 누르면 모달로 댓글페이지 띄우기
피드셀 공유 버튼 누르면 모달로 공유 페이지 띄우기
피드셀 저장 버튼 누르면 모달로 저장 페이지 띄우기
이미지 로딩 중 표시할 플레이스 홀더 정하기