Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[team-11][Hong, Downey] 네트워크 통신 및 MVVM 구조를 통한 MainView 구성 #27

Open
wants to merge 49 commits into
base: dahun-lee-daji
Choose a base branch
from

Conversation

dahun-lee-daji
Copy link
Collaborator

@dahun-lee-daji dahun-lee-daji commented Apr 23, 2021

작업 내용

  1. Network + Combine을 사용하여 MVVM의 클린아키텍쳐를 지키도록 노력했습니다.
  2. MVVM의 구조에서 Protocol을 사용하여 의존 관계를 끊으려고 하였습니다.
  3. Mockoon을 이용하여 Network작동을 확인했습니다. ( MockAPI를 대체)
  4. UICollectionViewDiffableDataSource를 사용하여 snapShot을 통한 view를 Reload하지 않도록 했습니다.

진행사항 체크리스트

  • 상품 목록을 서버에서 가져오는 동안 Splash화면을 보여준다. -> 시간이 남는다면 구현 : 셀과 section을 만들 때 (datasource) 섹션과 상품 목록을 서버에 요청한다.
  • 메인 화면은 NavigationView로, 3개의 section을 보여준다. (section의 표시 순서는 항상 동일하다)
  • 섹션 헤더를 누르면 섹션의 상품 갯수를 보여준다. ( CocoaPods를 설치하여 toast형태로 적용한다.)
  • 상품 이름, 상세 설명, 상품 가격은 DB에서 받은 그대로 표시한다. (상세 설명이 길 경우, linebreak를 Truncate Tail로 처리한다.)
  • 뱃지 색상은 enum : String case에 따라 부여한다. Dictionary key:Value에 따라 부여한다.
  • 전체 섹션 정보를 Client로 전달한다. iOS Client는 Network 준비를 마침.
  • 전체 섹션 정보 형식을 작성한다.
  • 네트워크 클래스를 작성한다.
  • ~~ 테스트를 위한 Mock네트워크 클래스를 작성한다.~~ -> mockoon으로 테스트 진행.

학습 키워드

  1. Network + Combine
  2. MVVM
  3. Clean Architecture
  4. UICollectionViewDiffableDataSource
  5. UICollectionView.CellRegistration

고민 & 질문 사항

  1. 뷰모델은 뷰에 가까운 모델을 뷰모델이 가지고 있어야 한다고 알고 있습니다.
    
저희코드에서는 뷰모델에서 Dishes를 sink를 해서 바로 사용하고있는데., sink를 뷰모델에서 해야하는 걸까요?
    UseCase에서 sink를 해서 뷰모델로 넘겨주는게 맞는 걸까요?
  2. UICollectionViewDiffableDataSource를 다른 클래스에서 생성하여 전달하고 있습니다. 이 클래스의 역할이 ViewController에 속하는 것이 맞을까요? 또, 이와 같이 구현하는 것이 옳을까요?
  3. 많은 경우 DiffableDataSource를 <enum section, customDataClass>로 사용하고 있었습니다. 저는 section이 들어갈 자리에 이번 미션의 가장 큰 JsonData를 적용했는데, 이는 틀린 방법일까요?

dahun-lee-daji and others added 26 commits April 19, 2021 15:21
중복 toaster 제거 및 section 상품 수에 맞는 메세지 출력
DiffalbeProvider class를 통해서 생성
셀 크기 조절 : DishCollectionViewDelegate
리팩토링 : DiffableProvider
UITapGestureRecognizer를 subClassing하여 toaster를 보여주고 있었음
이를 closer로 전달하는 방식으로 변경
@ChocOZerO
Copy link

고민 & 질문 사항

  1. 뷰모델은 뷰에 가까운 모델을 뷰모델이 가지고 있어야 한다고 알고 있습니다.
    
 저희코드에서는 뷰모델에서 Dishes를 sink를 해서 바로 사용하고있는데., sink를 뷰모델에서 해야하는 걸까요?
    UseCase에서 sink를 해서 뷰모델로 넘겨주는게 맞는 걸까요?
  2. UICollectionViewDiffableDataSource를 다른 클래스에서 생성하여 전달하고 있습니다. 이 클래스의 역할이 ViewController에 속하는 것이 맞을까요? 또, 이와 같이 구현하는 것이 옳을까요?
  3. 많은 경우 DiffableDataSource를 <enum section, customDataClass>로 사용하고 있었습니다. 저는 section이 들어갈 자리에 이번 미션의 가장 큰 JsonData를 적용했는데, 이는 틀린 방법일까요?
  1. 뷰모델을 뷰라고 생각하면 좀 더 이해가 쉬울 것 같습니다. 프로토콜 없이 그냥 뷰, 뷰모델이 있다면 뷰가 화면을 그리는데 필요한 정보들과 뷰의 interaction 정도가 뷰모델에서 관리되면 좋을 것 같습니다. 그리고 UseCase는 제가 어떤 아키텍쳐를 기준으로 대답을 드려야할지 명확하지 않네요. 원하시는 설계가 있다면 그 부분을 시각화해보시는걸 추천합니다.

  2. 옳고 그런건 없고, 선택입니다. 복잡도를 줄이기 위해 CollectionView의 DataSource를 관리하는 객체를 만드는 선택을 하신거고, 나쁘지 않은 전략입니다. 덕분에 ViewController가 가벼워졌으니까요. 이 같은 선택은 화면이 복잡해질 수록 유리합니다.
    다만, Provider라는 이름에 맞지 않게 재사용성은 좀 떨어지는거 같아서 추상화, 일반화 과정을 거쳐 특화된 DataSource말고 여러 화면의 CollectionView에 맞출 수 있도록 설계되면 좀 더 좋을 것 같습니다. 이건 난이도가 좀 있어서 여유 있을때 도전해보시기를 추천드립니다.

  3. Section을 enum을 사용하지 않고 커스터마이징하는건 상황에 따라 선택하실 수 있습니다. 다만 JsonData를 그대로 사용했다는 얘기는 API의 Response 모델을 그대로 사용했다는 얘기로 들리는데 맞는지 모르겠네요. 이 선택은 바람직하지 않습니다. 이유는 collection view라는 화면의 의존성이 API Response모델에 생기기 때문입니다. Response 모델이 변경되더라도 유연하게 대응할 수 있도록 독자적으로 모델을 만들어서 관리하시길 바랍니다.

