Flutter 12

상태 관리란 뭘까?

공유 상태가 변경될 때, 동기화 하는 것을 상태 관리(State Management)라고 합니다. 상태 관리가 안되면 데이터 일관성을 잃게 됩니다.유저가 프로필을 변경해도 다른 화면에서 이전 프로필이 보이는 문제쇼핑 바구니에 표시된 상품의 개수와 실제 담긴 상품 개수가 다른 문제글을 작성했는데, 게시판에 반영되지 않는 문제(Create)글을 수정했는데, 게시판에 반영되지 않는 문제(Update)글을 삭제했는데, 게시판에 반영되지 않는 문제(Delete)동일한 데이터를 여러 곳에서 가지고 있기 때문에, 동기화가 필요하게 됩니다.

Flutter 2025.08.21

MVVM 패턴과 상태 관리

Monolithic (모노리스) 구조의 특징하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 흔히 Monolithic Architecture 또는 간단히 Monolith라고 부릅니다. 먼저 MVVM 패턴 없이 간단한 구조로 코드를 작성해보자. 모든 로직과 상태 관리를 하나의 파일에 통합하여, UI와 데이터 처리가 한 클래스에서 이루어지는 방식으로 코드를 작성할 수 있다. 이 방식은 MVVM과 같은 디자인 패턴이 없어도 간단한 앱에서는 빠르게 개발할 수 있는 장점이 있다. MVVM에 대한 기본 개념 잡기 MVVM(Model-View-ViewModel)은 소프트웨어 개발에서 널리 사용되는 아키텍처 패턴 중 하나입니다. 플러터에서 MVVM을 적용하는 것은 앱의 구조를 명확하게 하..

Flutter 2025.08.19

Flutter Key 및 상태 관리에 기본 개념

Flutter의 세 가지 트리 구조개요Flutter는 UI를 효율적으로 렌더링하기 위해 세 가지 트리 구조를 사용합니다. 이 구조들은 성능 최적화와 재사용성을 위해 설계되었으며, 개발자는 주로 Widget Tree만 직접 다룹니다.세 가지 트리의 역할Widget Tree: 개발자가 작성한 UI 구조 (불변객체)Element Tree: Widget과 RenderObject를 연결하는 중간 계층 (상태 유지)RenderObject Tree: 실제 화면에 그려지는 객체들 (렌더링 담당)Widget: UI 설계도 (불변 청사진)Element: 런타임에서 생성된 살아있는 구조물 (가변 인스턴스)역할: 위치, 타입, 상태를 저장하고 RenderObject와 연결중요한 특징:State 객체는 Element에 의해 관..

Flutter 2025.08.08

GestureDetector 위젯

개요GestureDetector는 사용자가 화면에서 수행하는 다양한 터치 이벤트를 감지하고 처리하는 기본적인 Flutter 위젯입니다.특징GestureDetector 자체는 화면에 표시되지 않으며, child에 지정된 위젯에 사용자 이벤트가 발생할 때 이벤트를 처리할 수 있습니다다양한 사용자 이벤트에 대한 콜백 함수들로 구성되어 있어, 각 이벤트에 맞는 동작을 정의할 수 있습니다주요 콜백 함수 onTap사용자가 화면을 가볍게 탭할 때 호출버튼 클릭 효과onDoubleTap사용자가 화면을 빠르게 두 번 탭할 때 호출이미지 확대onLongPress사용자가 화면을 오래 누르고 있을 때 호출아이템 삭제 옵션 표시onTapDown사용자가 화면을 터치하기 시작할 때 호출버튼을 누르는 즉시 효과 적용onTapUp사용..

Flutter 2025.08.08

dart 비동기 프로그래밍

dart 비동기 프로그래밍에 대한 개념을 이해하자.동기성 - 모든 코드가 순차적으로 진행되는 형태비동기 - 코드가 동시다발적으로 실행, 순착적으로 보장을 할 수 없는 형태 dart 비동기 프로그래밍은 프로그램의 흐름을 중단시키지 않고, 무언가의 완료를 기다리는 동안 다른 작업을 수행할 수 있게 해줍니다. Dart에서는 이를 위해 Future와 Stream이라는 두 가지 주요 개념을 제공합니다. Future 타입이 뭘까?Future 객체는 미래에 어떤 값이나 오류를 반환할 것이라는 약속을 나타냅니다. async 키워드가 붙은 함수 내부에서 await 키워드를 사용하면, Future가 완료될 때까지 실행을 잠시 멈추고 결과가 준비되면 다시 실행을 계속합니다

Flutter 2025.08.08

Flutter에서 콜백함수

콜백 함수란?콜백 함수(callback function)는 말 그대로 나중에 불려지는 함수입니다.보통 다른 함수(또는 위젯)에 인자로 넘겨서, 그 함수가 필요한 시점에 대신 호출해주는 방식이에요. 그럼 왜 콜백함수를 쓸까?버튼을 눌렀을 때값이 바뀌었을 때무언가가 끝났을 때자식 위젯이 부모에게 알릴 때이처럼 특정 상황이 생기면 실행되어야 하는 작업을 미리 정해두기 위해 콜백 함수를 씁니다. Flutter에서는 어떻게 쓰일까?Flutter는 위젯 중심의 프레임워크라서,콜백 함수는 보통 이벤트 처리에 많이 사용됩니다. 한줄로 정리하자면콜백 함수는 나중에 실행될 함수를 다른 함수나 위젯에 넘겨주는 것입니다.Flutter에서는 이걸로 버튼 누르기, 값 바꾸기, 사용자 반응 처리를 합니다.

Flutter 2025.07.28

플러터로 스토어 앱 만들기

1.안드로이드 스튜디오 실행2.왼쪽 상단에서 New Flutter Project 생성3.Flutter를 선택4.Flutter경로 선택후 알맞은 설정후 Finish버튼 클릭 2.1.asset 디렉토리 생성후 자신이 원하는 이미지 넣기2.2.yaml에 이미지 파일 인식을 위해 자원 폴더 위치 설정 (아래 코드 참조)2.3.pub get 버튼을 클릭하여 설정 적용 3.1.나머지는 아래 코드처럼 main을 작성import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mat..

Flutter 2025.07.25

dart 컬렉션

List는 데이터의 중복이 가능하고 순서가 있는 자료를 담는 컬렉션입니다자료는 순차적으로 index(번호)를 생성하여 쌓이게 되는데 Dart의 경우 타입 추론을 제공하여 var변수로도 선언할수 있다.void index() { List nums = [1,2,3,4]; print(nums[0]); print(nums[1]); print(nums[2]); print(nums[3]);}이게 기본적인 List이고 List nums = [1,2,3,4]; 부분을 var nums = [1,2,3,4]; 로 타입추론 형식으로 바꿀수 있다. 다음으로는 Map이다.Map은 키(key)와 값(value)의 쌍으로 이루어진 컬렉션이다. Map은 키(key)로 값(value)을 찾아낸다.void map() { Map..

Flutter 2025.07.24