์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

[์ดˆ์ค‘๊ธ‰] Flutter Todo ์•ฑ - FlutterBloc

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋ชฐ๋ž๋˜ ์ง€์‹์„ ํ•˜๋‚˜๋ผ๋„ ์ฑ™๊ฒจ์„œ ์–ด์ œ์˜ "๋‚˜" ๋ณด๋‹ค ์„ฑ์žฅํ•œ Flutter ์•ฑ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.

29๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ํด๋ฆฐ ์•„ํ‚คํ…์ฒ˜ (๊ฐ„์†Œํ™”)

  • DI ์ ์šฉ

  • FlutterBloc ์ƒํƒœ๊ด€๋ฆฌ

  • Custom UI

Flutter๋กœ Todo ์•ฑ ๋งŒ๋“ค๊ธฐ,
๋ผ์ด๋ธŒ ์ฝ”๋”ฉ๊ณผ ํ•จ๊ป˜ํ•ด๋ณผ๊นŒ์š”? ๐Ÿ’ป

๐Ÿ“ข ์ˆ˜๊ฐ• ์ „ ํ™•์ธํ•ด์ฃผ์„ธ์š”!

  • ๋ณธ ๊ฐ•์˜์—์„œ๋Š” ๊ธฐ์ดˆ ์ด๋ก ์— ๋Œ€ํ•œ ์„ค๋ช…์€ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  • ๊ฐ•์˜์—์„œ ์‚ฌ์šฉํ•œ ์†Œ์Šค ์ฝ”๋“œ๋Š” ์ œ๊ณตํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์‹ค๋ ฅํ–ฅ์ƒ์„ ์œ„ํ•ด ์ง์ ‘ ์ž‘์„ฑํ•ด๋ณด๊ณ  ๋ฐ˜๋ณต ํ•™์Šต ํ•ด์ฃผ์„ธ์š”.

์•ฑ์„ ๋”ฐ๋ผ ๋งŒ๋“ค๋ฉด์„œ ๋ฐฐ์šฐ๋Š” Flutter ๐Ÿš€

๊ฐ•์˜๋ฅผ ํ†ตํ•ด iOS ๊ธฐ๋ณธ ๋ฉ”๋ชจ ์•ฑ์„ ์ฐธ๊ณ ํ•œ Todo ์•ฑ์„ ๋งŒ๋“ค์–ด๋ด์š”. ๋ณธ ๊ฐ•์˜๋Š” ํ”„๋กœ์ ํŠธ ์ค€๋น„๋ถ€ํ„ฐ ๋งˆ๋ฌด๋ฆฌ ๊ณผ์ •๊นŒ์ง€ Live ์ฝ”๋”ฉ ํ˜•์‹์œผ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. ๊ธฐ์ดˆ ์ด๋ก ์— ๋Œ€ํ•œ ์„ค๋ช…์€ ๊ฑฐ์˜ ํ•˜์ง€ ์•Š๊ณ  ์žˆ์œผ๋ฉฐ, ๋ถ€์กฑํ•œ ์„ค๋ช…์€ ์ˆ˜์—… ๋…ธํŠธ์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์–ด์š”! ํ”„๋กœ์ ํŠธ๋ฅผ ํ•จ๊ป˜ ํ•˜๋ฉด์„œ ํด๋ฆฐ ์•„ํ‚คํ…์ฒ˜, DI, BLoC ์ƒํƒœ ๊ด€๋ฆฌ, Custom UI ๋“ฑ์„ ์ตํ˜€๋ณด์„ธ์š”.

pubspec.yaml

ํ”„๋กœ์ ํŠธ์— ์‚ฌ์šฉํ•œ
๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ˆ์š”!

๋ฒ„์ „์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ์œผ๋‹ˆ
์บ๋Ÿฟ(^)์€ ์ œ๊ฑฐํ–ˆ์–ด์š”!

  • environment:
    • sdk: '>=2.17.0 < 3.0.0'
  • dependencies:
    • freezed_annotation: 2.2.0
    • flutter_bloc: 8.1.1
    • get_it: 7.2.0
    • hive: 2.2.3
    • hive_flutter: 1.1.0
    • intl: 0.17.0
  • dev_dependencies:
    • build_runner: 2.3.2
    • freezed: 2.3.0
    • hive_generator: 2.0.0

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์›Œ์š” ๐Ÿ“–

Step 1.
ํ”„๋กœ์ ํŠธ ์ค€๋น„

3๊ฐ€์ง€์˜ ์ค€๋น„ ๊ณผ์ •์ด ๋‹ด๊ฒจ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ ์ž‘์—…
  • ํ™”๋ฉด ์ „ํ™˜์„ ์œ„ํ•œ ๋ผ์šฐํŠธ ์ค€๋น„
  • DI(Dependency Injection) ์ค€๋น„

Step 2.
๊ธฐ๋ณธ UI ์ž‘์—…

