[Views] Displaying data in a list

rrudalstjยท2024๋…„ 7์›” 17์ผ
0

Apple App Dev Tutorials

๋ชฉ๋ก ๋ณด๊ธฐ
4/5
post-thumbnail

๐Ÿ”Ž ์ด ๊ธ€์€ Apple Developer Documentation - SwiftUI App Dev Tutorials๋ฅผ ChatGPT๋ฅผ ํ†ตํ•ด ๋ฒˆ์—ญํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Œ์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค.


List๋Š” ๋ฐ์ดํ„ฐ์˜ ํ–‰์„ ๋‹จ์ผ ์Šคํฌ๋กค ๊ฐ€๋Šฅํ•œ ์—ด๋กœ ๋ฐฐ์—ดํ•˜์—ฌ ํ‘œ์‹œํ•˜๋Š” ์ปจํ…Œ์ด๋„ˆ ๋ทฐ์ž…๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์—์„œ๋Š” List ๋ทฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž์˜ ์ผ์ผ ์Šคํฌ๋Ÿผ ์š”์•ฝ์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ, ์ด ๋ฆฌ์ŠคํŠธ๋ฅผ ์•ฑ์˜ ์ฃผ์š” ํ™”๋ฉด์œผ๋กœ ์„ค์ •ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Section 1. Display a list of daily scrums

List ๋ทฐ ๊ตฌ์กฐ๋Š” ์ •์  ๋˜๋Š” ๋™์  ๋ทฐ๋กœ ์ฑ„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์„น์…˜์—์„œ๋Š” DailyScrum ๊ฐ์ฒด ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜์—ฌ ๋™์ ์œผ๋กœ ํ–‰์„ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด์ „ ํŠœํ† ๋ฆฌ์–ผ์—์„œ ๋งŒ๋“  CardView๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ ํ–‰์„ ๊ตฌ์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 1.

์ƒˆ๋กœ์šด SwiftUI View ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ์ด๋ฆ„์„ ScrumsView.swift๋กœ ์ง€์ •ํ•˜์„ธ์š”.

Step 2.

[DailyScrum] ํƒ€์ž…์˜ scrums๋ผ๋Š” ์ƒ์ˆ˜ ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 3.

ScrumsView_Previews์—์„œ ScrumsView ์ดˆ๊ธฐํ™”์ž์—๊ฒŒ scrums ๋ฐฐ์—ด์„ ์ „๋‹ฌํ•˜์„ธ์š”.

๋‹ค์Œ์œผ๋กœ, initializer์—๊ฒŒ ํ•ญ๋ชฉ์˜ ์ปฌ๋ ‰์…˜๊ณผ ๊ฐ ํ•ญ๋ชฉ์— ๋Œ€ํ•œ ๋ทฐ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํด๋กœ์ €๋ฅผ ์ „๋‹ฌํ•˜์—ฌ List๋ฅผ ์ƒ์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Step 4.

๊ธฐ๋ณธ Text ๋ทฐ๋ฅผ List ๋ทฐ๋กœ ๊ต์ฒดํ•˜์„ธ์š”. scrums ๋ฐฐ์—ด๊ณผ title ์†์„ฑ์— ๋Œ€ํ•œ ํ‚ค ๊ฒฝ๋กœ๋ฅผ initializer์—๊ฒŒ ์ „๋‹ฌํ•˜์„ธ์š”.

List๋Š” ์ปฌ๋ ‰์…˜์˜ ๊ฐœ๋ณ„ ํ•ญ๋ชฉ์„ ์‹๋ณ„ํ•  ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ํ…Œ์ŠคํŠธ ๋ฐ์ดํ„ฐ์˜ ๋ชจ๋“  scrums๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, title ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ ํ•ญ๋ชฉ์„ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์„น์…˜์—์„œ๋Š” DailyScrum์— ์•ˆ์ •์ ์ธ ์•„์ด๋ดํ‹ฐํ‹ฐ ๊ฐœ๋…์„ ์ œ๊ณตํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šธ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋‚˜์—ดํ•  ํ•ญ๋ชฉ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ดˆ๊ธฐํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. List ๋ทฐ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๋ ค๋ฉด List๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.

Step 5.

List ํด๋กœ์ € ๋‚ด์—์„œ CardView๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜์„ธ์š”.

์ด ํด๋กœ์ €๋Š” scrums ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด CardView๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

Step 6.

ํ–‰์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ scrum.theme.mainColor๋กœ ์„ค์ •ํ•˜์„ธ์š”.

Section 2. Make scrums identifiable

