๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก๐Ÿ“ฑFlutter (13)

ruriruriya

[Flutter] ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ Provider ํŒจํ‚ค์ง€

Provider๋Š” Flutter์—์„œ ๊ณต์‹์ ์œผ๋กœ ์ถ”์ฒœํ•˜๋Š” Flutter ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ํŒจํ‚ค์ง€์ด๋‹ค. 1. Provider๋ž€?Provider๋Š” Flutter์˜ InheritedWidget์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋„๋ก ๋•๋Š” ํŒจํ‚ค์ง€๋กœ ์—ฌ๋Ÿฌ ์œ„์ ฏ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ , ์ƒํƒœ ๋ณ€๊ฒฝ์„ ๊ฐ์ง€ํ•˜์—ฌ UI๋ฅผ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธํ•  ์ˆ˜ ์žˆ๋‹ค.โœ” Provider๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ข‹์€ ์ ๋ฆฌ์†Œ์Šค ํ• ๋‹น ๋ฐ ํ•ด์ œ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ„๋”˜ํ•ด์ง→ ๋ถˆํ•„์š”ํ•œ ๋ฆฌ์†Œ์Šค ์‚ฌ์šฉ์„ ์ค„์ด๊ณ  ๋ฉ”๋ชจ๋ฆฌ ๋ˆ„์ˆ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Œ.Lazy-loading ์ง€์›→ ํ•„์š”ํ•  ๋•Œ๊นŒ์ง€ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š์•„์„œ ์„ฑ๋Šฅ ์ตœ์ ํ™”๊ฐ€ ๊ฐ€๋Šฅํ•จ.๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ ๊ฐ์†Œ→ ์ƒˆ ํด๋ž˜์Šค๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋งˆ๋‹ค ๋ฐ˜๋ณต๋˜๋Š” ์ฝ”๋“œ๊ฐ€ ์ค„์–ด๋“ฆ.Flutter DevTools์™€ ํ˜ธํ™˜→ DevTools์—์„œ ์•ฑ ์ƒํƒœ๋ฅผ..

[Flutter] ๊ธฐ๋ณธ ์ƒํƒœ ๊ด€๋ฆฌ (State Management)

Flutter์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋Š” UI๊ฐ€ ๋ณ€ํ™”ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์œ ์ง€ํ•˜๊ณ  ๋ฐ˜์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ƒํƒœ ๊ด€๋ฆฌ๊ฐ€ ์ค‘์š”ํ•œ ์ด์œ ๋Š” Flutter์˜ ์„ ์–ธ์  UI ๋ฐฉ์‹ ๋•Œ๋ฌธ์ด๋‹ค. ์ฆ‰, UI๋Š” ์ƒํƒœ(state)์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋˜๋ฏ€๋กœ ์ด๋ฅผ ์–ด๋–ป๊ฒŒ ๋‹ค๋ฃจ๋Š๋ƒ์— ๋”ฐ๋ผ ์•ฑ์˜ ๊ตฌ์กฐ์™€ ์œ ์ง€๋ณด์ˆ˜์„ฑ์ด ๋‹ฌ๋ผ์ง„๋‹ค.์—ฌ๊ธฐ์„œ๋Š” Flutter์˜ ๊ธฐ๋ณธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•œ๋‹ค. ์„œ๋“œํŒŒํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Provider, Riverpod ๋“ฑ)๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  Flutter์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ฐฉ๋ฒ•๋งŒ ๋‹ค๋ฃฌ๋‹ค.1. ์ƒํƒœ(State)๋ž€?Flutter์—์„œ ์ƒํƒœ๋ž€ ์•ฑ์˜ UI๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๋ฐ์ดํ„ฐ์ด๋‹ค. ์ƒํƒœ๋Š” ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค:Ephemeral state (๋‹จ๊ธฐ ์ƒํƒœ): ํŠน์ • ์œ„์ ฏ ๋‚ด์—์„œ๋งŒ ๊ด€๋ฆฌ๋˜๋Š” ์ƒํƒœ (์˜ˆ: TextField ์ž…๋ ฅ๊ฐ’, ๋ฒ„ํŠผ ํด๋ฆญ ์—ฌ๋ถ€ ๋“ฑ)App ..

[Flutter] Flutter ๋ ˆ์ด์•„์›ƒ ์ดํ•ดํ•˜๊ธฐ(Layout)

1. Flutter์—์„œ ๋ ˆ์ด์•„์›ƒ์ด๋ž€?Flutter๋Š” UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์œ„์ ฏ(toolkit)์ด๋ฉฐ, ๋Œ€๋ถ€๋ถ„์˜ ์ž‘์—…์€ ์œ„์ ฏ์„ ์ด์šฉํ•˜์—ฌ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“œ๋Š” ๋ฐ ์ง‘์ค‘๋œ๋‹ค. ๋ชจ๋“  ์š”์†Œ(ํ…์ŠคํŠธ, ์ด๋ฏธ์ง€, ์•„์ด์ฝ˜, ๋ฒ„ํŠผ ๋“ฑ)๋Š” ์œ„์ ฏ์ด๋ฉฐ, ๋ณด์ด์ง€ ์•Š๋Š” ์š”์†Œ์ธ ํ–‰(Row), ์—ด(Column), ๊ทธ๋ฆฌ๋“œ(Grid) ๋“ฑ๋„ ์œ„์ ฏ์ด๋‹ค.์œ„์ ฏ์„ ์กฐํ•ฉํ•˜์—ฌ ๋” ๋ณต์žกํ•œ UI๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด๋Ÿฌํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ชจ๋“  Flutter ๋ ˆ์ด์•„์›ƒ์ด ๊ตฌ์„ฑ๋œ๋‹ค. 2. ๋ ˆ์ด์•„์›ƒ์˜ ํ•ต์‹ฌ ๊ฐœ๋…2.1. ConstraintsFlutter์—์„œ ๋ ˆ์ด์•„์›ƒ์€ ๋ถ€๋ชจ-์ž์‹ ๊ด€๊ณ„๋กœ ์ด๋ฃจ์–ด์ง€๋ฉฐ, ๋ถ€๋ชจ ์œ„์ ฏ์€ ์ž์‹ ์œ„์ ฏ์—๊ฒŒ Constaraints๋ฅผ ์ „๋‹ฌํ•œ๋‹ค.Constaraints์€ ์ตœ์†Œ ๋ฐ ์ตœ๋Œ€ ๋„ˆ๋น„, ์ตœ์†Œ ๋ฐ ์ตœ๋Œ€ ๋†’์ด๋ฅผ ํฌํ•จํ•˜๋Š” 4๊ฐœ์˜ ๊ฐ’์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.์ž์‹ ์œ„์ ฏ์€ ํ•ด๋‹น Con..

[Flutter] ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๋Š” Scaffold ์œ„์ ฏ

ํ”Œ๋Ÿฌํ„ฐ์—์„œ Scaffold ์œ„์ ฏ์€ ์•ฑ์˜ ํ™”๋ฉด ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๋Š” ๊ธฐ๋ณธ์ ์ธ ํ‹€์„ ์ œ๊ณตํ•œ๋‹ค.๋ชจ๋“  ํ”Œ๋Ÿฌํ„ฐ ์•ฑ์˜ ํ™”๋ฉด์€ ๋ณดํ†ต Scaffold ์œ„์ ฏ์œผ๋กœ ์‹œ์ž‘๋œ๋‹ค.Scaffold๋Š” AppBar, body, FloatingActionButton ๋“ฑ์„ ํฌํ•จํ•œํ”Œ๋Ÿฌํ„ฐ์˜ Material Design ๊ฐ€์ด๋“œ๋ผ์ธ์— ๋”ฐ๋ผ ๊ธฐ๋ณธ UI ๊ตฌ์กฐ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.Scaffold๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ๊ธฐ๋ณธ ๋ ˆ์ด์•„์›ƒ์„ ๋น ๋ฅด๊ฒŒ ์„ค๊ณ„ํ•  ์ˆ˜ ์žˆ๊ณ , Material Design ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๊ฐ€ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์— ์ ์šฉ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊น”๋”ํ•˜๊ฒŒ ์ ์šฉ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ , body ์˜์—ญ์— ์›ํ•˜๋Š” ๋ชจ๋“  ์œ„์ ฏ์„ ๋ฐฐ์น˜ํ•˜์—ฌ ๋ณต์žกํ•œ ๋ ˆ์ด์•„์›ƒ ์„ค๊ณ„๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.Scaffold ์ฃผ์š” ์†์„ฑ1. appBarํ™”๋ฉด ์ƒ๋‹จ์— ๋‚˜ํƒ€๋‚˜๋Š” AppBar ์˜์—ญ.์ œ๋ชฉ, ๋ฒ„ํŠผ, ๋ฉ”๋‰ด ๋“ฑ์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋‹ค.Scaff..

[Flutter] build ๋ฉ”์„œ๋“œ

