guricode

시작 전에: MVVM + Riverpod?Flutter는 자유도가 너무 높아서 그냥 짜면 View, 로직, 상태가 뒤섞이기 쉽다.그래서 유지보수가 어려워지고, 테스트도 힘들고, 재사용도 안 된다.그래서 역할을 나눠서(View-Model-ViewModel) 설계하면 깔끔해진다.그리고 상태관리는 뭐 쓸까 고민하다가 — Riverpod이 구조 잡기에 최고더라.다양한 Provider로 의존성 주입도 자연스럽고, 테스트도 쉽고, 전역 상태도 잘 관리됨.1단계 - 모델(models): 데이터는 깨끗하게 보관하자API 응답값을 맵 그대로 들고 다니면 에러 난다.그래서 응답값을 Dart 객체로 바꿔서 쓰는 게 기본.예를 들어 네이버 지역 검색 API에서 받은 응답은 이런 식:{ "title": "OO치킨", "r..

공부하다가 아래 코드를 마주쳤다.TextEditingController textEditingController = TextEditingController();처음엔 뭔가 되게 대단한 걸 선언한 느낌이었는데, 알고 보니 꽤 직관적인 역할을 하고 있었다.이걸 공부하면서 Flutter에서의 “컨트롤러”가 어떤 의미를 가지는지도 조금씩 감이 오기 시작했다. TextEditingController는 뭐하는 애일까? TextEditingController는 텍스트 입력 위젯인 TextField나 TextFormField와 연결해서, 사용자가 입력한 텍스트를 저장하고 불러올 수 있는 기능을 제공한다. 간단히 말하면, 입력된 값을 코드에서 다루고 싶을 때 쓰는 도구다.final textEditingController..

아래 글은 Flutter 프로젝트에 Riverpod를 적용해 간단한 통신 시나리오(MVVM 구조)를 만드는 과정을 처음부터 끝까지 풀어쓴 기록이다. 각 단계마다 필요한 코드와 개념을 최대한 상세히 설명했으니, 한 번도 Riverpod을 써 본 적이 없어도 그대로 따라오면 동작하는 예제를 얻을 수 있다1. Riverpod 패키지 추가터미널에서 프로젝트 루트에 다음 명령을 실행한다.flutter pub add flutter_riverpodpubspec.yaml의 dependencies: 블록에 flutter_riverpod: ^버전이 자동으로 들어가고, flutter pub get까지 함께 수행된다.2. 최상위 위젯을 ProviderScope로 감싸기Riverpod은 내부적으로 전역 상태 저장소를 두는데, ..

Flutter나 Dart로 앱을 개발하다 보면 외부 API와 데이터를 주고받을 일이 많습니다. 이때 사용하는 것이 바로 JSON 직렬화와 역직렬화입니다.오늘은 아래 코드를 바탕으로 jsonEncode, jsonDecode, toJson, fromJson의 동작 원리와 작성법을 차근히 정리해보겠습니다.✅ 전체 코드 미리 보기import 'dart:convert';void main() { Map map = { "name": "이영상", "age": 33, }; String jsonData = jsonEncode(map); String jsonSampleData = """{ "name": "이영상", "age": 33}"""; var decodedData = jsonDecode(json..

late란?Dart에서 late는 "변수를 나중에 초기화하겠다고 컴파일러에게 알려주는 키워드"입니다.null을 허용하지 않으면서도, 선언 시 바로 초기화할 수 없는 상황에서 유용합니다.생성자 이후에 값을 초기화할 때의존성 주입처럼 순환 참조 또는 나중 할당이 필요한 경우final과 함께 쓰면 한 번만 나중에 초기화하는 변수로 만들 수 있음 late String name;void main() { name = "Alice"; print(name); // 출력: Alice} 아래 코드는 Dart null safety 기준에서 오류입니다:String name;이렇게 선언하면 "non-nullable 변수인데 초기화가 안 되어 있다"는 오류가 발생합니다.이때 late를 쓰면:late String name;이제..

싱글톤 패턴이란?싱글톤(Singleton)은 클래스의 인스턴스를 오직 하나만 생성하도록 보장하는 디자인 패턴이다.주로 전역적으로 상태를 공유해야 하는 경우 사용한다.예를 들면 앱의 설정 정보, 데이터베이스 연결, 로그 기록 등의 기능에 활용된다.왜 싱글톤을 사용할까?인스턴스를 한 번만 생성하고 재사용해야 할 때여러 객체에서 동일한 인스턴스를 참조해야 할 때메모리 낭비를 막고, 상태를 전역으로 관리하고 싶을 때싱글톤 기본 구조 (Dart 예시)class Singleton { static final Singleton _instance = Singleton._internal(); // 외부에서 인스턴스를 생성하지 못하게 private 생성자 Singleton._internal(); // 생성된 인스턴스..

버전 관리 시스템인 Git을 사용할 때, 브랜치는 개발 효율성과 안정성을 높이는 데 매우 중요한 역할을 합니다. 본 글에서는 Git 브랜치의 기본 개념부터 생성, 전환, 병합, 삭제 방법까지 실무에서 꼭 알아야 할 핵심 내용을 쉽게 설명합니다.1. Git 브랜치란?Git 브랜치는 독립적인 작업 공간을 만들어 줍니다.예를 들어, 새로운 기능을 개발할 때 기존 코드와 분리된 브랜치에서 작업하면, 메인 코드에 영향을 주지 않고 안전하게 개발할 수 있습니다.2. 브랜치 생성하기새로운 브랜치를 만드는 명령어는 다음과 같습니다:git branch 예:git branch feature/login3. 브랜치 전환하기만든 브랜치로 작업 공간을 바꾸려면 checkout 명령어를 씁니다:git checkout 예:git c..

Flutter 앱 개발 시 다양한 화면 크기와 디바이스 환경에 맞춰 UI를 조절하는 방법과, 불필요한 임포트를 정리하는 Organize Imports 기능을 함께 알아봅니다. MediaQuery.of(context)란?MediaQuery는 현재 디바이스의 크기, 해상도, 방향, 텍스트 크기 등을 가져와 UI를 유연하게 구성할 수 있게 도와주는 미디어 정보 제공 위젯입니다.MediaQueryData mediaQuery = MediaQuery.of(context);주요 속성속성 설명size화면 크기 (width, height)orientation세로/가로 모드 구분devicePixelRatio디바이스의 픽셀 비율padding시스템 UI가 차지하는 영역viewInsets소프트키보드 등으로 가려진 영역textS..

상황좌석을 터치했을 때 선택한 좌석이 어떤 것인지 UI로 구분되게 해야 했다.처음에는 좌석의 색상만 바꿔주면 된다고 생각했지만, 어떤 좌석을 클릭했는지 구분하는 방법이 필요했다.즉, 클릭한 좌석을 기억하고 있어야 하고, 그에 따라 색상을 다르게 표시해야 했다.[좌석이 총 20행 x 4자리이니 좌석 구분을 어떻게 할지도 고민했다.또한, setState를 어떻게 효율적으로 써야 UI가 즉각 반응할지가 고민이었다. 방법좌석을 '1A', '2B' 같은 **고유한 식별자(String)**로 만들기로 했다. seatBox('${index + 1}A'),그리고 이를 저장할 자료구조로 Set을 사용했다.Set selectedSeats = {};Set을 쓰면 중복 없이 좌석을 추가/삭제하기 편하기 때문이다.좌석을 클릭할..

기본 개념 정리기본 자료형(int, double, bool, String 등)변수에 값 자체가 저장되고, 함수에 전달할 때는 값 복사(값 전달, call by value) 가 일어나.함수 내에서 매개변수 값을 바꿔도 원본 변수에는 영향이 없음.컬렉션형 자료형(List, Map, Set, 객체 등)변수에는 참조값(주소값) 이 저장되고,함수에 전달할 때도 참조값이 전달됨.그래서 함수 내에서 컬렉션을 수정하면 원본 컬렉션에 영향이 있음. void temp(int param){ param++; // param은 값 복사된 변수라 원본 num에 영향 없음}void tempList(List param){ param.add('apple'); // param이 참조하는 리스트에 'apple' 추가 → 원본 리..