List๋Š” ์‹๋ณ„ ๊ฐ€๋Šฅํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜๋ณตํ•˜์—ฌ ๋™์  ๋ทฐ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ด์ „ ์„น์…˜์—์„œ๋Š” title์„ ํ†ตํ•ด scrums๋ฅผ ์‹๋ณ„ํ•˜๋Š” ๋ฐ ํ‚ค ๊ฒฝ๋กœ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ ‘๊ทผ ๋ฐฉ์‹์€ ์ƒ˜ํ”Œ ๋ฐ์ดํ„ฐ์˜ ๊ฐ scrum์ด ๊ณ ์œ ํ•œ ์ œ๋ชฉ์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœํ† ํƒ€์ž… ๋‹จ๊ณ„์—์„œ๋Š” ์ž˜ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์šฉ์ž๊ฐ€ ๊ธฐ์กด scrum๊ณผ ๊ฐ™์€ ์ œ๋ชฉ์„ ๊ฐ€์ง„ ์ƒˆ scrum์„ ์ƒ์„ฑํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž ์ƒ์„ฑ ์ฝ˜ํ…์ธ ๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด, DailyScrum์„ Identifiable ํ”„๋กœํ† ์ฝœ์— ์ค€์ˆ˜ํ•˜๊ฒŒ ํ•˜์—ฌ ๋” ๊ฐ•๋ ฅํ•œ ์•„์ด๋ดํ‹ฐํ‹ฐ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”„๋กœํ† ์ฝœ์˜ ์š”๊ตฌ ์‚ฌํ•ญ์€ ํ•˜๋‚˜์˜ ์†์„ฑ์ธ id๋กœ, ์ด ์†์„ฑ์€ ์—”ํ„ฐํ‹ฐ์— ๋Œ€ํ•œ ์•ˆ์ •์ ์ธ ์‹๋ณ„์ž๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Step 1.

DailyScrum.swift ํŒŒ์ผ์„ ์—ด๊ณ  Identifiable ํ”„๋กœํ† ์ฝœ์— ์ค€์ˆ˜ํ•˜๋„๋ก ์„ ์–ธํ•˜์„ธ์š”.

Step 2.

Identifiable์— ์ค€์ˆ˜ํ•˜๋ ค๋ฉด ๋ชจ๋ธ์— id๋ผ๋Š” ์ด๋ฆ„์˜ ์†์„ฑ์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š์œผ๋ฉด ์ฝ”๋“œ๊ฐ€ ์ปดํŒŒ์ผ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

UUID ํƒ€์ž…์˜ ์ƒ์ˆ˜ id๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.

Step 3.

id ์†์„ฑ์— ๊ธฐ๋ณธ๊ฐ’์„ ํ• ๋‹นํ•˜๋Š” ์ดˆ๊ธฐํ™”์ž๋ฅผ ์ถ”๊ฐ€ํ•˜์„ธ์š”.
๋งค๊ฐœ๋ณ€์ˆ˜์— ๊ธฐ๋ณธ๊ฐ’์„ ์ •์˜ํ•˜๋ฉด, ์ดˆ๊ธฐํ™”์ž๋‚˜ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ๊ทธ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Step 4.

์ด์ œ DailyScrum์ด Identifiable ํ”„๋กœํ† ์ฝœ์— ์ค€์ˆ˜ํ•˜๋ฏ€๋กœ, List ์ดˆ๊ธฐํ™”์ž๋ฅผ ๊ฐ„์†Œํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ScrumsView.swift์—์„œ List ์ดˆ๊ธฐํ™”์ž์—์„œ id ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ œ๊ฑฐํ•˜์„ธ์š”.

Step 5.

์ด์ œ ScrumsView๋ฅผ ์•ฑ์˜ ๋ฃจํŠธ ๋ทฐ๋กœ ์„ค์ •ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. SwiftUI ์•ฑ์„ ๋งŒ๋“ค๋ ค๋ฉด App ํ”„๋กœํ† ์ฝœ์— ์ค€์ˆ˜ํ•˜๋Š” ๊ตฌ์กฐ์ฒด๋ฅผ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค. ์•ฑ์˜ body ์†์„ฑ์€ ์•ฑ์˜ ๊ธฐ๋ณธ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ทฐ ๊ณ„์ธต์„ ํฌํ•จํ•˜๋Š” Scene์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

ScrumdingerApp.swift๋ฅผ ์—ด๊ณ  ์•ฑ์˜ ์ดˆ๊ธฐ ๋ทฐ๋กœ ScrumsView๋ฅผ ์„ค์ •ํ•˜์„ธ์š”.

WindowGroup์€ SwiftUI๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ์”ฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. iOS์—์„œ๋Š” WindowGroup ์”ฌ ๋นŒ๋”์— ์ถ”๊ฐ€ํ•œ ๋ทฐ๊ฐ€ ์žฅ์น˜์˜ ์ „์ฒด ํ™”๋ฉด์„ ์ฑ„์šฐ๋Š” ์œˆ๋„์šฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

Step 6.

์•ฑ์„ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ๋นŒ๋“œํ•˜๊ณ  ์‹คํ–‰ํ•˜์—ฌ ์•ฑ์ด ์‹œ์ž‘๋  ๋•Œ ScrumsList๊ฐ€ ๋‚˜ํƒ€๋‚˜๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

์ง€๊ธˆ๊นŒ์ง€ ๋งŽ์€ ๊ฒƒ์„ ๋‹ฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. Scrumdinger์˜ ์ฃผ์š” ํ™”๋ฉด ์ค‘ ๋‘ ๊ฐœ์ธ MeetingView์™€ ScrumsView๋ฅผ ์„ค๊ณ„ํ•˜๊ณ , ์•ฑ์˜ ๋ฃจํŠธ ๋ทฐ๋ฅผ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์žฅ์—์„œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ทฐ ๊ฐ„์— ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์•ฑ์„ ๋” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•˜๊ฒŒ ๋งŒ๋“ค ๊ฒƒ์ž…๋‹ˆ๋‹ค.

profile
helloooo

0๊ฐœ์˜ ๋Œ“๊ธ€