build ๋ฉ”์„œ๋“œ๋Š” Flutter์—์„œ UI๋ฅผ ๊ทธ๋ฆฌ๋Š” ํ•ต์‹ฌ์ ์ธ ์—ญํ• ์„ ํ•œ๋‹ค.Flutter์—์„œ UI๋Š” ์œ„์ ฏ์œผ๋กœ ๊ตฌ์„ฑ๋˜๊ณ , build ๋ฉ”์„œ๋“œ๋Š” ์ด ์œ„์ ฏ๋“ค์ด ํ™”๋ฉด์— ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜๋˜๊ณ  ํ‘œ์‹œ๋  ์ง€ ์ •์˜ํ•œ๋‹ค.build ๋ฉ”์„œ๋“œ ํ˜ธ์ถœ ์‹œ๊ธฐ?1. ์ฒ˜์Œ ์œ„์ ฏ์ด ํ™”๋ฉด์— ์ถ”๊ฐ€๋  ๋•Œ์œ„์ ฏ์ด Flutter ์•ฑ ํŠธ๋ฆฌ์— ์‚ฝ์ž…๋˜๋ฉด, build ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.2. ์œ„์ ฏ์˜ ์˜์กด์„ฑ์ด ๋ณ€๊ฒฝ๋  ๋•Œ์˜ˆ๋ฅผ ๋“ค์–ด, ์œ„์ ฏ์ด ์ฐธ์กฐํ•˜๋Š” InheritedWidget์ด ์—…๋ฐ์ดํŠธ๋˜๋ฉด, ํ•ด๋‹น ์œ„์ ฏ์˜ build ๋ฉ”์„œ๋“œ๊ฐ€ ๋‹ค์‹œ ํ˜ธ์ถœ๋œ๋‹ค.3. ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ(StatefulWidget)์ƒํƒœ๊ฐ€ ๋ณ€ํ•˜๋ฉด build ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋˜์–ด UI๊ฐ€ ์—…๋ฐ์ดํŠธ๋œ๋‹ค. build ๋ฉ”์„œ๋“œ์˜ ํŠน์ง•๋ฐ˜ํ™˜๊ฐ’ํ•ญ์ƒ ๋‹ค๋ฅธ ์œ„์ ฏ์„ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•œ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด, ํ…์ŠคํŠธ๋ฅผ ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ๋ฒ„ํŠผ์„ ์ƒ์„ฑํ•˜๋Š” ์œ„์ ฏ์„ ๋ฐ˜ํ™˜..

[Flutter] ์œ„์ ฏ์— ๋Œ€ํ•ด์„œ(Widget)

