230812 불타는 토요스터디 🔥

###### tags: `study` # 231007 불타는 토요스터디 🔥 --- [Whales 🐳](https://github.com/WhalesJin) [Dasan 🏞️](https://github.com/DasanKim) [Moon 🌙](https://github.com/hojun-jo) [Kobe 🏀](https://github.com/devKobe24) --- ## 👨‍🔬 실험 목표 MVC, MVVM 아키텍처에 대해 고민하고, 코드를 통해 작성할 수 있다. ## 👨‍🔬 실험 1: MVC 패턴을 활용해 앱을 구성해봅시다. ### 📋 Todo - 일반적인 MVC <img src = "https://hackmd.io/_uploads/HkoRWE0l6.png" width = 500> - 모델(Model): 애플리케이션의 데이터, 로직, 규칙을 관리합니다. - 뷰(View): 사용자에게 모델에서 전송한 데이터를 표시하고 사용자 명령을 컨트롤러에 전송합니다. - 컨트롤러(Controller): 사용자의 입력을 받아들여 모델과 뷰를 적절하게 업데이트합니다. - Cocoa MVC <img src = "https://hackmd.io/_uploads/SJRMMNRe6.png" width = 500> - 모델(Model) - 데이터 로직 : 모델은 애플리케이션 데이터와 그 데이터를 처리하는 로직을 캡슐화합니다. - 상태 관리 : 애플리케이션의 상태를 관리하고, 다른 컴포넌트에 상태 변화를 통지합니다. - 데이터 무결성 유지 : 유효성 검사, 데이터 변환, 데이터 저장 및 검색 등을 처리합니다. - 뷰(View) - 화면 구성 - 유저와 상호작용을 해야하는 곳으로 상호작용을 Controller 계층으로 전달하는 역할 - 컨트롤러(Controller) - 앱에 대한 설정 및 조정 - 다른 객체의 수명 주기 관리 - 다음을 고려하면서 UIKit에서의 MVC 패턴에 대해 고민해봅시다. - 일반적인 MVC 와 Coocoa MVC 는 어떤 차이가 있을까? - View 와 Controller 사이의 관계가 일반은 분리에 엄격한데 cocoa는 밀접하다 - 일반적인 MVC의 Controller - 모델 내 데이터 조작(모델에 로직이 있다)으로 컨트롤러 입력을 받을 수 있다. - Cocoa MVC Controller - 사용자의 입력을 해석하는 것 이상의 추가 책임을 갖게 된다. - 대규모 애플리케이션의 복잡성 관리 - Cocoa MVC에서 뷰 컨트롤러가 여러 책임을 가지기 때문에, 애플리케이션이 복잡해지면 컨트롤러가 과도하게 커지고 복잡해질 위험이 있습니다. - Cocoa MVC의 ViewController 는 세 요소 중 어디에 해당된다고 할 수 있을까? - Controller - 각 역할의 책임은 무엇이며, 서로 어떻게 상호작용하며, 역할들에게는 왜 그런 이름이 붙었을까? - **Model**: Encapsulate Data and Basic Behaviors(데이터와 기본 동작을 캡슐화하는 모델) - 데이터 로직: 모델은 애플리케이션 데이터와 그 데이터를 처리하는 로직을 캡슐화합니다. - 상태 관리: 애플리케이션의 상태를 관리하고, 다른 컴포넌트에 상태 변화를 통지합니다. - 데이터 무결성 유지: 유효성 검사, 데이터 변환, 데이터 저장 및 검색 등을 처리합니다. - **View**: Present Information to the User(사용자에게 정보를 제공하는 뷰) - UI 요소: 사용자 인터페이스를 구현하고 사용자와의 상호작용을 관리합니다. - 렌더링: 모델 데이터의 시각적 표현을 제공합니다. - 사용자 입력: 사용자의 액션을 감지하고 이를 컨트롤러에게 전달합니다. - **Controller**: Tie the Model to the View(컨트롤러 개체가 뷰에 모델을 연결) - 데이터 흐름 제어: 사용자의 입력을 모델로 전달하고, 모델의 변화를 뷰에 전달하여 UI를 업데이트합니다. - 뷰-모델 연결: 컨트롤러는 뷰와 모델 간의 중개자 역할을 합니다. - 일부 뷰 로직: 컨트롤러는 뷰의 생명주기를 관리하고, 뷰가 표시할 데이터를 준비하는 등의 추가 역할을 수행합니다. - Business Logic(ex. UserDefaults 저장)은 세 요소 중 어디에 포함시켜야할까? - Model - 실제 MVC 패턴으로 코드를 작성해봅시다. --- ## 👨‍🔬 실험 2: MVVM 패턴을 활용해 앱을 구성해봅시다. 실험 1 에서 작성한 코드를 MVVM 패턴으로 리팩토링 ### 📋 Todo - MVVM 패턴을 적용하기 위해 고민해봅시다. - 각 역할의 책임은 무엇이며, 서로 어떻게 상호작용하며, 역할들에게는 왜 그런 이름이 붙었을까? - ViewModel 과 Controller의 차이는 무엇일까요? - ViewModel은 데이터를 변환한다. - 바인딩 : 신발 - 코비 - 뷰모델은 모델에서 제공하는 데이터 등을 뷰에서 사용할 수 있게 변환한다. - UI event 처리, 사용자 입력을 모델 업데이트 - 변경사항이 있으면 뷰한테 알려줌 - Event vs 사용자 입력 - UIComponent마다 관리하는 event가 있고 - 사용자 입력은 사용자가 입력한. - button은 데이터가 들어오는게 아니라 tap -> 입력 = event - 로웬 - MVVM과 MVC의 큰 차이점은 바인딩 - 모델과 뷰를 데이터 바인딩을 통해 소통할 수 있게 해준게 뷰모델 - 명령형과 다르게 선언형은 연속적인 작업. (끊기지 않는다.) - UIKit - MVC 용으로 만든. MVVM을 적용하는게 어색하고 코드가 복잡해진다. 명령형 뷰라서. 뷰를 업데이트를 못하기 때문에 억지로 Observer 패턴 등으로 그럼 왜 MVVM? 뷰컨은 테스트하기 어렵 (비즈니스 로직인데 뷰컨에 들어가있고, 잘못된 패턴 적용) 이런게 예방되기도 하고. MVVM은 뷰컨을 뷰로 본다. - MVVM을 어떻게 UIKit에, Cocoa MVC에 반영할 수 있을까요? - 이때의 ViewController는 MVVM에서 무엇으로 볼 수 있을까요? - **[로웬]()**이 뷰로 본다고 하셨습니다 - MVVM은 선언형 View를 위해 나왔습니다. UIKit은 뷰가 명령형이기 때문에 선언형처럼 보이게 해주려고 데이터 바인딩을 위한 클로저, 옵저버 패턴 등을 사용한 라이브러리(프레임워크)가 필요합니다. - 데이터 바인딩을 통해 직접 View를 업데이트하는 코드가 필요합니다. - Business Logic(ex. UserDefaults 저장)은 세 요소 중 어디에 포함시켜야할까요? - Model - ViewModel이 Model의 변화를 View에 전달하기 위해서 어떤 방법을 활용하나요? - 데이터 바인딩 - MVVM, MVC 패턴에 대한 설명이 왜 사람마다 다르다고 생각하나요? 단지 그 사람이 제대로 모르기 때문이 아니라, 어떤 이유가 있지 않을까요? - 시대에 따라 트렌드가 바뀌는 것 같다. - 트렌드를 따라가는게 마냥 좋지는 않다. - 회사나 요건에 필요하다면 해야죠 변태웨일과 그냥다산 - 기술에 매몰되지 말고 선택하라. - 로웬 센세 - 각자 나름의 장점이 있다. 선택해서 사용한다는 마인드 -> 다 알아야 한다. - 섞어서 쓰는 데도 있다??????!!?!?! 🤦🏻‍♀️ - 들렸다 갑니다 - 누구게여 - 망고 가장 큰 차이점. 데이터 바인딩 데이터 바인딩을 통해 소통할 수 있도록 해야함. 데이터 바인딩: 데이터 바인딩은 데이터와 UI 요소 간의 연결을 의미합니다. 이것은 UI 요소가 데이터의 변경 사항을 실시간으로 반영하거나 사용자 입력을 데이터로 전달하는 데 사용됩니다. 예를 들어, 사용자 이름이라는 데이터가 있을 때, 데이터 바인딩을 사용하면 이름 데이터를 텍스트 상자에 표시하거나 텍스트 상자에 입력한 이름을 데이터로 저장할 수 있습니다. MVVM - 선언형을 위한. UIKit MVVM - 뷰가 명령형이므로... 간단하지 않아. 복잡해질 수 있음 - 명령형은 뷰는 명령을 받지 않으면 업데이트를 못함!! - viewController를 뷰로 봄??? SwiftUI MVVM - 간단쓰. 애초에 뷰가 선언형이므로 ## 👨‍🔬 추가 실험 키워드 추가 학습을 희망하는 캠퍼만 실험해 봅니다. (필수 사항은 아닙니다!) * 아키텍처란 무엇인가? * MVP * VIPER * RIPs * Clean Architecture --- ### 📚 참고문서 - [Documentation Archive - MVC](https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html) - [Blog: Rx-MVVM의 올바른 사용법](https://velog.io/@dawn_dancer/iOS-Rx-MVVM%EC%9D%98-%EC%98%AC%EB%B0%94%EB%A5%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-saebyuckchoom) --- ### 각자의 코드 |Whales 🐳|Dasan 🏞️|Moon 🌙|Kobe 🏀| |:--:|:--:|:--:|:--:| |[코드 보러가기](https://github.com/WhalesJin/FireSaturdayStudyClassC/tree/whales)|[코드 보러가기](https://github.com/WhalesJin/FireSaturdayStudyClassC/tree/dasan)|[코드 보러가기](https://github.com/WhalesJin/FireSaturdayStudyClassC/tree/moon)|[코드 보러가기](https://github.com/WhalesJin/FireSaturdayStudyClassC/tree/kobe)| 이벤트 - UI Component가 있음 사용자 입력 버튼 같은 경우 이벤트와 사용자 입력이 동일하다고 볼 수 있겠지용?

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.