👍🏻iDo

취미 공유를 위한 커뮤니티 앱

목차

• 📆 프로젝트 기간
• ⭐️ 프로젝트 소개
• 📚 구현 기능
• 👩🏻‍💻 Contributors
• 🛠️ Tech Stack
• 🏹 사용한 라이브러리
• ❓ 라이브러리 사용 이유
• 🔫 트러블 슈팅
  • UI 업데이트
  • 이미지 비율 및 다운로드 속도
  • 기기 별 레이아웃 조정

📆 프로젝트 기간

2023년 10월 10일 ~ 2023년 11월 17일 (6주)

⭐️ 프로젝트 소개

프로젝트 목표

앱 배포, 파이어베이스 연동, 이미지 다루기

📚 나의 구현 기능

0. 공통

   • 이미지 캐싱 작업
   • 이미지 리사이징 작업
   • 페어 프로그래밍 도입
   
   

1. 홈 페이지

   • 가입한 모임 목록 표시
   
   

2. 모임 페이지

   • 가입 멤버 목록
   • 모임장 표시
   
   

3. 게시글 페이지

   • 제목, 내용, 이미지, 작성 시간 표시
   • 게시글 추가/삭제/수정 기능
   • 댓글 추가/삭제/수정 기능
   • 프로필 이미지 클릭 시, 해당 유저 프로필 확인
   • 게시글 신고하기
   • 댓글 신고하기
   
   

👩🏻‍💻 Contributors

홍준영	김도현	강지훈	한동연	이애라
☀️ 리더	️🌙 부리더	🛠️ 개발자	🛠️ 개발자	🛠️ 개발자
게시글 목록/게시글 생성 및 수정	게시글 상세/댓글	회원가입	모임 생성/수정	홈 화면
회원탈퇴	이미지 캐싱	로그아웃	이미지 유효성 검사 기능	마이 프로필 화면
신고기능	신고기능	카테고리	이미지 편집	상단 로고 추가

🛠️ Tech Stack

🏹 사용한 라이브러리

1. Firebase
2. SnapKit
3. Tabman
4. TOCropViewController

❓ 라이브러리 사용 이유

1. Firebase
   로그인 및 회원가입 진행 시 유저의 데이터를 가져오고 비교하기 위해 Authentication에 데이터 동기화를 위해서 사용
   모임/게시글/댓글 등 각각 콘텐츠의 CRUD 기능을 위한 데이터를 활용하기 위해 Realtime에 데이터 동기화를 위해서 사용
   콘텐츠, 유저와 관련된 이미지를 관리하고 캐싱하기 위해 Storage에 이미지 저장을 위해서 사용
   

2. SnapKit
   코드 기반 UI 작업의 효율성을 높이기 위해서 사용 Auto Layout을 쉽게 설정하기 위해 사용

3. Tabman
   상단 탭바 추가를 위해 사용

4. TOCropViewController
   이미지 비율을 3:2로 편집을 쉽게 하기 위해 사용

🔫 트러블 슈팅

UI 업데이트

데이터가 처리되기 전에, 화면 전환이 끝나서 원하는 결과가 보여지지 않음

• 원인 : 데이터 처리가 완료되는 시점을 알 수 없음, 순차적으로 진행이 되게 하는 로직이 없음
• 해결 : 데이터 처리 함수에 completion 을 추가해서 데이터 처리가 완료된 시점에 화면 전환이 이루어지게 함

  func createNoticeBoard(title: String, content: String, completion: @escaping (Bool) -> Void) {
      let ref = Database.database().reference().child("noticeBoards").child(club.id)
      let newNoticeBoardID = ref.childByAutoId().key ?? ""
      .
    	  .
    	  .
      self.uploadImages(noticeBoardID: newNoticeBoardID, imageList: self.newSelectedImage) { success, imageURLs in
          if success {
              .
    					  .  
    					  .
                  completion(success)
              }
          } else {
              completion(false)
          }
      }
  }

  // 사용 예시
  // 새로운 메모 작성
  @objc func finishButtonTappedNew() {
      navigationItem.rightBarButtonItem?.isEnabled = false
        
      if isTitleTextViewEdited, isContentTextViewEdited {
          guard let newTitleText = createNoticeBoardView.titleTextView.text else { return }
          guard let newContentText = createNoticeBoardView.contentTextView.text else { return }
            
          firebaseManager.createNoticeBoard(title: newTitleText, content: newContentText) { success in
              if success {
                  self.navigationController?.popViewController(animated: true)
                  print("게시판 생성 성공")
              }
              else {
                  self.navigationItem.rightBarButtonItem?.isEnabled = true
                  print("게시판 생성 실패")
              }
          }
      }
      else {
          navigationItem.rightBarButtonItem?.isEnabled = true
      }
  }

