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

[LV3] Jetpack Compose - ๊ทธ๋Ÿด ๋“ฏํ•œ ๋‹ค์ด์–ดํŠธ ์•ฑ ๋งŒ๋“ค๊ธฐ

Jetpack Compose๋กœ ๊ทธ๋Ÿด ๋“ฏํ•œ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค. ์˜ˆ์ œ์—์„œ ์กฐ๊ธˆ ๋ฐœ์ „ํ•ด์„œ API(Firebase)๋ฅผ ์—ฐ๊ฒฐํ•ด์„œ ๋„คํŠธ์›Œํฌ ํ†ต์‹ ๊นŒ์ง€ ํ•œ๋ฒˆ ํ•ด๋ด…๋‹ˆ๋‹ค.

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

Thumbnail

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

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

  • Jetpack Compose UI

  • Jetpack Compose ์• ๋‹ˆ๋ฉ”์ด์…˜

  • ViewModel

๋‹ค์ด์–ดํŠธ ์•ฑ์„ ๋งŒ๋“ค๋ฉด์„œ Jetpack Compose๋ฅผ ์—ฐ์Šตํ•ด๋ณด์•„์š”.

Jetpack Compose๋ฅผ ์ด์šฉํ•ด์„œ ๊ทธ๋Ÿด ๋“ฏํ•œ ๋‹ค์ด์–ดํŠธ ์•ฑ์„ ๋งŒ๋“ค์–ด๋ด์š”

  • ๋ถ€๋ถ„์ ์ธ ์˜ˆ์ œ๊ฐ€ ์•„๋‹Œ ํ•˜๋‚˜์˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ํ•ด๋ด์š”

  • ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ํ™”๋ฉด ์ „ํ™˜์„ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€ ์‚ดํŽด๋ด์š”

์•„๋ž˜์˜ ๊ฒƒ๋“ค์„ ์‹ค์Šตํ•ด๋ด…๋‹ˆ๋‹ค.

ํšŒ์›๊ฐ€์ž…/๋กœ๊ทธ์ธ

ํšŒ์›๊ฐ€์ž… ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์—์„œ ์—๋Ÿฌ์ฒ˜๋ฆฌ๋ฅผ ์–ด๋–ป๊ฒŒ ํ• ์ง€ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”

๋ฐ์ดํ„ฐ๋ฅผ ์‹œ๊ฐํ™”ํ•ด์„œ ๊ทธ๋ž˜ํ”„๋กœ ํ‘œํ˜„ํ•˜๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ†ตํ•ด์„œ ํ™”๋ คํ•œ UI๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ์ฝ๊ณ  ์“ฐ๊ณ  ์‚ญ์ œํ•˜๊ธฐ

๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ณ  ์“ฐ๊ณ  ์‚ญ์ œํ•˜๋ฉด์„œ ํ™”๋ฉด ์ „ํ™˜ ๋ฐ Activity / Compose ํ™”๋ฉด ์ „ํ™˜์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

ํ”„๋กœํ•„ ํ™”๋ฉด ์ˆ˜์ •

ํ”„๋กœํ•„ ํ™”๋ฉด์„ ์ˆ˜์ •ํ•˜๋ฉด์„œ ๋ฐ์ดํ„ฐ ์ˆ˜์ •๊ณผ ํ™”๋ฉด ์ „ํ™˜์„ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

๐Ÿ” ํ•™์Šต ๋‚ด์šฉ

์–ด๋–ค ๋‚ด์šฉ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์„๊นŒ์š”?

  1. Jetpack Compose์˜ ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ UI์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ทธ๋ฆฌ๊ณ , ์ž์ฃผ ์“ฐ์ด๋Š” ํ™”๋ฉด์„ Component๋กœ ๋ถ„๋ฆฌํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


  2. ๊ฐ„๋‹จํ•œ ๋ฐ์ดํ„ฐ ์ฝ๊ณ  ์“ฐ๊ธฐ๋ฅผ ํ•˜๋ฉด์„œ UI์—์„œ ์–ด๋–ป๊ฒŒ API๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋ฐ›์•„์™€์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋™๊ธฐํ™” ํ•ด์ฃผ๋Š”์ง€๋ฅผ ViewModel๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  3. Jetpack Compose๋ฅผ ์˜ˆ์ œ๋งŒ ๋ช‡๊ฐœ ํ•ด๋ณธ ์ƒํ™ฉ์—์„œ ์„œ๋ฒ„(Firebase)์™€ ํ†ต์‹ ํ•˜๋ฉด์„œ ์–ด๋–ค์‹์œผ๋กœ ๊ธฐ๋Šฅ์„ ๋ถ™์—ฌ๋‚˜๊ฐ€๋ฉด ๋ ์ง€ ๊ฐ์„ ์žก์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿคบ ๊ฐ•์˜ ์ˆ˜์ค€์€ ์–ด๋–ค๊ฐ€์š”?


