내배캠 29일차_ Flutter 실무숙련(JSON MVVM)


1. Flutter 실무숙련


[데이터 통신 기초와 JSON]

직렬화 (Serialization) : 객체 -> JSON 문자열, 앱에서 서버로 데이터를 전송할 때 많이 사용.

jsonEncode(object.toJson())


역직렬화 (Deserializtion) : JSON 문자열 -> 객체, 서버에서 받은 JSON 데이터를 앱에서 객체로 사용하기 위해 필요.

Map<String,dynamic> map = jsonDecode(jsonString);

Object obj = Object.fromJson(map);


🌟🌟🌟

// 직렬화 : 객체를 JSON 형태의 문자열로 변환할 때
// 객체 -> Map -> String
// jsonEncode
// 객체에 toJson 메서드 구현

// 역직렬화 : JSON 형태의 문자열을 객체로 변환할 때
// String -> Map -> 객체로 바꿔준다
// String -> Map : jsonDecode 함수
// Map -> 객체 : 객체에 fromJson named 생성자 구현해서 사용!


💡 Dart 객체로 변환해서 쓰는 이유

객체로 변환하지 않으면 Map 에서 계속 키값으로 찾아야돼서 타입이 헷갈리고 오타 발생할 수 있음.




import 'dart:convert';

// 직렬화 : 객체를 JSON 형태의 문자열로 변환할 때
// 객체 -> Map -> String
// jsonEncode
// 객체에 toJson 메서드 구현

// 역직렬화 : JSON 형태의 문자열을 객체로 변환할 때
// String -> Map -> 객체로 바꿔준다
// String -> Map : jsonDecode 함수
// Map -> 객체 : 객체에 fromJson named 생성자 구현해서 사용!

void main() {
// Pet
String easyJson = """
{
"name": "오상구",
"age": 7,
"isMale" : true
}
""";

// 1. String -> Map 형태로 바꾼다
Map<String, dynamic> easyMap = jsonDecode(easyJson);
// 3. Map -> Class 객체로 바꾼다
Pet pet = Pet.fromJson(easyMap);
print(pet.toJson());

// PetDetail
// Contact

String hardJson = """
{
"name": "오상구",
"age": 7,
"isMale" : true,
"favorite_foods" : ["삼겹살", "연어", "고구마"],
"contact": {
"mobile": "010-0000-0000",
"email": null
}
}
""";

// 1. jsonString -> Map형태로 바꾼다.
final hardMap = jsonDecode(hardJson);


// 3. class를 정의했으니 객체로 만든다. (Map을)
PetDetail petDetail = PetDetail.fromJson(hardMap);
print(petDetail.toJson());


}



// 2. 객체로 바꾸기 위해서 class를 정의한다.
class PetDetail{
String name;
int age;
bool isMale;
List<String> favoriteFoods;
Contact contact;

PetDetail({
required this.name,
required this.age,
required this.isMale,
required this.favoriteFoods,
required this.contact,
});
// fromJson 네임드 생성자
PetDetail.fromJson(Map<String,dynamic> map)
: this(
name: map['name'],
age: map['age'],
isMale: map['isMale'],
favoriteFoods: List.from(map['favorite_foods']),
contact: Contact.fromJson(map['contact']),
);

// toJson 메서드
Map<String, dynamic> toJson() {
return {
'name': name,
'age': age,
'isMale' : isMale,
'favorite_foods' : favoriteFoods,
'contact': contact.toJson(),
};
}
}

class Contact {
String mobile;
String? email;

Contact({required this.mobile, required this.email});

// Contact. fromJson 네임드 생성자 만들기
Contact.fromJson(Map<String, dynamic> map)
: this(mobile: map['mobile'], email: map['email']);

// toJson 메서드 만들기
Map<String, dynamic> toJson() {
return {'mobile': mobile, 'email': email,};
}
}

