티스토리

나의 코딩 일지

검색하기

블로그 홈

나의 코딩 일지

whatsthatsound.tistory.com/m

https://github.com/Greenery367

구독자: 4

방명록 방문하기

주요 글 목록

[Flutter] 44. Stateless와 Stateful의 생명주기 [Flutter] 44. Stateless와 Stateful의 생명주기 1. 위젯 생명 주기란?Flutter에서 위젯의 생명 주기는 중요한 개념이다. Stateless 위젯과 Stateful 위젯은 동작 방식이 다르기 때문에, 각ㄱ각의 생명 주기를 이해하는 것이 중요하다. (1) Stateless 위젯의 생명 주기Stateless-Stateful 위젯은 모두 빌드될 때마다 새로 생성된다.Stateless 위젯은 build 메서드가 호출되면서 한 번만 생성되고 끝난다.Stateful 위젯은 내부적으로 State 객체를 생성하고, 생성된 State 객체는 메모리에 유지되면서 생명 주기를 가진다.한 번 생성된 State는 재사용되며, 필요할 때만 build 메서드가 다시 호출되어 업데이트 된다.(2) Stat.. 공감수 1 댓글수 1 2024. 11. 14.
[Flutter] 43. GestureDetector란? [Flutter] 43. GestureDetector란? 1. GestureDetector의 개념GestureDetector는 사용자가 화면에서 수행하는 다양한 터치 이벤트를 감지하고, 처리하는 기본적인 위젯이다.GestureDetector는 화면에 표시되지 않으며, child로 지정된 위젯에 사용자 이벤트가 발생할 때 이벤트를 처리할 수 있다.이 위젯은 다양한 사용자 이벤트에 대한 콜백 함수들로 구성되어 있다. 2. 시나리오 코드import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override .. 공감수 1 댓글수 1 2024. 11. 14.
[Flutter] 42. Provider 라이브러리 [Flutter] 42. Provider 라이브러리 1. Provider 라이브러리 설치하기https://pub.dev/packages/provider provider | Flutter packageA wrapper around InheritedWidget to make them easier to use and more reusable.pub.dev provider: ^6.1.2 2. 리팩토링(1) View - todo_screen.dartimport 'package:flutter/material.dart';import 'package:mvvm_project_v01/start_04/view_models/todo_view_model.dart';import 'package:provider/provid.. 공감수 2 댓글수 1 2024. 11. 13.
[Flutter] 41. ChangeNotifier란? [Flutter] 41. ChangeNotifier란? *ChangeNotifier는 Flutter에서 상태 변화가 있을 때, UI에 자동으로 알림을 주기 위한 클래스이다.*MVVM 패턴에서 ViewModel을 통해 UI와 데이터를 연결하는 데 매우 유용하다. 시나리오 코드(1) View-model에서 ChangeNotifier 상속 처리// ChangeNotifier를 상속한다.class TodoViewModel extends ChangeNotifier // 할 일을 추가하는 기능void addTodo(String title){ final newTodo = Todo(id: DateTime.now().toString(), title: title); todos.add(newTodo); // 상태 .. 공감수 1 댓글수 1 2024. 11. 13.
[Flutter] 40. MVVM 구조란? [Flutter] 40. MVVM 구조란? 1. MVVM 패턴의 정의MVVM 패턴은 애플리케이션을 세 역할로 나눠, 유지 보수성과 재사용성을 높이는 디자인 패턴이다.UI 업데이트와 상태관리는 플러터에서 필수적인 부분! -> MVVM 패턴을 사용해 코드 구조를 효율적으로 관리할 수 있다.*MVVM 구조 + 클린 아키텍처 : 코드에 대한 기본적인 이해가 없다면 어렵다. 2. MVVM 패턴의 구성Model: 애플리케이션의 데이터 구조와 비즈니스 로직을 담당한다. 데이터를 정의하거나 데이터를 처리하는 로직이 포함된다.View: 사용자 인터페이스를 담당한다. Flutter에서는 화면에 표시되는 위젯들이 View 역할을 하고, ViewModel을 통해 화면에 데이터를 받아 표시한다.ViewModel: 비즈니스 로.. 공감수 1 댓글수 1 2024. 11. 13.
[Flutter] 39. 모노리스 구조의 개념과 특징 [Flutter] 39. 모노리스 구조의 개념과 특징 1. 모노리스 구조란?하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 모노리식 구조(Monolithic Architecture) 즉 모노리스 구조(Monolith)라고 부른다.(1) UI와 데이터 로직이 한 곳에 존재한다.(2) 구조가 간단하다. 작은 규모의 앱이나 간단한 기능을 가진 앱에 적합한 구조! 2. 시나리오 코드(1) 화면에 input form 띄우기import 'package:flutter/material.dart';void main() => runApp(TodoApp());class TodoApp extends StatelessWidget { const TodoApp({super.key}); @o.. 공감수 2 댓글수 1 2024. 11. 13.
[Flutter] 38. dio 라이브러리를 사용한 HTTP통신 [Flutter] 38. dio 라이브러리를 사용한 HTTP통신 1. pub.dev - dio 라이브러리 사용하기https://pub.dev/packages/dio dio | Dart packageA powerful HTTP networking package, supports Interceptors, Aborting and canceling a request, Custom adapters, Transformers, etc.pub.dev dio: ^5.7.0 2. JSONPlaceHolder를 사용한 HTTP 통신 *JSONPlaceholderhttps://jsonplaceholder.typicode.com/todos *async-await (동기적 통신)*_JsonMap:import 'package.. 공감수 0 댓글수 0 2024. 11. 12.
[Flutter] 37. TabBar 위젯이란? [Flutter] 37. TabBar 위젯이란? 1. TabBar 위젯에 대해(1) TabBar와 TabBarView 개념 (2) TabController (3) 위젯 생명주기 2. 시나리오 코드import 'package:flutter/material.dart';import 'package:class_v04/main.dart';void main(){ runApp(MyApp());}class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState();}// 부모 클래스의 상태를 접근 수정 등 역할 수정// SingleTickerProviderStateMixin - 애니.. 공감수 0 댓글수 0 2024. 11. 12.
[Flutter] 36. BottomSheet 위젯이란? [Flutter] 36. BottomSheet 위젯이란? 1. BottomSheet 위젯이란?BottomSheet 위젯이란 화면 아래쪽에서 올라오는 다이얼로그를 의미한다.,showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오게 보여준다. 2. 시나리오 코드 (1) 기본import 'package:flutter/material.dart';void main() { runApp(BottomSheetApp());}class BottomSheetApp extends StatelessWidget { const BottomSheetApp({super.key}); @override Widget build(BuildContext.. 공감수 0 댓글수 0 2024. 11. 12.
[Flutter] 34. Form 따라 만들어보기 [Flutter] 34. Form 따라 만들어보기 (1) IconButton 만들기import 'package:flutter/material.dart';void main() { runApp(FeedbackFormApp());}// 한 파일안에 여러개의 클래스를 만들 수 있다.class FeedbackFormApp extends StatelessWidget { const FeedbackFormApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: t.. 공감수 0 댓글수 0 2024. 11. 8.
[Flutter] 33. Form 위젯 [Flutter] 33. Form 위젯 시나리오 코드 1. 기본 코드 - 이름, 이메일, 비밀번호 폼 작성하기import 'package:flutter/material.dart';void main(){ runApp(MyApp8());}class MyApp8 extends StatefulWidget { const MyApp8({super.key}); @override State createState() => _MyApp8State();}class _MyApp8State extends State { // Form 위젯 만들어보기 final _formkey = GlobalKey(); String _name = ''; String _email = ''; String _password =.. 공감수 0 댓글수 0 2024. 11. 8.
[Flutter] 32. 플러터의 기본 위젯들 [Flutter] 32. 플러터의 기본 위젯들 시나리오 코드 (1) 체크 박스import 'package:flutter/material.dart';void main(){ runApp(MyApp7());}class MyApp7 extends StatefulWidget { const MyApp7({super.key}); @override State createState() => _MyApp7State(); } class _MyApp7State extends State{ // bool 데이터 타입과 bool? 데이터 타입은 다르다. // 옵셔녈 변수(?) = null을 허용한다. bool? _checkBoxValue = false; String? _radioValue = 'Option 1.. 공감수 3 댓글수 1 2024. 11. 7.
[Flutter] 31. setState 메서드란? [Flutter] 31. setState 메서드란? 1. setStatus 메서드?StatefulWidget시나리오 코드 import 'package:flutter/material.dart';void main(){ runApp(MyApp6());}class MyApp6 extends StatefulWidget { const MyApp6({super.key}); @override State createState() => _MyAppState();}class _MyAppState extends State{ // 멤버 변수 // 언더바(_)를 붙이면 private 변수가 된다. int _count = 0; int get count => _count;@override void initState(.. 공감수 0 댓글수 0 2024. 11. 7.
[Flutter] 30. StatefulWidget과 StatelessWidget [Flutter] 30. StatefulWidget과 StatelessWidget 1. StatefulWidget과 StatelessWidget은 뭘까?StatefulWidget:StatelessWidgetvoid main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( // 여기에 위젯 설정 추가 ); }} class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); .. 공감수 0 댓글수 0 2024. 11. 7.
[Flutter] 29. 로그인 화면 만들어보기 [Flutter] 29. 로그인 화면 만들어보기 import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { MyApp({super.key}); // TextEditingController로 TextField의 controller에 넣을 객체를 선언 final TextEditingController _emailController = TextEditingController(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: fa.. 공감수 0 댓글수 0 2024. 11. 7.
[Flutter] 28. 구글 내장 아이콘과 Material 3 [Flutter] 28. 구글 내장 아이콘과 Material 3 1. 구글 내장 아이콘 사용하기구글 폰츠 - [Icons]에서 사용할 아이콘들을 검색해 찾을 수 있다. 2. 아이콘의 스타일outlined: 윤곽선 스타일rounded: 둥근 스타일sharp: 직선 스타일 3. MaterialApp color theme과 Material 3 색상useMaterial3을 사용하면 Material 라이브러리의 최신 버전 사용 가능useMaterial3과 seedColor, Theme.of.colorScheme를 사용하면 Material3 디자인 가이드에 따른 색을 쓸 수 있다. 4. 시나리오 코드 (1) ColorScheme을 사용해 색상 지정하기import 'package:flutter/material... 공감수 0 댓글수 0 2024. 11. 7.
[Flutter] 27. 스크롤 바 생성과 폰트 등록, 이미지 사용 [Flutter] 27. 스크롤 바 생성과 폰트 등록, 이미지 사용 1. SingleChildScrollView 위젯이란?(1) SingleChildScrollView 위젯은 스크롤을 제공하기 위해 사용되는 위젯이다.(2) 수직/수평 스크롤을 지정하고자 할 경우, scrollDirection 속성값을 설정할 수 있다.scrollDirection: Axis.vertical (수직)scrollDirection: Axis.horizontal (수평) 2. asset이란?(1) asset은 앱 구성에 필요한 리소스 파일들을 의미한다. 아이콘, 이미지, JSON 파일, 폰트 파일등이 있다.(2) 이런 리소스는 앱 빌드 시 내부에 포함되어야 하고, 이를 위해 pubspec.yaml 파일에 등록이 필요함! *Text.. 공감수 0 댓글수 0 2024. 11. 7.
[Flutter] 26. 이미지 삽입하기 [Flutter] 26. 이미지 삽입하기 오늘은 Flutter에서 이미지를 삽입하는 방법에 대해 알아보고자 한다. 우선 삽입할 이미지를 준비한다. 그리고 프로젝트 안에 [assets]-[images]라는 폴더를 만들어, [images] 폴더 안에 이미지 파일을 저장한다. [pubspec.yaml] 파일 안에 아래와 같이 코드를 작성한다. 내가 사용할 이미지의 경로와 이름을 적는 식이다. 작성한 뒤에는 좌측 상단의 [pub gets]를 누른다. 아래와 같이 코드를 작성해주면, 성공적으로 이미지가 삽입된 것을 확인할 수 있다. 공감수 1 댓글수 0 2024. 11. 6.
[Flutter] 25. Stack, Positioned, Align, Expanded 위젯 [Flutter] 25. Stack, Positioned, Align, Expanded 위젯 1. Stack 위젯Row 위젯은 내부 위젯을 수평으로 나열하는 위젯이다.Column 위젯은 내부 위젯을 수직으로 나열하는 위젯이다.Stack위젯은 내부 위젯을 겹쳐서 나열하는 위젯이다. 2. Positioned 위젯과 Align 위젯자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯이다.특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만, Positioned 위젯은 Stack 위젯 내부에서만 사용할 수 있지만 Align위젯은 개별적으로도 사용 가능하다.Align 위젯에서 자식 위젯의 위치는 alignment 속성으로 설정할 수 있다. 3. Expanded 위젯위젯 크기를 수치.. 공감수 0 댓글수 0 2024. 11. 6.
[Flutter] 24. 쉽고 빠르게 플러터 Icon 찾기 - FlutterIcon [Flutter] 24. 쉽고 빠르게 플러터 Icon 찾기 - FlutterIcon 아래의 사이트에서 Flutter에서 쓰이는 아이콘을 쉽고 간단하게 찾을 수 있다. https://www.fluttericon.com/ FlutterIcon - Flutter custom icons generatorThis site will not work if cookies are completely disabled. {"assets_hash":"e63afe94764170521b88e195c1026df9","page_data":{},"locale":"en-US","layout":"fontello.layout"}www.fluttericon.com 아이콘을 선택한 뒤, [Names]를 클릭하면 해당 아이콘의 이름을 알 수 .. 공감수 0 댓글수 0 2024. 11. 6.
[Flutter] 23. 디자이너스 앱 레퍼런스를 보며 구현해보기 - 쿠팡 이츠 [Flutter] 23. 디자이너스 앱 레퍼런스를 보며 구현해보기 - 쿠팡 이츠https://designus.io/reference/service/15 레퍼런스 (쿠팡이츠) | 디자이너스세상의 모든 디자이너들을 위한 공간, 디자이너스(Designus)designus.io import 'package:flutter/material.dart';void main() { runApp(MyCoupangEats());}class MyCoupangEats extends StatelessWidget { const MyCoupangEats({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShow.. 공감수 8 댓글수 4 2024. 11. 6.
[Flutter] 22. 디자이너스 페이지를 보며 시안 따라하기 [Flutter] 22. 디자이너스 페이지를 보며 시안 따라하기 https://designus.io/ 디자이너스세상의 모든 디자이너들을 위한 공간, 디자이너스(Designus)designus.io [앱 레퍼런스] 선택 시, 현존하는 앱들의 레퍼런스를 보고 참고할 수 있다.https://designus.io/reference 레퍼런스 | 디자이너스모바일 UX UI 디자인 레퍼런스, 디자인 할 때 유용한 모든 앱 화면 모음을 지금 디자이너스(Designus)에서 확인하고 참고해보세요. 디자인 패턴, 디자인 시스템, 컴포넌트, 산업 별로 손쉽게 모아 볼designus.io 공감수 0 댓글수 0 2024. 11. 6.
[Flutter] 21. Scaffold 위젯과 사용법, 주요 Property [Flutter] 21. Scaffold 위젯과 사용법, 주요 Property 1. MaterialApp의 주요 property와 사용법theme: 앱의 전체 테마, 색상 구성 등이 포함homeL 앱이 시작할 때 보여질 기본 경로 혹은 위젯 2. Scaffold 위젯 사용법과 주요 propertyMaterialApp 내에서 머테리얼 디자인의 기본 레이아웃 구조를 제공하는 위젯이다.*주요 PropertyappBar: 화면의 상단에 있는 앱 바body: 화면의 기본 내용, 일반적으로 위젯의 목록floatingActionButton: 인터페이스에 위치한 추가 버튼drawer: Scaffold 위젯의 사이트 메뉴persistentFooterButtons: 화면 하단에 표시되는 버튼의 행bottomNaviga.. 공감수 0 댓글수 0 2024. 11. 6.
[Flutter] 20. 기초적인 Flutter 화면을 구성하는 패턴 [Flutter] 20. 기초적인 Flutter 화면을 구성하는 패턴 1. 기초적인 Flutter 화면 구성 패턴'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme같은 속성 설정home: 속성을 주 페이지로 정의Scaffold: 앱의 시각적 레이아웃에 대한 기본 구조를 제공한다. (ex: appBar, body) *머터리얼 디자인에서 수많은 오픈소스 위젯을 받아 사용할 수 있다.https://m3.material.io/components/chips/specs Chips – Material Design 3Chips help people enter information, make selections, filter content,.. 공감수 0 댓글수 0 2024. 11. 6.
[Flutter] 19. 위젯 트리, 엘리먼트 트리, 렌더 트리란? [Flutter] 19. 위젯 트리, 엘리먼트 트리, 렌더 트리란? Flutter에는 UI가 화면에 렌더링되는 과정에는 위젯 트리, 엘리먼트 트리, 렌더 트리라는 세 가지 주요 개념이 있다. 1. 위젯 트리 (Widget Tree)정의: 위젯 트리는 플러터 애플리케이션의 구조와 모양을 정의하는 계층적 트리이다.역할: 앱 화면에 표시할 UI 구성 요소를 정의한다. 텍스트, 버튼, 컬럼 같은 위젯을 조합해 화면 구성을 정의하는 코드이다.특징: 위젯은 불변하며, 사용자가 화면을 변경하면 플러터는 새로운 위젯 트리를 생성한다. 2. 엘리먼트 트리 (Element Tree)정의: 엘리먼트 트리는 위젯 트리를 바탕으로 생성된 트리로, 위젯 인스턴스와 실제 화면 사이를 연결하는 역할을 한다.역할: 위젯을 구체화해 상.. 공감수 0 댓글수 0 2024. 11. 6.
[Flutter] 18. 컨테이너 배치하기 연습 문제 [Flutter] 18. 컨테이너 배치하기 연습 문제 -컨테이너들을 배치할 때, HTML에서 사용했던 태그, display: flex 개념과 flex-direction: column, justify-content/align-items 개념을 숙지하고 응용하면 쉽다import 'package:flutter/material.dart';void main(){ runApp(Test1());}class Test1 extends StatelessWidget { const Test1({super.key}); @override Widget build(BuildContext context) { return Container( color: Colors.white, child: Column.. 공감수 0 댓글수 0 2024. 11. 5.
[Flutter] 17. 플러터 기초 다지기 - (5) Column과 Row 위젯 [Flutter] 17. 플러터 기초 다지기 - (5) Column과 Row 위젯*const와 final의 차이constfinal컴파일 시점에 초기화런타임 시점에 초기화-const는 기계어로 바뀌어질 때 초기화된다. const를 사용하면 성능을 높일 수 있다.-final은 통신을 통해 초기화 될 때, 한 번 초기화된다. *시나리오 코드 (1) Placeholderimport 'package:flutter/material.dart';void main(){ runApp(MyHome());}// 상태 여부 위젯 선정class MyHome extends StatelessWidget{ // Const 생성자 const MyHome({super.key}); // build 메서드는 화면에 그림을 그려주는 .. 공감수 0 댓글수 0 2024. 11. 5.
[Flutter] 16. 플러터 기본기 다지기 - (4) Basic Widget 살펴 보기 [Flutter] 16. 플러터 기본기 다지기 - (4) Basic Widget 살펴 보기 *Flutter에 공식적인 용어가 정립되어 있지 않다! 1. layout 위젯visible 위젯을 원하는 위치에 배치하기 위해 layout 위젯을 사용한다.간단하고 기본적인 layout 위젯은 Container와 Center 위젯 2. visible 위젯간단하고 기본적인 visible 위젯은 아래와 같다. (1) Text 위젯Text('Hello World') (2) Image 위젯Image.asset('images/lake.jpg') (3) Icon 위젯Icon(Icons.home) 3. Visible 위젯을 Layout 위젯 안에 넣음모든 Layout 위젯은 하나의 자식을 가질 수 있는 위젯과, 여러 자.. 공감수 0 댓글수 0 2024. 11. 5.
[Flutter] 15. 플러터 기본기 다지기 (3) - 플러터 코드의 이해 [Flutter] 15. 플러터 기본기 다지기 (3) - 플러터 코드의 이해 1. 패키지와 임포트패키지: Flutter와 커뮤니티에서 제공하는 재사용 가능한 코드 모듈import 문으로 필요한 패키지와 위젯을 추가할 수 있다.패키지에는 Dart 기본 패키지, Flutter 제공 패키지, 외부-사용자 정의 패키지 등의 종류가 있다. 2. main()과 runApp() 함수Flutter 앱 시작 시, main() 함수 내의 runApp() 함수가 호출되어 앱이 실행된다. 3. analysis_options.yml코드 가이드를 비활성화 시키고 싶다면, 아래 코드를 analysis_options.yaml에 추가하면 된다.rules: prefer_typing_uninitialized_variables :.. 공감수 0 댓글수 0 2024. 11. 5.
[Flutter] 14. 플러터 기본기 다지기 (2) - 나만의 플러터 위젯 분류 [Flutter] 14. 플러터 기본기 다지기 (2) - 나만의 플러터 위젯 분류 1. 플러터와 위젯-Flutter는 풍부한 UI 위젯을 제공한다. -자세한 정보는 Flutter 공식 문서에서 확인할 수 있다. https://docs.flutter.dev/ui/widgets Widget catalogA catalog of some of Flutter's rich set of widgets.docs.flutter.dev 2. 플러터 위젯의 종류 (1) 플랫폼 별 위젯 대부분의 경우 Material 위젯을 사용한다.플랫폼별 특성을 살리고 싶다면, 각각의 위젯을 적절히 활용할 수 있다.Material(Android) 위젯Cupertino(iOS) 위젯Google의 Material Design 가이드라인을 .. 공감수 2 댓글수 1 2024. 11. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.