MJbae pushed a commit that referenced this pull request Apr 29, 2021
…tting

스프링 프로젝트 생성, jdbc 설정
ghis22130 pushed a commit that referenced this pull request Apr 29, 2021
반찬리스트DTO 클래스의 코딩키 삭제 & ConvertfromSnakeCase 적용 및 변수명 변경

issue: #27
ghis22130 pushed a commit that referenced this pull request Apr 29, 2021
클래스 내부의 속성 접근 제한자 설정

issue:#27
ghis22130 pushed a commit that referenced this pull request Apr 29, 2021
변수명 수정 및 불필요한 함수 제거

issue: #27
ghis22130 pushed a commit that referenced this pull request Apr 29, 2021
기존에 헤더에서 불리워지던 토스터를 ViewController에서 불리워지도록 수정
issue: #27
ghis22130 pushed a commit that referenced this pull request Apr 29, 2021
변수명 및 클래스명 변경

issue: #27
wheejuni pushed a commit that referenced this pull request Apr 29, 2021
[BE] 모킹한 데이터로 API 완성
hayoung123 pushed a commit that referenced this pull request May 2, 2021
crongro pushed a commit that referenced this pull request May 3, 2021
* [#1] feat : create CRA

 - CRA를 설치했습니다

* [#1] feat : mediumCard index.jsx prop 추가

 - 상동

* [#1] feat : node-sass 추가

 - node sass를 추가했습니다

* [#1] feat : 폴더 구조 정리

 - atoms, molecules, images 등 파일 구조 수정했습니다

* [#5] feat : reset scss 추가

- reset scss 추가
- 기본 글꼴 추가

* [#5] feat : button, icon, tag components 추가

 - atoms의 button, icon, tag component를 재사용 가능한 형태로 생성했습니다.

* [#5] feat: set moculses structure

- LargeCard 구조설정
- MediumCard 구조 설정

* [#5] chore : 잘못 생성된 파일 수정

 - 파일 명을 sidedish -> frontend로 바꾸는 과정에서 폴더 구성이 꼬여서 수정

* [#5] feat: molcules- LargeCard,MediumCard 구조 생성

* [#13] feat : MainDish, More 컴포넌트 생성

 - 신규 컴포넌트 생성: maindish, more organisms

* [#11] feat: fetch를 위한 util dir 생성

- util/loadData 생성 : fetch로 data가져오기
- util/url 생성: 기본 url주소 변수 설정

* [#11] feat: HeaderLeft 생성

* [#13] feat : MediumCard TagType 추가

 - 메인요리에 medium카드를 사용하기 위해 medium카드 일부 속성을 수정했습니다.

* [#13] feat : useFetch 컴포넌트 추가

 - fetch기능을 분리하기 위해 util-useFetch컴포넌트를 생성

* [#11] feat: Header 생성

- HeaderLeft 구조 생성
- HeaderRight 구조 생성
- BestDish 구조 생성 중

* [#11] feat: useFatch fetch오류 해결

* [#12] feat: BestDish useTabs hook 사용

* [#13] feat : 카드 캐로셀 기능 완성

 - setTimeout으로 렌더링을 지연시켜 캐로셀 기능을 완성

* [#12] feat: BestDish UI 및 기능구성

- Tab 버튼 클릭시 rendering
- Header Style 일부 수정 (HeaderRight,HeaderLeft,Span,Icon)

* deploy : build 210423

* [#13] feat: CSS style 수정

- innerTitle 설정

* chore: add gitginore

* chore: Add basic gradlew files

* [#13] feat: MainDish,SideDish,BestDish CSS style디테일 설정

- mainDish의 <Icon>,<Image> margin 설정

* [#13] fix : tag 버튼 오류, carousel 렌더링 지연 방식 변경

 - tag 가 이벤트 특가만 나타나는 오류 수정
 - carousel 렌더링 지연 방식을 setTimeOut ->  onTransitionEnd 로 변경

* deploy : build 210424

* [#25] feat : Detail UI 컴포넌트 생성

 - Detail UI 를 위한 InfoGeneral, InfoImages, InfoNumber, InfoPrice, InfoProduct molecules 컴포넌트 생성

* [#24] feat: ADD tab click event(color change)

- Fix MediumCard Tag 부분

* [#25] fix : icon onClick 이벤트 실행 로직 수정

 - icon이 left, right 일 경우에만 moveSlide이벤트가 실행되도록 수정

* [#24] feat: ADD Img MouseOver event

- useState를 통한 isHover로 상태변경 가능

* [#24] feat: Fix CSS Detail in HoverEvent

* deploy : build 210427

* [#24] feat: ADD HeaderDrop event

- Header MouseOver 시 Drop event 추가
- Header DropMenu MouseOver 시 hover event 추가
- Private Component 이름 통일변경 (ex Div -> WrapDiv)
- Component들의 inex.style.jsx 추가 (Styled div 분리)

* [#25] fix : MainDish Carousel 스타일 적용 함수 분리

 - MainDish 스타일 및 매직넘버 삭제

* [#37] refactor : 코드리뷰 반영

 - useFatch 구조 변경 : loadData 컴포넌트 생성해서 데이터만 받아오고 useEffect는 각 컴포넌트에서 실행
 - tag 내용 및 컨텐츠 적용 방식 수정
 - span 스타일 컴포넌트 적용방식을 className 사용으로 변경

* [#25] feat : Detail UI 컴포넌트 수정

 - pages 컴포넌트 생성

* [#25] feat : Modal 컴포넌트 생성

- 모달 컴포넌트 생성 및 클릭 후 모달 오픈, close 버튼 클릭시 숨김 기능 구현

* [#25] feat: Modal data fetch 연결

* deploy : build 210428

* deploy : rebuild 210428

* deploy : rebuild 210428

* deploy : rebuild 210428

* build : rebuild 210428

* [#26] feat : 상세페이지 내 이미지 이벤트 추가

 - 이미지 및 썸네일 추가
 - 썸네일 클릭 시 메인 이미지 변경 이벤트 추가

* [#26] feat : large 카드에 모달 이벤트 추가

- large 카드에도 모달 이벤트를 추가했으나, 아직 베스트 반찬에는 데이터 api를 못받아오고 있으므로 실행은 되지 않게끔 주석처리 했습니다

* [#27] feat: Detail - Info UI 생성 및 fetch data 연결

* deploy :build 210429

* [#27] feat: Fix syntax error

* build : build 210429

* [#26] refactor : carousel 컴포넌트 생성

- 라이브러리화를 위해 carousel 컴포넌트 생성

* build : rebuild 210429

* build : rebuild 210429

* [#26] refactor : carousel 컴포넌트 완성

carousel, carousel style 컴포넌트를 mainDish 컴포넌트에서 분리 완료

* [#26] feat : OtherCard, DetailOther 컴포넌트 생성

 - 디테일 Carousel 작업을 위해 상기 컴포넌트 생성

* [#27] feat: Datail CSS UI 수정

- UI: BestMenu 오른쪽마진 수정
- UI: HoverCard 가운데 정렬  수정
- UI: Mouse cursor 디테일 설정
- feat: useTabs 삭제 및 component내부로 수정
- faet: getComma 파일생성 ( 원, (,) 넣는 함수)

* deploy : rebuild 210429

* deploy : build 210430

* [#27] FE API data fetch 연결 확인

* [#45] FE API data fetch 연결 확인

* [#26] feat : OtherCard 스타일 적용 완성

 - Other Card의 레이아웃 완성

* [#26] feat : OtherCard 케로셀 적용 중

* [#45] feat: 디테일한 CSS UI 구성

* [#26] feat : OtherCard 케로셀 완료

- portal을 적용해서 기존 캐러셀 컴포넌트를 재활용할 수 없는 관계로 캐로셀을 중복해서 사용함

* [#45] feat: fetch Data API and 합치기

* [#45]feat: Details 파일명 변경 및 데이터 전달

* [#45] feat:Details close error 해결

* [#45]feat: CSS style 수정

* [#45] feat: Image data 수정

* fix : Change directory name to camel case

Co-authored-by: ink-0 <71919983+ink-0@users.noreply.github.com>
Co-authored-by: woody <woojihye2339@gmail.com>
Co-authored-by: Tree <gmldbs1109@naver.com>
Co-authored-by: Ubuntu <ubuntu@ip-172-31-44-162.ap-northeast-2.compute.internal>
crongro pushed a commit that referenced this pull request May 4, 2021
* [#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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
review-iOS iOS 리뷰
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants