[team-03][Elly, Zeke] JSON 데이터 받아와서 Parsing, Diffable 적용 #15

ellyheetov · 2021-04-22T07:20:21Z

프로그래밍 요구 사항

JSON Response 객체 정의
메인 반찬 로드
국,찌게 로드
밑반찬 로드
응답 처리
알라모파이어(alamofire) 프레임 워크 이용(not URLSession)
이미지 URL분리 및 Image 파일 다운로드
셀을 표기할 때 이미 다운로드된 이미지가 있으면 표시하고, 새로운 파일이 다운로드 완료되면 해당 이미지를 셀에 뒤늦게(lazy) 표시
Font 적용

학습 키워드

Alamofire
Section Header
Combine
Diffable

고민사항

Font가 적용되지 않음
Image를 load하는 시점과 화면에 뿌려지는 시점이 달라서 발생하는 문제
- 이미 Collection view를 생성하여 화면에 그리고 난 뒤, 데이터를 로드
- Compleciton 클로저를 사용하려고 했으나, 여러개의 completion handler로 코드가 복잡해 짐 → Combine을 사용하여 해결
이미지가 다운로드 될 때마다 Collection view를 다시그리는 현상
- 불필요하게 여러번의 collection view의 reloadData()가 호출 → Diffable을 사용하여 해결

Collection view 생성 및 autolayout 적용

add App Transport Security Settings for image

ChocOZerO

접근제어자는 습관이라 private부터 시작해 필요한만큼 단계를 풀어가는 방식으로 연습하시면 빠르게 체득될거에요.

ChocOZerO · 2021-04-23T10:00:05Z

SideDish/SideDish/Controller/ViewController.swift

+            guard kind == UICollectionView.elementKindSectionHeader else {
+                return nil
+            }
+            let section = self.dataSource.snapshot().sectionIdentifiers[indexPath.section]


클로져 내의 self 캡쳐링에 대한게 의도하신건지 확인이 필요할 것 같네요.

ChocOZerO · 2021-04-23T10:01:32Z

SideDish/SideDish/Controller/ViewController.swift

+        }
+        self.sections[0].loadCards(type: .main)
+        self.sections[1].loadCards(type: .soup)
+        self.sections[2].loadCards(type: .side)


인덱스에 직접적으로 숫자를 넣는건 바람직하지 않습니다. section의 위치가 순서가 보장되어야 한다면,[.main, .soup, .side]로 동일한 순서를 만들어서 둘을 섞어보세요.

ChocOZerO · 2021-04-23T10:03:35Z

SideDish/SideDish/Model/Card.swift

