전체 글

iOS 개발/SwiftUI

[SwiftUI] firebase firstore 데이터 CRUD

firebase의 firestore를 이용하여 사용자를 등록하고 사용자의 이메일과 택배 번호, 택배 회사에 관한 데이터를 입력시키는 작업을 진행했다. 해당 작업을 진행하면서 카카오, 애플, 이메일 회원가입을 각각 진행할 때 이메일이 같은 경우에 어떤 식으로 해당 이메일들을 구분해야 하는가에 대한 문제가 발생했다. 이 문제점은 아래 회원가입과 로그인 코드와 같이 Auth.auth().createUser(withEmail: email + "2", password: password)를 활용했다. 각각 로그인, 회원가입 시에 이메일 뒤에 구분할 수 있는 다른 문자열을 넣는 방식을 채택했다. 그리고 Create, update, delete는 firebase의 문서들을 참고하여 해결할 수 있었지만, read의 경우..

iOS 개발/SwiftUI

[SwiftUI] - Firebase Firestore 데이터 저장하기, Cannot convert value of type 'TrackInfo' to expected argument type '[String : Any] 오류 해결

firebase에서 제공하는 database에는 Firestore database와 Realtime database가 존재한다. 각자의 장단점이 존재하지만 이 글은 Firestore를 활용해 데이터를 저장하는 방법에 대해서 쓰도록 하겠다. 현재 작업중인 프로젝트에서는 사용자별로 사용자가 추가한 택배송장번호와 택배회사를 firebase에 저장을 해야했다. 우선 회원가입을 하면 다음과 같이 users collection에 user.uid document를 설정하고, 사용자의 이메일을 넣는다. 초기에는 송장번호를 입력하지 않았으므로 nil값을 넣어주었다. EmailAuthVM.swift class EmailAuthVM: ObservableObject { // 사용자 Create 완료 @AppStorage("l..

iOS 개발/SwiftUI

[SwiftUI] - custom list item 만들기

프로젝트를 진행하던 중 사용자의 배송 물품을 조회하는 목록을 만들어야 했다. 우선 화면은 다음과 같다. 처음에는 단순히 따로 custom item을 만들지 않고 swift에서 기본으로 제공하는 list와 onDelete등을 사용해서 해당 기능을 구현하고자 했다. 그러나 onDelete()를 활용해서 삭제를 구현하면 각 item의 끝에서 삭제하기 버튼이 등장하지 않고, 리스트의 끝에서 삭제하기 버튼이 나타나는 현상과 여러 UI를 구성하는 데 있어서 제약이 있었다. 그래서 custom item을 활용해 해당 기능을 구현하기로 했다. MainView struct PackListTabView: View { @StateObject var packInfoDatas = PackInfoViewModel() var bo..

iOS 개발/SwiftUI

[SwiftUI] - 설정 화면(View) 구현하기

거의 모든 앱 서비스에서는 설정 화면이 필요로 하는데 설정 화면을 개발해야 되는 일이 있어서 이를 토대로 짧게 정리하고자 한다. 우선, 개발하고자 하는 화면은 다음과 같다. 아무래도 반복되는 모양의 버튼이 많다보니 Struct를 활용해 해당 버튼들을 만들었다. 화면을 보면 버튼이 크게 3종류(화살표, 토글, 버젼)로 구분되어있어 enum을 활용해 최대한 코드를 줄이려고 노력했다. 코드는 다음과 같다. 1. systemTabView var systemTabView: some View { VStack { Text("설정") .font(FontManager.title2) VStack(spacing: 10) { SystemButtonView(buttonType: .arrow, text: "계정", email: ..

iOS 개발/SwiftUI

[SwiftUI] - TabView, Progress bar를 활용한 메인 화면 구성

현재 진행중인 택배 조회 앱을 개발하던 중 다음과 같은 메인 화면을 개발하게 되었다. 화면 구성을 보면 1. 하단에 탭 버튼을 클릭해 메인 화면, 택배 리스트 화면, 설정 화면으로 이동 가능 2. 좌우 스크롤을 이용해 현재 택배들의 위치 표시(애니메이션 활용) 3. 기타 정보들 표시 정도로 이루어져 있다. 우선 하단 탭 버튼을 이용해 화면을 이동하는 것은 팀원이 알려준 자료를 활용해 쉽게 구현할 수 있었다. struct MainView: View { var body: some View { TabView { mainTabView .tabItem{ Image(systemName: "house") .environment(\.symbolVariants, .none) } packListTabView .tabIte..

iOS 개발/SwiftUI

[SwiftUI] - 화면이 나타났을 때 Action 주기

프로젝트를 진행하다가 특정 화면이 나타났을 때 action을 주어야 하는 경우가 발생한다. 그럴때에는 onAppear 메서드 , onDisappear 메서드 를 사용하면 된다. Text("Simple Text") .onAppear(perform: { // 뷰가 나타날떄 수행 할 코드 }).onDisappear(perform: { // 뷰가 사라질 때 수행 할 코드 }) 다음과 같이 해당 메서드를 사용함으로써 액션을 처리할 수 있다.

iOS 개발/SwiftUI

[SwiftUI] - 회원가입 약관동의란 활성화/비활성화 CheckBox 만들기

프로젝트를 진행하면서 회원가입 약관동의란을 개발하게 되었다. checkBox를 클릭하지 않았을 때 회색으로 된 checkBox가 필요했고, 클릭했을 때는 다음과 같이 색이 채워져야 한다. 처음에는 swiftUI에 있는 toggle을 활용해 개발을 진행하려 했다. 그러나 검색을 통해서 얻은 결과로는 체크박스 안에 있는 색을 채우거나 없애는 기능은 가능했지만 아예 색을 바꾸기는 조금 힘들다고 생각되었다. (만약 저처럼 색을 바꾸지 않으실분들은 다음 링크를 참조하시면 좋을 것 같습니다!) https://swiftuirecipes.com/blog/custom-toggle-checkbox-in-swiftui Custom Toggle / Checkbox in SwiftUI | Swift UI recipes Impl..

iOS 개발/SwiftUI

[SwiftUI] - TextField onChange(), TextField 변화 시 이벤트 발생

택배 조회 서비스를 개발하던 중 송장번호를 입력하면 해당 송장번호의 유형을 가진 택배사들을 우선적으로 보여주는 기능을 구현하고자 했다. 다음과 같이 번호를 입력했을 때 번호의 유형을 가진 택배사들을 우선적으로 보여주는 역할을 한다. 처음에는 picker의 버튼을 클릭했을 때 해당 이벤트가 발생하게 하려 했으나 그보다 Textfield가 변했을 때 해당 이벤트를 발생 시키는 것이 좀 더 효율적일 것 같다는 생각이 들었다. 해당 기능을 구현하기 위해서 onChange()를 사용하면 이를 쉽게 구현할 수 있었다. TextField("운송장 번호 입력", text: $trackingNumber) .onChange(of: trackingNumber) { _ in //TextField가 변했을 때 원하는 이벤트 작..

bamtorii
bamtori