TwentyTwentyOne

예제로 배우는 Dart & Flutter 시작하기 ⏹️ 마무리 프로젝트 - 나만의 TODO 앱 만들기지금까지 Dart 문법부터 Flutter 위젯, 화면 전환까지 배웠다면, 이제 직접 간단한 실전 앱을 만들어보며 복습할 시간입니다.이번 글에서는 할 일 관리 앱(To-Do List App) 을 함께 만들어보며 지금까지 배운 기술들을 실제로 적용해봅니다.📌 1. 앱 기능 소개이 프로젝트에서 만들 To-Do 앱은 다음과 같은 기능을 갖습니다:할 일 입력하기할 일 목록 보여주기완료 처리 / 삭제하기화면 간 전환 없이 동작 (단일 화면)📌 2. 프로젝트 기본 설정✅ 새 프로젝트 생성flutter create todo_appcd todo_appcode .✅ lib/main.dart 열기📌 3. 데이터 모델 만..

예제로 배우는 Dart & Flutter 시작하기 ⑩ - 화면 전환과 라우팅 완전 이해하기앱이 여러 개의 화면을 가지게 되면, 페이지 간 이동(= 화면 전환) 기능이 꼭 필요합니다.Flutter에서는 Navigator라는 라우팅 시스템을 통해 손쉽게 화면을 전환할 수 있으며, Named Route, Arguments 전달, 뒤로가기 제어까지 유연하게 구현할 수 있습니다.이번 글에서는 Flutter의 화면 전환 개념을 기초부터 완벽하게 실습하며 마스터해보겠습니다.📌 1. Navigator란?Flutter의 Navigator는 화면(Stack)을 관리하는 라우팅 관리자입니다.push: 새 화면을 스택 위에 올림 (이동)pop: 현재 화면을 스택에서 제거 (뒤로가기)📌 2. 기본 페이지 전환 예제 (pus..

예제로 배우는 Dart & Flutter 시작하기 ⑨ - 기본 위젯(Text, 버튼, 입력폼) 마스터하기Flutter의 강력함은 다양한 위젯을 조합해 어떤 UI도 쉽게 만들 수 있다는 점입니다.이번 글에서는 가장 기본적이고 자주 쓰이는 Text, 버튼, TextField, 아이콘 등 Flutter의 주요 기본 위젯들을 실습을 통해 익혀보겠습니다.📌 1. Text 위젯 – 텍스트 표시하기Text( '안녕하세요, Flutter!', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue, ),)fontSize: 글자 크기fontWeight: 글자 굵기 (bold, normal, w300, …)col..

예제로 배우는 Dart & Flutter 시작하기 ⑧ - Flutter 첫 앱 만들기 (Counter App 실습)이제까지 Dart의 문법을 충실히 익혔다면, 본격적으로 Flutter 앱 개발에 도전할 시간입니다!이번 글에서는 Flutter의 대표 입문 예제인 카운터 앱(Counter App) 을 직접 구현해보며, Flutter의 기본 구조와 위젯 시스템에 익숙해지는 것을 목표로 합니다.📌 1. Flutter란?Flutter는 Google이 만든 크로스 플랫폼 UI 프레임워크로, 하나의 코드베이스로 Android, iOS, 웹, 데스크탑 앱을 동시에 개발할 수 있습니다.모든 것이 위젯(widget) 으로 구성되어 있어 선언형 UI 방식에 익숙해져야 합니다.📌 2. Flutter 프로젝트 생성하기터미널..

Flutter로 To-Do 앱 만들기 (2): 데이터 저장 및 유지 (shared_preferences 활용)이전 글에서는 Flutter에서 기본적인 To-Do 앱을 만들어 할 일을 추가하고 삭제할 수 있도록 했습니다.하지만 현재 앱을 종료하면 데이터가 사라집니다.이번 글에서는 앱을 껐다 켜도 할 일 목록이 유지되도록 로컬 저장소를 활용하는 방법을 배웁니다.✅ 데이터 저장을 위한 shared_preferences 패키지Flutter에서 간단한 로컬 데이터 저장을 할 때는 shared_preferences 패키지가 자주 사용됩니다.이 패키지는 **기본적인 키-값 저장 방식(간단한 JSON)**을 제공하며, 작은 데이터(설정값, 간단한 리스트 등)를 저장하는 데 적합합니다.✅ 1. shared_prefere..

Flutter로 To-Do 앱 만들기 (1): 모바일 앱 개발 첫걸음Flutter는 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있는 Google의 크로스 플랫폼 프레임워크입니다.이번 글은 Flutter 입문자를 위한 실전 프로젝트로, **할 일 목록 앱(To-Do App)**을 직접 만들어보며기본 위젯 사용법, 상태 관리, 리스트 렌더링 등을 익히는 것이 목표입니다.✅ 프로젝트 세팅▶️ 1. Flutter 설치 확인flutter --version설치가 되어 있지 않다면 https://docs.flutter.dev/get-started/install 가이드를 참고해주세요.▶️ 2. 새 프로젝트 생성flutter create todo_appcd todo_appcode .lib/main..

📱 React Native vs Flutter: 어떤 프레임워크를 선택할까?✅ 들어가며모바일 앱 개발을 시작하려는 개발자라면 한 번쯤은 React Native와 Flutter 사이에서 고민해봤을 것입니다.두 프레임워크 모두 크로스 플랫폼 개발을 지원하며, 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발할 수 있게 해줍니다.이번 글에서는 기술 구조, 개발 경험, 퍼포먼스, 커뮤니티, 사용성 등 다양한 관점에서 React Native와 Flutter를 비교해보고,상황에 맞는 선택 가이드를 제공하겠습니다.🔍 1. 기본 개요 비교항목 React Native Flutter출시2015 (Facebook)2018 (Google)언어JavaScript / TypeScriptDart렌더링 방식네이티브 브..

https://fontawesome.com/docs/web/use-with/react-native 1. install npm i --save @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/free-regular-svg-icons cd ios && pod install

https://reactnavigation.org/docs/getting-started/ npm install --save @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack 1. NavigationContainer 로 감싸기 2. createNativeStackNavigator 3. Stack.Navigator + name + component 4.Stack.Navigator + initialRouteName + Stack.Screen 5. options={{ title: '타이틀이름' }} 6. 이동 : {navigation} + onPress={() => na..

첫 stateless 위젯 flutter 에서 위젯은 크게 stateless 와 stateful 로 구별한다. 이외의 위젯도 있지만, 우선 이둘만 알면 충반하다는듯 stateless 위젯은 StatelessWidget 을 상속받아 사용한다. import 'package:flutter/material.dart'; void main() { return runApp(MaterialApp( title: "Hello World", home: Scaffold( appBar: AppBar(title: Text('Widget')), body: _TestStatelessWidget()))); } class _TestStatelessWidget extends StatelessWidget { @override Widget ..