์•ฑ์—์„œ ์‚ฌ์šฉํ•  UI ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • ๊ณตํ†ต ํ…Œ๋งˆ
  • ๊ณตํ†ต ๋ฒ„ํŠผ
  • ๊ณตํ†ต ํ•˜๋‹จ ๋‚ด๋น„๊ฒŒ์ด์…˜ ๋ฐ”
  • ๊ณตํ†ต ๋‹ค์ด์–ผ๋กœ๊ทธ
  • ํด๋” ํƒ€์ผ
  • ํด๋” ์ž…๋ ฅ ๋‹ค์ด์–ผ๋กœ๊ทธ
  • ๋ฉ”๋ชจ ํƒ€์ผ

Step 3.
๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง

Freezed ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • Freezed ํŒจํ‚ค์ง€ ์ถ”๊ฐ€
  • ํด๋” ๋ชจ๋ธ ์ƒ์„ฑ
  • ๋ฉ”๋ชจ ๋ชจ๋ธ ์ƒ์„ฑ

Step 4.
DB ์ž‘์—…

Hive ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ DB ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • Hive ํŒจํ‚ค์ง€ ์ถ”๊ฐ€
  • ํด๋” ๋ชจ๋ธ์— Hive ์ ์šฉ
  • ๋ฉ”๋ชจ ๋ชจ๋ธ์— Hive ์ ์šฉ
  • HiveDB > CRUD ์ž‘์—…
  • LocalDB ์ถ”์ƒํ™” ํด๋ž˜์Šค ์ž‘์—…
  • LocalDB > ์‹ฑ๊ธ€ํ†ค ๋“ฑ๋ก

Step 5.
ํด๋” ํ™”๋ฉด ์ž‘์—…
๋ฉ”๋ชจ ํ™”๋ฉด ์ž‘์—…
๋ฉ”๋ชจ ์ถ”๊ฐ€/์ˆ˜์ • ํ™”๋ฉด ์ž‘์—…

ํ™”๋ฉด ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

  • Step 2์—์„œ ์ž‘์—…ํ•œ UI ๊ธฐ๋ฐ˜์œผ๋กœ Screen ์ž‘์—…
  • Step 3, Step 4์—์„œ ์ž‘์—…ํ•œ ๋ชจ๋ธ๊ณผ DB ๊ธฐ๋ฐ˜์œผ๋กœ Repository ์ž‘์—…
  • Repository > ์‹ฑ๊ธ€ํ†ค ๋“ฑ๋ก
  • ๋ฐ์ดํ„ฐ์™€ ํ™”๋ฉด ์—ฐ๋™์„ ์œ„ํ•œ FlutterBloc(Cubit) ์ž‘์—…
  • LocalDB > Repository > FlutterBloc(Cubit) > Screen 

Q&A ๐Ÿ’ฌ

Q. ํ˜„์—…์— ๋„์›€ ๋˜๋‚˜์š”?

์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐ„๋‹ค๋ฉด ์ถฉ๋ถ„ํžˆ ํ˜„์—…์— ๋„์›€ ๋˜๊ณ  ๋ฐ”๋กœ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Q. ์–ด๋А ์ •๋„ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

์˜ˆ์ œ๊ฐ€ 1๊ฐœ์ธ ๋งŒํผ ์„น์…˜๋งˆ๋‹ค ๋ช…ํ™•ํ•˜๊ฒŒ ์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐ„๋‹ค๋ฉด ์ถฉ๋ถ„ํžˆ ๋งŽ์€ ์„ฑ์žฅ์„ ํ•˜์‹ค ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ๊ฐ•์˜์— ๋‚˜์™€ ์žˆ๋Š” ์ฝ”๋“œ๊ฐ€ ์ •๋‹ต์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ์ง  ์ฝ”๋“œ๋ฅผ ์ƒˆ๋กœ์šด ๋ฐฉ์‹์œผ๋กœ ๋‹ค์‹œ ์ž‘์„ฑํ•ด๋ณด๋Š” ๊ฒƒ๋„ ์„ฑ์žฅ์— ํฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

Q. ๋‹ค๋ฅธ ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ‚ค์ง€๋Š” ์‚ฌ์šฉ ์•ˆ ํ•˜์‹œ๋‚˜์š”?

Provider, GetX๋ฅผ ์‚ฌ์šฉํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ๊ฒฐ๋ก ์€, ์ƒํƒœ ๊ด€๋ฆฌ ๊ฐœ๋…์— ๋Œ€ํ•ด ์ดํ•ด๋งŒ ํ•˜์…จ๋‹ค๋ฉด ๋ฌด์—‡์„ ์‚ฌ์šฉํ•˜๋“ ์ง€ ๊ฐ„์— ๋ณธ์ธ์—๊ฒŒ ์ž˜ ๋งž๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

