온라인 반찬 서비스

• 기간 : 2021.04 - 2021.04

• 사용 언어 : Swift

• 개발 인원: iOS(2명)

• 기여도 : 70%

• 관련 기술: UICollectionViewDiffableDataSource, Combine

프로그래밍 요구사항

상품정보 셀에는 상품 이지미, 상품 이름, 상세 설명 , 상품 가격 , 이벤트 배지를 표시
상세화면 상단에는 스크롤뷰를 사용하며 Page 방식을 표시하고 좌우로 스크롤 하며 이미지를 변경
상품 정보 아래에 상품 상세 설명 이미지를 세로로 이어서 붙임, 위 아래로 스크롤이 가능
주문하기 버튼을 누르면 해당 상품에 대한 주문을 요청하고 성공하면 이전화면으로 이동

앱 주요 기능

- 종류별(메인음식, 국, 반찬) 반찬 리스트  
- 반찬 상세 화면
- (메인음식, 국, 반찬 목록,이미지) 다중 비동기 네트워크 요청
- Oauth를 활용한 로그인

앱 구성

앱 시연화면

---

메인화면	상세화면	로그인

프로젝트 만들면서 이슈사항

문제

• 앱 새로 시작했을때 이미지 순서가 올바르게 불러오지 못하는 상황이 발생

• 캐시 저장 후엔 정상적으로 이미지 순서대로 불러옴

• 코드 흐름 문제로 스택뷰에 이미지를 넣는 과정에서 백그라운드 스레드를 이용한다고 크러쉬 발생

해결방안

이미지 URL 개수 만큼 UIImageView를 미리 생성 후

스택뷰에 저장

그 후 네트워크 요청을 통해 받은 데이터로 이미지뷰에 이미지 삽입

그 후 UIImage 의 size값을 통해 비율값 처리 하도록 함으로

이미지 순서에 맞게 들어가도록 처리가 되었음

이전 sideDish Detail 이미지 로드 하는 코드

ImageLoader().imageLoad(urlString: imageURL) { [unowned self] (uiimage) in
                guard let uiImage = uiimage else {
                    return
                }
                let imageView = UIImageView(image: uiImage)
                imageView.translatesAutoresizingMaskIntoConstraints = false
                DispatchQueue.main.async {
                    print("섹셔 객체", imageView)
                self.detailSectionStackView.addArrangedSubview(imageView)
                let ratio = imageView.frame.height / imageView.frame.width
                if !(ratio.isNaN) {
                    imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: ratio).isActive = true
                }
                }
            }

현재 sideDish Detail 이미지 로드 하는 코드

desctionImage.forEach { [weak self] (imageURL) in
            let imageView = UIImageView()
            imageView.translatesAutoresizingMaskIntoConstraints = false
            self?.detailSectionStackView.addArrangedSubview(imageView)
            
            ImageLoader().imageLoad(urlString: imageURL) { (uiImage) in
                guard let uiimage = uiImage else {
                    return
                }
                imageView.image = uiImage
                let ratio = uiimage.size.height / uiimage.size.width
                imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: ratio).isActive = true
            }
        }