[멋쟁이사자처럼] TIL - 29일차 1차 미니 프로젝트

0. 서론

---

멋쟁이사자처럼 "테킷 iOS 앱스쿨 5기" 부트캠프를 선택한 이유

 

멋쟁이 사자처럼을 선택하고나서 TIL을 하루에 한번씩 올린다고 했는데, 지금 올리게 되었네요.. 죄송합니다 ㅠㅠㅠ

현재까지 배웠던 걸 요약을 하자면.. 26일차까지는 Swift 문법과 SwiftUI에 대해 배웠었습니다.

본 프로젝트를 진행하기전에 2개의 미니프로젝트를 진행한다고 합니다. (강사님마다 다릅니다.) 그래서 3일동안 SwiftUI 미니 프로젝트를 진행했었습니다. 수업 스케쥴에서는 3일이지만, 주말이 껴있어 대략 5일정도의 시간이 주어졌었습니다.

 

 

 

 

1. 본론

---

앱 초기화면

 

 

제가 속한 팀은 TodoList를 만들기로 했습니다. 만들었던 기능과 기술에 대해 설명드리겠습니다.

 

기능

1. 사용자가 Todo를 추가하면 하나의 포도알이 그려진다.

2. Todo를 추가하면 왼쪽에 토글버튼이 있는데 사용자가 해당 Todo를 완료한 후, 누르게되면 포도알의 색깔이 채워지게 된다.

3. 최대 15개의 포도알이 만들어지며, 완료한 항목의 개수가 16개이상이 되면 오른쪽 상단에 하나의 완성된 포도알이 보여지게 된다.

4. Todo 오른쪽에 ">" 버튼이 존재하는데 해당버튼을 누르게 되면 사용자가 추가했던 항목을 수정할 수 있다.

5. 사용자가 항목을 오른쪽에서 왼쪽으로 드래그? 하면 삭제버튼이 나오고, 누르면 포도알과 함께 해당 항목이 삭제된다.

6. 앱을 껐다 키면 사용자가 그전에 등록해놓은 항목이 그대로 존재한다.

 

기술

- SwiftUI, SwiftData

 

 

제가 개발했던 기능은 포도알이 추가, 삭제 그리고 앱을껐다 켰을때 앱을 끄기전 포도알의 상태를 그리는 것을 개발했습니다.

처음에 계획했던 기획서는 시간도 없었기도 했고, 아직 기초적인 부분만 배웠기에 SwiftData를 활용하지 않고 TodoList를 만드는 거였는데 막상 사용자 입장에서 생각해보니 앱을 껐다 켰을때 사용자가 등록했던 항목이 저장되지 않는다면 TodoList가 아니어서 SwiftData를 활용하기로 했습니다. 그래서 SwiftData에 맞춰 포도알 로직을 수정했었어야 했습니다.

일단 제가 첫번째로 우선순위 한건 SwiftData에 대해 공부하기! 입니다. 두번째는 이해한 SwiftData로 포도알 기능 로직을 수정했습니다.

공부한 SwiftData에 대해 잠깐 설명해드리자면...

 

SwiftData

@Model

- 그림에서 보시는 거와 같이 class 위에 @Model 을 선언하면 데이터베이스를 스키마 정의를 돋는 매크로이다.

- @Attribute 는 제약조건을 추가한다는 뜻이다. 즉, 그림에서처럼 선언하면  유일한 제약조건을 추가한다! 는 뜻이다.

 

 

@Query

- @Query는 모델에 일어나는 모든 변화를 뷰에 업데이트 한다. @State와 비슷하다고 생각하면 된다. 

 

 

.modelContainer()

- @Query 만 선언한다고 해서 SwiftData를 이용을 못한다. modelContainer()를 그림에서와 같이 꼭 사용을 해야 SwiftData를 통해 @Query 모델을 저장할 수 있다.

- 이제 modelContainer를 설정했으니 modelContext를 가져와 데이터 저장, 수정, 삭제 등을 하면 된다.

 

 

modelContext

- modelContext는 모델에 생기는 변화를 관찰하고 모델에서 작동하는 조치 중 많은 것을 제공한다.

- modelContext 안에 있는 insert(), delete(), update() 를 통해 모델 데이터를 관리한다.

- 즉, @Query는 모델에 접근할 수 있게 해주고 modelContext는 모델 데이터를 바꾸고 싶을때 사용한다고 생각하면 된다.

 

💡 SwiftData는 modelContext가 자동 저장해서 편리하다. 즉, insert(), delete(), update() 사용시 자동저장 된다! 그래서 따로 save 작업을 하지 않아도 된다.

 

 

이렇게 SwiftData를 기본적인 공부를 끝내고 포도알 로직 수정작업에 들어갔다. (참고: SwiftData의 기능이 여러개가 있으므로 한번 애플 공식 문서 및 비디오를 통해 참고해 보길 바랍니다!) 로직을 수정하면서 가장 어려웠던 점이 기능에서 말했던 6번인데, 어떻게 하면 표현 할 수 있을까? 하고 고민을 많이 했던 것 같습니다. 2가지의 고민이 있었는데...

 

1. 포도알 배열도 @Model 로 선언해서 데이터를 저장할까?

2. @Model을 선언하지 않고 사용자가 등록한 항목배열의 길이를 갖고와 그만큼 포도알 배열을 미리 생성해줄까?

 

고민끝에 2번으로 했습니다. 그이유는 포도알배열을 굳이 @Model로 관리할 필요성을 못느꼈고, uikit에 viewDidLoad() 처럼 한번만 호출하는 함수안에다가 제가 생각한 2번로직대로 만들면 될 것 같아서 했는데.. 잘안됐었습니다..

SwiftUI에 viewDidLoad() 처럼 비슷한 함수를 찾았고.. onAppear()가 그러한 역할을 한다는 것을 알게 되었습니다.

 

그래서 처음엔 onAppear() 함수안에다가 넣었는데요 여기서 문제가 발생했습니다. onAppear() 가 한번만 호출되는줄 알았지만, 다른뷰를 갔다가 다시 돌아오면 onAppear()가 또 다시 호출 된다는 것을 알게되었습니다.. 정리하자면 ContentView(메인뷰) 에서 TodoDeailView(서브뷰) 로 갔다가 다시 ContentView(메인뷰) 로 돌아가면 onAppear()함수가 또 호출된다는 것이였습니다.

 

 그래서 이걸 해결하고자 그림에서 보시는 거와 같이 상태 변수 하나를 선언해주고 조건을 줘서 isLoaded 변수가 false 상태일때만 안에 있던 로직이 실행되도록 했고, 실행이 다 되면 isLoaded 를 true로 바꿔서 사용자가 다른뷰에 갔다와도 onAppear()가 한번만 호출될 수 있도록 해결했습니다. 

 

 

 

 

2. 결론

---

이번 프로젝트를 통해 SwiftUI에 대해 좀 더 깊게 공부하게 되었고, 부족했던 점이 무엇이였는 지 파악할 수 있게 되어 개발자로써 성장하게 된 좋은 경험이였다고 생각합니다. 제가 부족하다고 생각했던 점은 3가지 였습니다.

 

1. git을 잘 활용하면서 쓰기!

2. 팀원분들과 원활한 소통

3. 기한내에 기능 구현이 힘들것 같으면 끙끙앓지 말고 팀원들과 공유를 해 함께 해결해나가기

 

다음 프로젝트 때는 기능 개발보단 저 3가지를 우선적으로 생각하려고 합니다...

이 글을 읽고 있는 취준생분이 계신다면 한번 저처럼 프로젝트가 끝나면 어려웠던 점, 어떤식으로 해결한점 등을 쓰고 생각을 정리해 보는 것도 좋을 것 같습니다.

 

완성된 프로젝트 주소: https://github.com/APP-iOS5th/Grape_Todo