Q. ๊ฐ•์˜ ๋‚ด์šฉ ์ด์™ธ์˜ ์งˆ๋ฌธ๋„ ๊ฐ€๋Šฅํ•œ๊ฐ€์š”?

๊ฐ•์˜ ๋‚ด์šฉ ์ด์™ธ์˜ ์งˆ๋ฌธ์€ ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ๋Œ€๋ถ€๋ถ„ ๊ฐ•์˜ ๋‚ด์šฉ๊ณผ ๊ด€๋ จ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ˜Š

Q. ๊ฐ•์˜ ์„ค๋ช…์ด ๋งŽ์ด ๋ถ€์กฑํ•˜๋‹ค๊ณ  ๋А๊ปด์ง€๋Š”๋ฐ, ๋‹ค๋ฅธ ์ด์œ ๊ฐ€ ์žˆ๋‚˜์š”?

์ด ๊ฐ•์˜์˜ ํ•ต์‹ฌ์€ ์„ค๋ช…๋ณด๋‹ค๋Š” ์ œ๊ฐ€ ๊ฐœ๋ฐœํ•˜๋Š” ๊ณผ์ •์„ ๊ณต์œ ํ•˜๋Š” ๋ชฉ์ ์ด ํฌ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ•์˜ ์„ค๋ช…์ด ๋ถ€์กฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ์–ป์–ด๊ฐ€์‹ค ์ˆ˜ ์žˆ๋Š” ํฌ์ธํŠธ๊ฐ€ ๋งŽ์ด ์žˆ์„ ๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์‹ ๊ทœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜์‹ค ๋ถ„๋“ค

  • ๋ฐ˜๋ณต ํ•™์Šต์„ ํ†ตํ•ด ์„ฑ์žฅํ•˜์‹ค ๋ถ„๋“ค

  • ํ•˜๋‚˜๋ผ๋„ ์–ป์–ด๊ฐ€๊ฒ ๋‹ค๋Š” ๋งˆ์ธ๋“œ๋ฅผ ๊ฐ€์ง„ ๋ถ„๋“ค

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • Dart ์–ธ์–ด

  • Flutter ๊ธฐ๋ณธ ์ง€์‹

  • Flutter ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์ง€์‹

์•ˆ๋…•ํ•˜์„ธ์š”
Gasigogi์ž…๋‹ˆ๋‹ค.

2019๋…„๋ถ€ํ„ฐ Flutter ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•œ Flutter & iOS ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

์ €๋Š” ํŒ€ ๊ตฌ์„ฑ์›์˜ ๊ฐœ๋ฐœ ์„ฑ์žฅ์— ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜

ํŠนํžˆ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์ข‹์•„ํ•ด์š”. ๐Ÿ˜Š

 

์„ธ์ƒ์—๋Š” ๊ฐœ๋ฐœ์„ ์ž˜ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋งŽ์€ ๊ฒƒ ๊ฐ™์•„์š”!

๋ฐ˜๋ฉด์— ์ €๋Š” ์—ฌ์ „ํžˆ ๊ฐœ๋ฐœ ์‹ค๋ ฅ์ด ๋ถ€์กฑํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ €๋Š” ๋ถ€์กฑํ•จ์„ ์ธ์ •ํ•˜๊ณ  ๋ถ€์กฑํ•จ์„ ์ฑ„์šฐ๋ ค๊ณ  ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค.

๋ถ€์กฑํ•จ์€ ์–ด๋””์„œ ์ฑ„์šธ ์ˆ˜ ์žˆ์„๊นŒ์š”?

 

๋ฐ”๋กœ!

์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ "๋™๋ฃŒ" ์ž…๋‹ˆ๋‹ค.

์ €์˜ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์€ ๋™๋ฃŒ๋กœ๋ถ€ํ„ฐ ๋ถ€์กฑํ•จ์„ ์ฑ„์šฐ๋ฉฐ ์„ฑ์žฅํ•˜๊ณ  ์žˆ๊ณ 

๋ฐ˜๋Œ€๋กœ ์ €์˜ ๊ฐ•์ ์„ ๋™๋ฃŒ์—๊ฒŒ ๊ณต์œ ํ•˜์—ฌ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ์ฑ„์›Œ์ฃผ๋ฉฐ "ํ•จ๊ป˜" ์„ฑ์žฅํ•ฉ๋‹ˆ๋‹ค.

 

์ €๋Š” ์ด์ œ ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ "๋™๋ฃŒ" ์ž…๋‹ˆ๋‹ค.

์ €์˜ ์ง€์‹์„ ํ†ตํ•ด ์–ด์ œ์˜ "๋‚˜" ๋ณด๋‹ค ์„ฑ์žฅํ•œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์‹œ๊ธธ ๋ฐ”๋ผ๋ฉฐ

์ € ๋˜ํ•œ ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•œ ํ•œ์ธต ๋” ์„ฑ์žฅํ•œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

45๊ฐœ โˆ™ (5์‹œ๊ฐ„ 28๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!