// 2. class를 정의한다
// name, age, isMale
class Pet {
String name;
int age;
bool isMale;

Pet({required this.name, required this.age, required this.isMale});

// fromJson named 생성자 만들기
Pet.fromJson(Map<String, dynamic> map)
: this(name: map['name'], age: map['age'], isMale: map['isMale']);
// Map<String, dynamic> toJson 만들기
Map<String, dynamic> toJson() {
return {'name': name, 'age': age, 'isMale': isMale};
}
}




fromJson : Map -> Pet객체
toJson: Pet 객체 -> Map 
JSON 데이터를 객체로 변환하고, 다시 Map/JSON으로 바꿀 수 있음.
 
favoriteFoods는 JSON 리스트 -> Dart리스트로 변환
contact는 중첩 JSON -> Contact 객체로 변환
toJson()에서 다시 Map으로 직렬화 가능

 

JSON 문자열을 jsonDecode()로 Map으로 변환 
Map을 클래스의 fromJson() 생성자로 객체로 변환
필요하면 toJson()으로 다시 Map/JSON으로 변환




MVVM
Model + View + ViewModel
Model, View, ViewModel로 계층을 나누어서 개발


Model: 데이터를 서버 등에서 가지고 오는 계층, 데이터 클래스 그 자체도 포함.

JSON 예제에서 User, Pet 클래스 -> Model 계층, 데이터 클래스를 Model이라고도 부름.

서버에서 가지고 올 때 
각 모델(데이터클래스) 별로 Repoeitory 만들어서 가지고 와서 
JSON을 객체로 변환해서 반환


View: 화면을 구현하는 계층 - 위젯


ViewModel : Model 계층(Repository)에서 데이터(Model클래스)를 가지고 와서
가공하는 계층




StatefulWidget (많은 역할 수행 시 코드가 지저분해짐) 동작원리
사용자 클릭, 로직 처리 -> 데이터 요청해서 데이터 받음 -> 
받은 데이터 가공 및 상태 업데이트 -> 화면 업데이트


MVVM 동작원리
ViewModel구독(변경되는지 바라보고 있음) -> 사용자 클릭했으니 처리해! -> 로직처리
-> 데이터 요청해서 데이터 받음 -> 받은 데이터 가공 및 상태 업데이트 -> 
자신의 상태가 바뀌었다고 알림(View가 누군지는 모름) ->     
뷰는 ViewModel을 구독하고 있기 때문에 상태가 바뀌었다는 걸 감지, 화면 업데이트



MVVM 장점
유지보수가 편해짐, 오류발생 감소, 중복코드 감소
각각 역할이 분리되어 있어 각자 역할에 맞는 테스트 작성 가능.



Flutter에서 MVVM의 구현은 어떻게 하나요?
상태관리 라이브러리를 쓰면 편하게 구현 가능.
'RiverPod'이라는 상태관리 라이브러리 사용
  

[실습]
New : Flutter Project - application 생성
터미널에서 flutter pub get flutter_riverpod

(마우스커서 cmd+x : 아래에서 위로 올라오면서 내용삭제 됨)



기초공사가 잘 안되어서 그런지 사실 들어도 그런가보다 하면서 듣고 있다.
중등 수학 후루룩 건너뛰고 고등 수학으로 넘어온 느낌...
날 잡고 한번 벼락공부를 해야할 것 같은데...컨디션이 따라주질 않는다.😂
일단 되는대로 듣기라도 하자...





2. 인사이트클럽

책<미니멀리스트 창업가> 사힐 라빈지아 지음, 박재영 옮김, CAPITALEDGE
Chapter.5  진정성으로 승부하라



SNS 회사 계정과 개인 계정을 동시에 만든다. 
사람들은 상대방의 사업과 그 사업의 성공여부에는 크게 관심이 없다. 
그들의 관심사는 오히려 한 인간의 실제 모습과 그 인간이 분투하는 과정이다. 
(p.180)



과거의 유튜버 신사임당이 쇼핑몰 다마고치 콘텐츠를 하는 것도,
백만장자가 제로부터 다시 시작하는 리얼다큐 프로그램을 보면서도 그렇고,
사람들이 강한 인상을 받을 수 있는, 영감을 줄 수 있을 만한 무언가가 필요하다.
우리 팀에게 그것은 무엇일까.


창업이라는 게 정해진 답이 없고 과정과 실행을 직접 설계해서 진행하기 때문에
어렵고, 한편으로는 흥미로우며, 막막함이 동시에 다가온다.
해야될 것은 많은데 우선순위를 정하는게 쉽지 않다.


일단 우리의 고객을 100명 모으기 위한 작업이 필요하다.
커뮤니티를 만들거나, 기존에 있는 커뮤니티를 활용하거나,
콘텐츠를 계속 제공해야 하고,
MVP를 명확하게 만들어야 한다.


페르소나를 구체화해야 한다고 하는데,
일단 '조금 넓은 범위의 고객들에게 테스트를 하는 것이 좀 더 나은 것은 아닐까'하는 생각이 든다.
페르소나를 구체화 하기 위해서 고객 데이터가 더 많이 필요한 것일지도 모르겠다.







댓글

댓글 쓰기

이 블로그의 인기 게시물

내배캠15일차_map() reduce() fold()

이미지
1. dart 함수형 프로그래밍 복습 1] map() map()을 사용해서 새로운 리스트를 만들어내기. 파라미터 'x'를 사용하여 멤버 이름 앞에 블랙핑크를 앞에 붙여준  newBlackPink, newBlackPink2를 만들었다.  newBlackPink, newBlackPink2는 표현은 같지만 서로 다른 리스트임을 알 수 있다. 연속된 숫자를 split(' ')으로 분리한 뒤, x.jpg형태로 map() 적용. toList()를 통해 리스트 형태로 도출한다. 컬렉션 Map에서 key값과 value값 따로 map()을 통해 리스트 형태로 만들기  컬렉션 Set (중복허용)도 map()을 통해 리스트화, 다시 toSet()으로 만들어준 것. 2] reduce() reduce()를 통해 리스트 numbers 내의 숫자의 합계 구하기. 최고 점수 학생을 구하는 과정. 심화과제 도전문제 기능 중 하나. 1) 합계  var total = numbers.reduce((a,b) => a+b); 2) 최댓값 var max = numbers.reduce((a,b) => a > b ? a : b var topStudent = student.reduce((a,b) => a['score'] > b['score'] ? a : b (최고점 학생찾기) 3) 최솟값 var min = numbers.reduce((a,b) =>a < b ? a : b 4) 곱셈 누적 var product = numbers.reduce((a,b) => a * b 5) 문자열 합치기 var text = words.reduce((a,b) => '$a $b'); 3] fold() fold()는 매개변수 2개 필요, 첫번째 매개변수는 초기값을 할당한다.  int 초기값 0, String 초기값 ' '  final count(int)처럼 처음 컬렉션 타입(String)과 다른 타입...
자세한 내용 보기

내배캠16일차_Flutter_스토어 앱 만들기

이미지
1. Flutter 입문 StatelessWidget을 상속받는 Myapp 클래스 ** build : 위젯이 화면에 어떻게 그려질지를 정의함  build(BuildContext context) Column : 위젯을 세로로 배치 SafeArea : Status(상태바) 영역에 padding(여백)을 넣어주는 위젯        Row 위젯 : 위젯들을 가로로 배치하는 위젯 Spacer 위젯 : Row 나 Column에서 위젯 사이의 간격을 조정, 남은 모든 공간 차지 Padding 위젯 : 자식 위젯 주변에 여백을 주는 위젯 Image 위젯  Image.network('http://링크주소') :인터넷 이미지 바로 사용 Image.asset('assets/image.png') : 프로젝트에 추가해준 이미지 사용 Image.file('디바이스_내_파일경로')) fit 속성 BoxFit.cover : 원본사진 가로 세로 비율 유지한 채로 지정한 영역에 사진을 맞춤. Expanded 위젯  Row, Column 내 남은 공간을 확장하여 공간을 채울 수 있도록 하는 위젯 2. 인사이트 아티클 2번 엑싯한 창업가의 조언 : MVP에 대한 개념을 바꾸자 https://eopla.net/magazines/35106# MVP는 기본값이다.  FMBM - Fastest Minimally Monetized Business Model 창업 성공은 현금 흐름을 얼마나 빨리 만들어 내는지에 달려있다. 자본이 아닌, 시장으로부터 신뢰를 얻어라. MVP가 "시장 반응을 보는 단계" 였다면, FMBM은 "시장이 실제로 돈을 내는지 확인하는 단계"  1) 누구보다 빠르게 움직여라. 2) 완성도보다 거래를 우선하라. 3) 제품이 아닌 구조를 팔아라. 다른 사람의 지갑을 열게 할 만한 고통(문제)은 무엇일까? 그것을 해결해줌과 동시에 수익을 낼 수 있는 구조를 고민하고 있다. 가장 가깝게는 나와 가족이 겪는 고...
자세한 내용 보기

내배캠 [3주차 WIL]

WIL : Weekly I Learned 1. 하루에 들어가는 정보량이 너무 많아서 TIL을 매일 적는게 부담이 되었던 것 같다. 이 기록이 나의 스토리텔링의 재료가 되어야 할 텐데, 그저 정보를 옮겨담기에 급급했고, 그마저도 방대한 양이었기에 날것 그대로의 메모장을 따로 보관하게 되었는데, 그 메모장의 파편들을 담아 꾸역꾸역 작성한 것을 생각하니 스스로 조금 부끄러워졌다. 우수 TIL 사례를 이전에 보았을 땐, 크게 와닿지 않았는데 함께 수강하는 분들의 사례를 보니, 그동안 낙서장 수준으로 정보의 파편들만 저장하고 있었다는 것을 문득 깨달았다. 앞으로는 내가 우러나서 작성하고 싶은대로, 내가 배운 것들을 자유롭게 기록하는 공간으로 블로그를 잘 활용해야겠다. 😊 2. Dart 기초강의는 어찌되었든 완강을 했다.  여전히 또렷하지는 않지만 이제 코드를 보는 눈이 조금은 생겼다고 느낀다. 이번주 내내 하루에 한번씩은 튜터님께 찾아가 질문을 드리기도 하고, 매니저님의 명쾌한 설명과 추천 강의를 통해서도 어려움이 많이 해소되었다. 마음같아선 연휴에 강의 진도를 맞추고 문제를 풀면서 복습을 하고 싶은데... 공휴일은 애기랑 같이 있기도 하고 가족들과 함께 하는 시간이라 쉽진 않을 것 같다.😭 3. 연휴가 끝나고 돌아오면 심화과제 제출을 해야하고, 새로 결성된 팀에서 아이디어 논의를 할 예정이다. Dart 스터디 모임도 이번주부터 시작하게 되었는데  혼자 스터디하는 것보다 훨씬 훨씬 집중도도 높고,  다른 분들이 고민하는 포인트나 확장될 수 있는 코드들을 함께 나눌 수 있어서 큰 도움이 되고 있다. 👍 4. 팀원 한분이 해외일정으로 이번주에 함께 아이디어 논의를 하지 못했는데, 다른 팀원 한분과 이야기를 나누면서 공통관심사와 도메인에 얽매이지 않고 pain point를 찾아보자 고 했다. 살짝 얽매인 느낌이 없지 않아 있었는데 얘기해주셔서 고마웠다. (염두할 것 : 비용은 최소화하되, 수익모델은 명확하게 하는 방향으로) 연휴동안 그동안 안...
자세한 내용 보기