ํ”Œ๋Ÿฌํ„ฐ์—์„œ ์œ„์ ฏ(Widget)์ด๋ž€?ํ”Œ๋Ÿฌํ„ฐ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ธฐ๋ณธ ์š”์†Œ์ด๋‹ค.๊ฐ ์œ„์ ฏ์€ ํ…์ŠคํŠธ๋‚˜ ๋ฒ„ํŠผ ๊ฐ™์€ ๋ฌผ๋ฆฌ์  ์š”์†Œ๋ถ€ํ„ฐ ๋ ˆ์ด์•„์›ƒ ํšจ๊ณผ๊นŒ์ง€ ์ธํ„ฐํŽ˜์ด์Šค์˜ ๋ชจ๋“  ์ธก๋ฉด์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ณณ์— ์‚ฌ์šฉ๋œ๋‹ค.์œ„์ ฏ ๊ณ„์ธต ๊ตฌ์กฐ์œ„์ ฏ์€ ๊ตฌ์„ฑ(Composition)์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ํ˜•์„ฑํ•œ๋‹ค.๊ฐ ์œ„์ ฏ์€ ๋ถ€๋ชจ ์œ„์ ฏ ๋‚ด๋ถ€์— ์ค‘์ฒฉ๋˜๋ฉฐ, ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ Context๋ฅผ ์ „๋‹ฌ ๋ฐ›๋Š”๋‹ค.์ด ๊ตฌ์กฐ๋Š” ๋ฃจํŠธ ์œ„์ ฏ๊นŒ์ง€ ์—ฐ๊ฒฐ๋œ๋‹ค.import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(Bui..

[Flutter] ์•ˆ๋“œ๋กœ์ด๋“œ ์‹ค์ œ ํ•ธ๋“œํฐ ์—ฐ๋™ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ธฐ

์–ดํ”Œ์„ ๊ฐœ๋ฐœํ•˜๋‹ค ๋ณด๋ฉด ํ”๋“ค๊ธฐ ๋“ฑ๋“ฑ ๋ชจ์…˜์ด ํ•„์š”ํ•  ๋•Œ๊ฐ€ ์žˆ๋Š”๋ฐ ์• ๋ฎฌ๋ ˆ์ดํ„ฐ๋กœ๋Š” ๊ทธ๋Ÿฐ ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์—†๋‹ค.๊ทธ๋ž˜์„œ ์‹ค์ œ ์•ˆ๋“œ๋กœ์ด๋“œ ์Šค๋งˆํŠธํฐ ์—ฐ๊ฒฐํ•ด์„œ ํ…Œ์ŠคํŠธํ•ด๋ณด์ž.1. ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ๋กœ ๋ณ€๊ฒฝXcode๋ฅผ ์‹คํ–‰ํ•ด์„œ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ์„ ์‹œ์ž‘ํ•œ๋‹ค.[์„ค์ •] - [ํœด๋Œ€์ „ํ™” ์ •๋ณด] - [์†Œํ”„ํŠธ์›จ์–ด ์ •๋ณด]๋กœ ์ ‘์†ํ•ด์„œ๋นŒ๋“œ ๋ฒˆํ˜ธ๋ฅผ ์—ฐ๋‹ฌ์•„์„œ ํ„ฐ์น˜ํ•œ๋‹ค.'์•„๋ž˜์™€ ๊ฐ™์ด ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ๋ฅผ ์ผฐ์Šต๋‹ˆ๋‹ค' ๋ผ๋Š” ๋ฉ”์„ธ์ง€๊ฐ€ ๋‚˜์˜ฌ ๋•Œ ๊นŒ์ง€๊ทธ๋ ‡๊ฒŒ ๋‹ค์‹œ ์„ค์ •์œผ๋กœ ๋‚˜์˜ค๋ฉด [๊ฐœ๋ฐœ์ž ์˜ต์…˜] ๋ฉ”๋‰ด๊ฐ€ ์ƒ๊ธด ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. 2. ์ปดํ“จํ„ฐ์— USB  ์—ฐ๊ฒฐUSB ๋””๋ฒ„๊น…์„ ํ™œ์„ฑํ™” ํ•˜๋ฉดUSB ๋””๋ฒ„๊น…์„ ํ—ˆ์šฉํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ๋ผ๋Š” ์ฐฝ์ด ๋‚˜์˜ค๊ณ 'ํ—ˆ์šฉ'์„ ๋ˆŒ๋Ÿฌ์ฃผ๋ฉด ๋œ๋‹ค. USB ์—ฐ๊ฒฐ์„ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฉ”์„ธ์ง€๊ฐ€ ๋‚˜์˜ค๋Š”๋ฐ์ด ์ปดํ“จํ„ฐ์—์„œ ํ•ญ์ƒ ํ—ˆ์šฉ์„ ์ฒดํฌํ•˜๊ณ  'ํ—ˆ์šฉ' ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ๋‹ค. 3...

[Dart] async์™€ await๋กœ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

Dart ์–ธ์–ด์—์„œ async์™€ await๋Š” ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ํ‚ค์›Œ๋“œ์ด๋‹ค.ํŠนํžˆ ๋„คํŠธ์›Œํฌ ์š”์ฒญ, ํŒŒ์ผ ์ฝ๊ธฐ/์“ฐ๊ธฐ, ํƒ€์ด๋จธ ๋“ฑ์˜ ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.๐Ÿ’ก ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€?- ํ”„๋กœ๊ทธ๋žจ์ด ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋Š” ์ž‘์—… ๋“ฑ์„ ์ˆ˜ํ–‰ํ•  ๋•Œ, ํ•ด๋‹น ์ž‘์—…์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๋‹ค๋ฅธ ์ž‘์—…์ด ๋ฉˆ์ถ”์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๋ฐฉ์‹- Dart์—์„œ๋Š” Future ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ๋น„๋™๊ธฐ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.(Future : ๋น„๋™๊ธฐ ์ž‘์—…์˜ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ์ฒด, ๊ฒฐ๊ณผ๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜, ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์˜ˆ์™ธ๋ฅผ ๋˜์ ธ์ค€๋‹ค.) 1. async์™€ await ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•- async : ํ•จ์ˆ˜์— ๋น„๋™๊ธฐ ์ž‘์—…์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋œปํ•˜๋Š” ํ•จ์ˆ˜๋กœ, ํ•ญ์ƒ Future ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.- await : ๋น„๋™๊ธฐ ์ž‘์—…(Fu..

๐Ÿ“ฑFlutter/Dart 2024. 12. 18. 15:42