이미지 비율 및 다운로드 속도

이미지 다운로드 속도가 느림

• 원인 : 사용자가 보는 이미지에 비해 매우 큰 사이즈의 이미지를 저장하고 불러오기 때문, Firebase Storage는 따로 캐싱작업을 해주지 않음
• 해결 : 이미지 사이즈 조절을 구현하여 저장, storage에 metadata에 있는 updated값과 로컬에 있는 이미지 데이터를 updated 비교하여 다를 경우 서버에서 이미지를 가져와 캐싱된 이미지를 변경함

1. 이미지 리사이징 작업

extension UIImage {
    func resizeImage(targetSize: CGSize) -> UIImage {
        let size = self.size
        let widthRatio = targetSize.width / size.width
        let heightRatio = targetSize.height / size.height

        var newSize: CGSize

        if widthRatio > heightRatio {
            newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio)
        } else {
            newSize = CGSize(width: size.width * widthRatio, height: size.height * widthRatio)
        }

        let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)

        UIGraphicsBeginImageContextWithOptions(newSize, false, 1.0)
        self.draw(in: rect)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

guard let smallImageData = image.resizeImage(targetSize: CGSize(width: 90, height: 90)).pngData(),
      let mediumImageData = image.resizeImage(targetSize: CGSize(width: 480, height: 480)).pngData() else { return }
let datas = [smallImageData, mediumImageData]
imageUpload(datas: datas, uid: uid)

2. 이미지 캐싱 작업

final class CacheImage {
    var image: UIImage
    var updated: Date?
    
    init(image: UIImage, updated: Date?) {
	self.image = image
	self.updated = updated
    }
}

var cacheImage: CacheImage? = nil
if let image = imageCache.object(forKey: storagePath as NSString) {
    completion(.success(image.image))
    cacheImage = image
}
let storage = Storage.storage().reference(withPath: storagePath)
  
storage.getMetadata { metadata, error in
    if let error {
        completion(.failure(error))
        return
    }

    if let cacheImageUpdated = cacheImage?.updated,
       let storageDataUpdated = metadata?.updated,
       cacheImageUpdated == storageDataUpdated {
        return
    }
  					  .  
  					  .

데이터가 많은 화면에서 느린 속도

• 원인 : 모든 데이터를 한꺼번에 가져와서 생긴 문제
• 해결 : 페이지 네이션을 구현하여 데이터를 10개씩 나눠서 가져오도록 구현

var query = defaultRef.queryOrderedByKey()
if let lastClubId {
    query = query.queryStarting(atValue: lastClubId)
}

query = query.queryLimited(toFirst: 10)

query.getData { error, datasnapshot in
				.
				.

// 스크롤뷰에서 일정 높이가 넘어가면 새로 데이터를 불러오도록 구현
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        if offsetY > contentHeight - scrollView.frame.height && !isLoading {
            loadData()
        }
    }

### 기기 별 레이아웃 조정

기기에 따라서 컴포넌트의 레이아웃이 깨짐

• 원인 : 기기 별로 화면의 크기가 다름, 오토레이아웃을 정확한 수치로 지정

  // 높이를 수치로 설정
  meetingDescriptionTextView.snp.makeConstraints { make in
      make.top.equalTo(countMeetingNameLabel.snp.bottom).offset(Constant.margin4)
      make.centerX.equalTo(scrollView)
      make.left.right.equalTo(scrollView).inset(Constant.margin4)
      make.height.equalTo(160)
  }

  

• 해결 : lessThanOrEqualTo과 greaterThanOrEqualTo 이용해서 레이아웃 설정

  // 높이의 최대, 최소 지정
  meetingDescriptionTextView.snp.makeConstraints { make in
     make.top.equalTo(countMeetingNameLabel.snp.bottom).offset(Constant.margin4)
     make.centerX.equalTo(scrollView)
     make.left.right.equalTo(scrollView).inset(Constant.margin4)
     make.height.lessThanOrEqualTo(160)
     make.height.greaterThanOrEqualTo(100)
  }