Jetpack Compose ์˜ˆ์ œ๋ฅผ ๋ช‡๊ฐœ ์—ฐ์Šตํ•ด๋ณด์‹  ๋ถ„๋“ค ๋Œ€์ƒ์œผ๋กœ
ViewModel๊ณผ API ํ†ต์‹ ์„ ๊ฒฐํ•ฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์‹œ๊ธฐ ์›ํ•˜์‹œ๋Š” ๋ถ„๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.


๋•Œ๋ฌธ์— ์•„๋ž˜์˜ ์„ ์ˆ˜ ์ง€์‹์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

  1. Jetpack Compose ์˜ˆ์ œ๋ฅผ ๋ช‡ ๊ฐœ ์‹ค์Šตํ•ด๋ณด์‹  ๊ฒฝํ—˜

  2. Kotlin์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ๋ฌธ๋ฒ•์— ์ดํ•ด

  3. ViewModel์ด ๋ฌด์—‡์ธ์ง€ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค


โœ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์ˆ˜์—…์ด ์ง„ํ–‰๋ ๊นŒ์š”?


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


โœ ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ


Q. Jetpack Compose๊ฐ€ ์ฒ˜์Œ์ด์—์š”. ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•ด๋„ ์ข‹์„๊นŒ์š”?

A. ์ด ๊ฐ•์˜๋Š” ViewModel / Jetpack Compose์— ๊ธฐ๋ณธ์ ์ธ ์ง€์‹์ด ์žˆ์œผ์‹  ๋ถ„ ๋Œ€์ƒ์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ณด๋Š” ๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Jetpack Compose๊ฐ€ ์ฒ˜์Œ์ด์‹œ๋ผ๋ฉด ์•„๋ž˜์˜ ๊ฐ•์˜๋ฅผ

[LV1] Jetpack Compose - UI ์—ฐ์Šตํ•˜๊ธฐ (๋งํฌ)

ViewModel์ด ๋ฌด์—‡์ธ์ง€ ์ž˜ ๋ชจ๋ฅด์‹ ๋‹ค๋ฉด

์นœ์ ˆํ•œ Jetpack ๊ฐœ๋ก  <์ƒ> (๋งํฌ)

๋ฅผ ์šฐ์„  ์ˆ˜๊ฐ•ํ•ด์ฃผ์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.


Q. ๊ฐ•์˜์—์„œ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ์™€ ์ด๋ฏธ์ง€๋Š” ๋ชจ๋‘ ์ œ๊ณตํ•˜๋‚˜์š”?

A. ์„น์…˜ 0. ๊ฐ•์˜์†Œ๊ฐœ ๋ถ€๋ถ„์— 4๋ฒˆ์งธ "๊ฐ•์˜์ž๋ฃŒ ๋งํฌ"์—์„œ ๊ฐ ์„น์…˜๋ณ„ ์ฝ”๋“œ์™€ ์ด๋ฏธ์ง€๋ฅผ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

  • Jetpack Compose๋กœ ์˜ˆ์ œ๋ฅผ ํ•ด๋ดค๋Š”๋ฐ, ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ์ด๋ก ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ํ”„๋กœ์ ํŠธ๋กœ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค

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

  • Jetpack Compose๋กœ Row Column์€ ๋งŒ๋“œ์‹ค ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค

  • ViewModel์„ ์‚ฌ์šฉํ•ด๋ณด์…จ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  ์ˆ˜์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค

์•ˆ๋…•ํ•˜์„ธ์š”
๊ฐœ๋ณต์น˜๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

7,447

๋ช…

์ˆ˜๊ฐ•์ƒ

398

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1,355

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

12

๊ฐœ

๊ฐ•์˜

2015๋…„ ์Šคํƒ€ํŠธ์—… ์ฐฝ์—…์„ ๊ณ„๊ธฐ๋กœ ๋‹ค์–‘ํ•œ ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” ํ‰๋ฒ”ํ•œ ์ง์žฅ์ธ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค

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

์ „์ฒด

57๊ฐœ โˆ™ (3์‹œ๊ฐ„ 48๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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