+        self.badge = badge
+    }
+    static func == (lhs: Card, rhs: Card) -> Bool {
+        return lhs.id == rhs.id


한 줄로 끝나는 함수는 return이 없어도 동일하다는건 알고 계시면 좋습니다.(팀마다 컨벤션이 다를거라 무조건 return을 지우라는 얘기는 아닙니다 ㅎㅎ)

ellyheetov · 2021-04-23T13:36:34Z

@ChocOZerO 시간 내 주셔서 감사합니다.😃 그런데 혹시, 리뷰가 끝난 걸까요? 가장 고민을 많이 했던, Diffable이나 Conbine을 사용하는 부분, 그리고 네트워크 처리나 전반적인 구조에 대한 대한 리뷰가 없어서요. (설마 완벽해서 그런걸까요🤭)

ChocOZerO · 2021-04-23T16:33:03Z

@ChocOZerO 시간 내 주셔서 감사합니다.😃 그런데 혹시, 리뷰가 끝난 걸까요? 가장 고민을 많이 했던, Diffable이나 Conbine을 사용하는 부분, 그리고 네트워크 처리나 전반적인 구조에 대한 대한 리뷰가 없어서요. (설마 완벽해서 그런걸까요🤭)

네 딱히 이상하다고 느낀점은 별로 없었습니다. raywenderlich tutorial과 비슷하다는 느낌이..? ㅎㅎ 잘 하고 계신것같습니다.(저도 그렇게 배웁니다 ㅎㅎ)
MVC의 장단점을 알아보고 다른 구조에 대해서도 공부해보면 좋을것 같긴 합니다. 구조는 정답이라기보단 상황에 맞는 선택이다보니 다양한 구조를 많이 보시면, 추후에 상황에 맞게 구조를 발전시키실 수도 있을거에요.

[0422] Complete Button component

* [#1] init: 🎉 개발 환경 구축 * [#3] feat: ✨ Header 만들기 * [#5] feat: ✨ BestTab UI 구현 - BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx * [#7] feat: ✨ Slide UI 구현 - App.jsx - SlideContainer import - BestItem.jsx - 삭제 (미사용) - BestItems.jsx - ItemCard prop 추가 - BestTab.jsx - 스타일 수정 - SlideContainer.jsx - UI 구현 - SlideItems.jsx - UI 구현 - SlideArrowBtn.jsx - UI 구현 - ItemCard.jsx - 스타일 수정 - prop 추가 - Label.jsx - prop 추가 - 기본 값 추가 * [#8] feat: ✨ ShowMoreBtn UI 구현 - App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현 * [#10] feat: ✨ Header Dropdown 구현 - App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현 * [#13] feat: ✨ API에 fetch 요청 로직 구현 * [#13] feat: ✨ API 요청, 베스트 기능구현 - BestItems.jsx - API 데이터 동기화 - BestTab.jsx - useState, useEffect, API 요청 - BestTabContainer.jsx - API 데이터 동기화 - BestTabNavigator.jsx - API 데이터 동기화 - ItemCard.jsx - prop 변경 - Label.jsx - COLOR변수 추가 * [#15] feat: ✨ 상세 modal 페이지 UI 구현 - App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현 Co-authored-by: kowoohyuk <kowoohyuk91@gmail.com>

…pi-main Revert "[BE] Main 반찬 컨트롤러 추가"

Be

토스터를 이용하여 제목을 누르면 상품의 개수가 화면에 나오도록 구현 issue:#15

feat: Create Toaster

- 테이블 컬럼 구조에 맞춰 스키마 및 데이터 생성

* [#1] init: 🎉 개발 환경 구축 * [#3] feat: ✨ Header 만들기 * [#5] feat: ✨ BestTab UI 구현 - BestTab UI - 상수 파일 - const.js - 재사용 컴포넌트 - Label.jsx - ItemCard.jsx * [#7] feat: ✨ Slide UI 구현 - App.jsx - SlideContainer import - BestItem.jsx - 삭제 (미사용) - BestItems.jsx - ItemCard prop 추가 - BestTab.jsx - 스타일 수정 - SlideContainer.jsx - UI 구현 - SlideItems.jsx - UI 구현 - SlideArrowBtn.jsx - UI 구현 - ItemCard.jsx - 스타일 수정 - prop 추가 - Label.jsx - prop 추가 - 기본 값 추가 * [#8] feat: ✨ ShowMoreBtn UI 구현 - App.js - ShowMoreBtn import - ShowMoreBtn.jsx - UI 구현 * [#10] feat: ✨ Header Dropdown 구현 - App.js - Header 경로 수정 - Header.jsx - 경로 변경 - HeaderLeft & Right 분리 - HeaderLeft.jsx - 컴포넌트화 - Navigations 컴포넌트화 - HeaderRight.jsx - 컴포넌트화 - Navigations.jsx - 컴포넌트화 - Dropdown 구현 * [#13] feat: ✨ API에 fetch 요청 로직 구현 * [#13] feat: ✨ API 요청, 베스트 기능구현 - BestItems.jsx - API 데이터 동기화 - BestTab.jsx - useState, useEffect, API 요청 - BestTabContainer.jsx - API 데이터 동기화 - BestTabNavigator.jsx - API 데이터 동기화 - ItemCard.jsx - prop 변경 - Label.jsx - COLOR변수 추가 * [#15] feat: ✨ 상세 modal 페이지 UI 구현 - App.js - PopUpContainer import - PopUpContainer.jsx - UI 구현 - PopUpImages.jsx - UI 구현 - PopUpInformations.jsx - UI 구현 * [#16] feat: ✨ 모달 페이지 이벤트 구현중 * [#16] feat: ✨ 수량정보 컴포넌트 분리 * [#19] refactor: 🔨 리팩토링, 부족한 부분 추가 구현 - 파일 및 폴더 구조 변경 - common 폴더 생성 - Context.jsx - useContext 사용하여 prop drilling 개선 - 팝업 이벤트 구현 - 수량 변경 - 주문하기 - 주문결과 안내 메시지 UI * [#19] refactor: 🔨 리팩토링 * [#17] feat: ✨ dj-slider 폴더구조 구축 * [#17] feat: ✨ 슬라이드 1/2 구현 중 * [#23] refactor: 🔨 코드 리뷰 코멘트 반영 및 개선 * [#17] feat: ✨ 슬라이드 구현중/일부사항 수정 - util.js - price에 comma 붙이는 기능 구현 - PopUpItemCountContainer.jsx - price에 comma 붙이는 기능 import - ItemCard.jsx - price에 comma 붙이는 기능 import - 이미지 background로 수정 - Label.jsx - 라벨 배경색상 적용 * [#17] feat: ✨ 슬라이드 구현중 - 모듈화 - 시연을 위한 기능 구현을 위해 보류 * [#25] feat: ✨ 슬라이드 2/2 구현, API 데이터 동기화 - 슬라이드 명칭을 캐로셀로 변경 - API 데이터 동기화 - 캐로셀의 ItemCard를 children으로 변경 - 모듈화를 위함! - 아이템카드 mini, large 프로퍼티 추가 - 상세모달 캐로셀 추가 - 상세모달 스크롤 추가 - 모든 카테고리 보기 기능 구현 * [#27] feat: ✨ BestTab Skeleton UI 만들기 - Main.jsx - 시연을 위한 loop 설정 추가 - BestTab.jsx - SkeletonTab import - BestTabNavigator.jsx - 주석 제거 - SkeletonTab.jsx - Skeleton UI 구현 - DicoJsonCarousel.jsx - Carousel 구현중 * [#29] feat: ✨ PopUp Skeleton UI 만들기 - Context.jsx - 주석 제거 - BestTab.jsx - 주석 제거 - PopUpContainer.jsx - Skeleton import - PopUpItemsSlide.jsx - 주석 제거 - SkeletonPopUpContainerBody.jsx - Skeleton UI 구현 * feat: ✨ carousel loop 기능 구현 * [#31] feat: ✨ README.md 작성완료 Co-authored-by: kowoohyuk <kowoohyuk91@gmail.com>

zekexros and others added 20 commits April 19, 2021 16:41

feat: add gitignore

1942aca

feat: initial project

15f0226

feat: add collectionview

e5fe0f4

feat: add collectionview cell

c220daa

feat: add autolayout

b6ca4b2

feat: complement autolayout with collectionview cell

9edf3ab

feat: add header in collection view

e60becb

feat: add gesture recognizer in collection view header

489c7a6

refactor: remove all constraint about label and use stackview

0e8dab8

Merge pull request #14 from zeke-iOS/feature-CollectionView

e152477

Collection view 생성 및 autolayout 적용

feat: add Card class

24b2337

feat: add Section class

f41512e

refactor: change naming

1017457

feat: add load main dish from network

ac5f739

feat: add card value in CardCell

8e4319e

feat: update info.plist

d5851e6

add App Transport Security Settings for image

feat: load image from url

8004a94

feat: draw images using combine and diffable

9b87b1f

feat: draw images using combine and diffable

085ae09

style: add configuration for SectionHeaderReusableView

7b0e4b6

ellyheetov added the review-iOS iOS 리뷰 label Apr 22, 2021

ellyheetov requested a review from ChocOZerO April 22, 2021 07:20

ellyheetov assigned zekexros and ellyheetov Apr 22, 2021

ellyheetov added 3 commits April 22, 2021 16:34

refactor: divide file EndPoint, CardAPI

b9afd5c

refactor: divide file EndPoint, CardAPI

47be555

fix typo: apply the NotoSansKR font

c3ebdb0

ChocOZerO reviewed Apr 23, 2021

View reviewed changes

jjunyjjuny pushed a commit that referenced this pull request Apr 26, 2021

Merge pull request #15 from GleamingStar/Seong-Button

882e695

[0422] Complete Button component

ksundong pushed a commit that referenced this pull request Apr 28, 2021

Merge pull request #15 from Dae-Hwa/revert-10-BE/preparation/mockup-a…

eb96079

…pi-main Revert "[BE] Main 반찬 컨트롤러 추가"

sallyjellyy pushed a commit that referenced this pull request Apr 29, 2021

Merge pull request #15 from d-h-k/BE

7ae67ef

Be

ghis22130 pushed a commit that referenced this pull request Apr 29, 2021

feat: Add Toaster

ca7fa4a

토스터를 이용하여 제목을 누르면 상품의 개수가 화면에 나오도록 구현 issue:#15

Sonjh1306 added a commit that referenced this pull request Apr 29, 2021

Merge pull request #15 from Polynomeer/feature/1/toaster

64f815f

feat: Create Toaster

ksundong pushed a commit that referenced this pull request May 1, 2021

[#15] Feat : Create schema.sql , data.sql

5873875

- 테이블 컬럼 구조에 맞춰 스키마 및 데이터 생성

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[team-03][Elly, Zeke] JSON 데이터 받아와서 Parsing, Diffable 적용 #15

[team-03][Elly, Zeke] JSON 데이터 받아와서 Parsing, Diffable 적용 #15

Uh oh!

ellyheetov commented Apr 22, 2021

Uh oh!

ChocOZerO left a comment

Uh oh!

ChocOZerO Apr 23, 2021

Uh oh!

ChocOZerO Apr 23, 2021

Uh oh!

ChocOZerO Apr 23, 2021

Uh oh!

ellyheetov commented Apr 23, 2021

Uh oh!

ChocOZerO commented Apr 23, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[team-03][Elly, Zeke] JSON 데이터 받아와서 Parsing, Diffable 적용 #15

Are you sure you want to change the base?

[team-03][Elly, Zeke] JSON 데이터 받아와서 Parsing, Diffable 적용 #15

Uh oh!

Conversation

ellyheetov commented Apr 22, 2021

프로그래밍 요구 사항

학습 키워드

고민사항

Uh oh!

ChocOZerO left a comment

Choose a reason for hiding this comment

Uh oh!

ChocOZerO Apr 23, 2021

Choose a reason for hiding this comment

Uh oh!

ChocOZerO Apr 23, 2021

Choose a reason for hiding this comment

Uh oh!

ChocOZerO Apr 23, 2021

Choose a reason for hiding this comment

Uh oh!

ellyheetov commented Apr 23, 2021

Uh oh!

ChocOZerO commented Apr 23, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants