How to Develop a Basic CRUD Application with SwiftUI?

28min
개요
이 가이드에서는 SwiftUI를 사용하여 완전한 CRUD(생성, 읽기, 업데이트 및 삭제) 애플리케이션을 개발하는 방법을 배웁니다.
SwiftUI는 iOS, iPadOS, watchOS, tvOS, visionOS 및 macOS용 사용자 인터페이스를 구축하기 위한 프레임워크입니다.
우리는 데이터를 관리하기 위해 Back4app을 백엔드 서비스로 사용할 것입니다. 이 튜토리얼은 Back4app 프로젝트 구성, 데이터베이스 스키마 설계, API 호출을 사용한 SwiftUI 통합 및 백엔드 보안 설정을 안내합니다.
배울 내용
데이터 작업을 원활하게 처리하는 CRUD 앱을 구축하는 방법.
강력하고 확장 가능한 백엔드를 설계하는 기술.
REST API를 사용하여 SwiftUI 인터페이스를 Back4app과 연결하는 방법.
고급 액세스 제어로 데이터를 안전하게 관리하는 방법.
﻿
전제 조건
﻿
Back4app 계정: Back4app에 가입하고 새 프로젝트를 설정했는지 확인하세요.
도움이 필요하면 Back4app 빠른 시작을 참조하세요.
SwiftUI 환경: Xcode가 설치되어 있고 기본 SwiftUI 프로젝트가 생성되었는지 확인하세요.
숙련도: Swift, SwiftUI 및 RESTful API에 대한 기본 지식이 도움이 될 것입니다.
시작하기 전에:
﻿
1단계 – Back4app 프로젝트 설정
Back4app에서 새 프로젝트 시작하기
Back4app 대시보드에 접근하기 계정에 로그인하여.
“새 앱” 선택하기 새 프로젝트를 시작합니다.
프로젝트 이름 지정하기: 예를 들어, Basic-CRUD-App-SwiftUI, 화면의 지침에 따라 설정을 완료합니다.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에 나타나며, 백엔드 작업을 위해 구성할 준비가 됩니다.
﻿
2단계 – 데이터베이스 스키마 작성하기
데이터 모델 정의하기
이 CRUD 애플리케이션을 위해 여러 컬렉션(클래스)을 정의해야 합니다. 아래는 주요 컬렉션과 그 필드 및 유형을 설명하는 예시입니다.
1. 수집: 항목
이 수집은 각 항목에 대한 세부 정보를 저장합니다.
필드
유형
목적
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목에 대한 간단한 설명.
생성일
날짜
생성 타임스탬프.
업데이트됨
날짜
최신 업데이트의 타임스탬프.
2. 수집: 사용자
이 수집에는 사용자 자격 증명 및 프로필 세부 정보가 포함됩니다.
필드
유형
목적
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
로그인을 위한 고유 사용자 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
인증을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 수정의 타임스탬프.
이 클래스는 Back4app 대시보드를 통해 수동으로 구성할 수 있으며, 새로운 클래스를 만들고 각 필드에 대한 열을 추가할 수 있습니다.
새 클래스 만들기
﻿
대시보드 도구를 사용하여 필드 이름, 유형, 기본값 및 필수 상태를 정의하십시오.
열 만들기
﻿
Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 스키마 생성 프로세스를 간소화합니다. 텍스트 프롬프트를 기반으로 데이터베이스 스키마를 자동으로 생성할 수 있습니다.
AI 에이전트 활용 방법:
AI 에이전트 찾기:
로그인하고 프로젝트 설정에서 AI 에이전트 섹션으로 이동합니다.
스키마 설명 제출:
원하는 컬렉션과 필드를 설명하는 자세한 프롬프트를 입력합니다.
검토 및 적용:
생성 후 스키마를 확인하고 변경 사항을 적용합니다.
샘플 프롬프트
Text
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create these collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 기능은 시간을 절약하고 데이터베이스 설정의 일관성을 보장합니다.
﻿
3단계 – 관리자 인터페이스로 데이터 관리하기
관리자 인터페이스 개요
Back4app 관리자 앱은 데이터 관리를 간소화하는 노코드 도구입니다. 직관적인 드래그 앤 드롭 인터페이스를 통해 CRUD 작업을 손쉽게 수행할 수 있습니다.
관리자 인터페이스 활성화
“더보기” 메뉴로 가기 Back4app 대시보드에서.
“관리자 앱” 선택 그 다음 “관리자 앱 활성화.”
자격 증명 설정:
시스템 역할을 자동으로 구성하는 초기 관리자 사용자를 생성합니다.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 컬렉션을 관리합니다.
관리자 앱 대시보드
﻿
관리자 인터페이스의 CRUD 작업
생성: 모든 컬렉션(예: 항목)에서 “레코드 추가” 옵션을 사용하여 새 데이터를 추가합니다.
읽기/업데이트: 레코드를 클릭하여 세부 정보를 보고 필드를 수정합니다.
삭제: 더 이상 필요하지 않은 레코드는 삭제 기능을 사용하여 제거합니다.
이 인터페이스는 사용성을 향상시키고 일상적인 데이터 작업을 간소화합니다.
﻿
4단계 – SwiftUI와 Back4app 통합
백엔드가 준비되었으니, SwiftUI 애플리케이션을 Back4app에 연결할 시간입니다.
SwiftUI에서 REST API 호출 사용하기
SDK에 의존하는 대신, SwiftUI 앱에서 Back4app과 상호작용하기 위해 REST API 호출을 사용할 것입니다.
예시: 항목 가져오기
새로운 SwiftUI 뷰를 생성하세요 (예: ItemsListView.swift) 그리고 다음 코드를 추가하세요:
Swift
import SwiftUI
import Combine

struct Item: Identifiable, Codable {
    let id: String
    let title: String
    let description: String
}

class ItemsViewModel: ObservableObject {
    @Published var items: [Item] = []
    private var cancellables = Set<AnyCancellable>()

    func fetchItems() {
        guard let url = URL(string: "https://parseapi.back4app.com/classes/Items") else { return }
        var request = URLRequest(url: url)
        request.addValue("YOUR_APPLICATION_ID", forHTTPHeaderField: "X-Parse-Application-Id")
        request.addValue("YOUR_REST_API_KEY", forHTTPHeaderField: "X-Parse-REST-API-Key")

        URLSession.shared.dataTaskPublisher(for: request)
            .map { $0.data }
            .decode(type: ItemsResponse.self, decoder: JSONDecoder())
            .receive(on: DispatchQueue.main)
            .sink(receiveCompletion: { completion in
                if case let .failure(error) = completion {
                    print("Error fetching items: \(error)")
                }
            }, receiveValue: { response in
                self.items = response.results
            })
            .store(in: &cancellables)
    }
}

struct ItemsResponse: Codable {
    let results: [Item]
}

struct ItemsListView: View {
    @StateObject private var viewModel = ItemsViewModel()

    var body: some View {
        NavigationView {
            List(viewModel.items) { item in
                VStack(alignment: .leading) {
                    Text(item.title)
                        .font(.headline)
                    Text(item.description)
                        .font(.subheadline)
                }
            }
            .navigationTitle("Items")
            .onAppear {
                viewModel.fetchItems()
            }
        }
    }
}

struct ItemsListView_Previews: PreviewProvider {
    static var previews: some View {
        ItemsListView()
    }
}
import SwiftUI
import Combine

struct Item: Identifiable, Codable {
    let id: String
    let title: String
    let description: String
}

class ItemsViewModel: ObservableObject {
    @Published var items: [Item] = []
    private var cancellables = Set<AnyCancellable>()

    func fetchItems() {
        guard let url = URL(string: "https://parseapi.back4app.com/classes/Items") else { return }
        var request = URLRequest(url: url)
        request.addValue("YOUR_APPLICATION_ID", forHTTPHeaderField: "X-Parse-Application-Id")
        request.addValue("YOUR_REST_API_KEY", forHTTPHeaderField: "X-Parse-REST-API-Key")

        URLSession.shared.dataTaskPublisher(for: request)
            .map { $0.data }
            .decode(type: ItemsResponse.self, decoder: JSONDecoder())
            .receive(on: DispatchQueue.main)
            .sink(receiveCompletion: { completion in
                if case let .failure(error) = completion {
                    print("Error fetching items: \(error)")
                }
            }, receiveValue: { response in
                self.items = response.results
            })
            .store(in: &cancellables)
    }
}

struct ItemsResponse: Codable {
    let results: [Item]
}

struct ItemsListView: View {
    @StateObject private var viewModel = ItemsViewModel()

    var body: some View {
        NavigationView {
            List(viewModel.items) { item in
                VStack(alignment: .leading) {
                    Text(item.title)
                        .font(.headline)
                    Text(item.description)
                        .font(.subheadline)
                }
            }
            .navigationTitle("Items")
            .onAppear {
                viewModel.fetchItems()
            }
        }
    }
}

struct ItemsListView_Previews: PreviewProvider {
    static var previews: some View {
        ItemsListView()
    }
}
﻿
이 뷰는 Back4app에서 REST를 통해 데이터를 가져와 목록에 표시합니다.
추가 API 작업
새 항목 만들기: URLSession을 사용하여 POST 요청으로 새 항목을 추가합니다.
항목 업데이트: 기존 데이터를 수정하기 위해 PUT 요청을 구현합니다.
항목 삭제: 데이터를 제거하기 위해 DELETE 요청을 사용합니다.
필요에 따라 이러한 네트워크 작업을 SwiftUI 뷰에 통합하세요.
﻿
5단계 – 백엔드 보안 설정
접근 제어 구현
객체에 대한 접근 제어 목록(ACL)을 설정하여 데이터를 보호하세요. 예를 들어, 안전한 항목 기록을 생성하려면:
Swift
func createSecureItem(title: String, description: String, ownerId: String) {
    guard let url = URL(string: "https://parseapi.back4app.com/classes/Items") else { return }
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.addValue("YOUR_APPLICATION_ID", forHTTPHeaderField: "X-Parse-Application-Id")
    request.addValue("YOUR_REST_API_KEY", forHTTPHeaderField: "X-Parse-REST-API-Key")
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")

    let itemData: [String: Any] = [
        "title": title,
        "description": description,
        "ACL": [
            ownerId: ["read": true, "write": true],
            "*": ["read": false, "write": false]
        ]
    ]

    request.httpBody = try? JSONSerialization.data(withJSONObject: itemData)

    URLSession.shared.dataTask(with: request) { data, response, error in
        if let error = error {
            print("Error creating item: \(error)")
        }
    }.resume()
}
func createSecureItem(title: String, description: String, ownerId: String) {
    guard let url = URL(string: "https://parseapi.back4app.com/classes/Items") else { return }
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.addValue("YOUR_APPLICATION_ID", forHTTPHeaderField: "X-Parse-Application-Id")
    request.addValue("YOUR_REST_API_KEY", forHTTPHeaderField: "X-Parse-REST-API-Key")
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")

    let itemData: [String: Any] = [
        "title": title,
        "description": description,
        "ACL": [
            ownerId: ["read": true, "write": true],
            "*": ["read": false, "write": false]
        ]
    ]

    request.httpBody = try? JSONSerialization.data(withJSONObject: itemData)

    URLSession.shared.dataTask(with: request) { data, response, error in
        if let error = error {
            print("Error creating item: \(error)")
        }
    }.resume()
}
﻿
클래스 수준 권한 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 클래스 수준 권한(CLP)을 조정하여 기본적으로 누가 데이터를 읽거나 쓸 수 있는지를 설정하세요.
﻿
6단계 – 사용자 인증 구현
사용자 계정 설정
Back4app은 인증을 처리하기 위해 사용자 클래스를 활용합니다. SwiftUI 앱에서 REST API 호출을 통해 등록 및 로그인을 관리하세요.
예시: 사용자 등록
Swift
func signUpUser(username: String, password: String, email: String) {
    guard let url = URL(string: "https://parseapi.back4app.com/users") else { return }
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.addValue("YOUR_APPLICATION_ID", forHTTPHeaderField: "X-Parse-Application-Id")
    request.addValue("YOUR_REST_API_KEY", forHTTPHeaderField: "X-Parse-REST-API-Key")
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")

    let userData: [String: Any] = [
        "username": username,
        "password": password,
        "email": email
    ]

    request.httpBody = try? JSONSerialization.data(withJSONObject: userData)

    URLSession.shared.dataTask(with: request) { data, response, error in
        if let error = error {
            print("Sign up error: \(error)")
        } else {
            print("User registered successfully")
        }
    }.resume()
}
func signUpUser(username: String, password: String, email: String) {
    guard let url = URL(string: "https://parseapi.back4app.com/users") else { return }
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.addValue("YOUR_APPLICATION_ID", forHTTPHeaderField: "X-Parse-Application-Id")
    request.addValue("YOUR_REST_API_KEY", forHTTPHeaderField: "X-Parse-REST-API-Key")
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")

    let userData: [String: Any] = [
        "username": username,
        "password": password,
        "email": email
    ]

    request.httpBody = try? JSONSerialization.data(withJSONObject: userData)

    URLSession.shared.dataTask(with: request) { data, response, error in
        if let error = error {
            print("Sign up error: \(error)")
        } else {
            print("User registered successfully")
        }
    }.resume()
}
﻿
이 접근 방식은 사용자 로그인 및 세션 관리로 확장할 수 있습니다.
﻿
7단계 – 결론 및 향후 개선 사항
잘 하셨습니다! SwiftUI와 Back4app을 사용하여 기본 CRUD 애플리케이션을 성공적으로 구축했습니다.
"Basic-CRUD-App-SwiftUI"라는 제목의 프로젝트를 만들고, 항목 및 사용자에 대한 데이터베이스 스키마를 설계하고, SwiftUI 프론트엔드를 REST API 호출을 통해 백엔드에 연결했습니다.
또한 ACL을 사용하여 데이터를 보호하고 사용자 인증을 구현하는 방법을 배웠습니다.
다음은 무엇인가요?
UI 확장하기: SwiftUI 인터페이스를 상세 보기, 애니메이션 및 상호작용 요소로 향상시키세요.
고급 기능: 클라우드 기능 또는 실시간 데이터 업데이트와 같은 추가 백엔드 논리를 통합하세요.
더 탐색하기: Back4app 문서를 방문하여 앱 최적화 및 더 고급 기능 통합에 대한 추가 통찰력을 얻으세요.
이 가이드를 따르면 이제 Back4app을 사용하여 SwiftUI 애플리케이션을 위한 강력하고 확장 가능한 CRUD 백엔드를 만드는 데 필요한 기본 기술을 갖추게 되었습니다. 구축하고 혁신하는 것을 즐기세요!
필드	유형	목적
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목에 대한 간단한 설명.
생성일	날짜	생성 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	로그인을 위한 고유 사용자 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 수정의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Building a CRUD App with Jetpack Compose?
How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial