구현

• iOS 애플리케이션 생성

  Xcode를 시작하고 시작 화면에서 [새 Xcode 프로젝트 생성(Create a new Xcode project)]을 선택합니다.

  

  [iOS, 애플리케이션(iOS, Application)]에서 [단일 보기 앱(Single View App)]을 선택하고 [다음:(Next:)]을 클릭합니다.

  

  프로젝트 이름을 입력합니다(예: iOS Getting Started). [언어(Language)]가 [Swift]로 설정되어 있고 [사용자 인터페이스(User Interface)]가 [SwiftUI]로 설정되어 있는지 확인한 후 [다음:(Next:)]을 클릭합니다.

  

  마지막으로 디렉터리를 선택하고 [생성(Create)]을 클릭하여 프로젝트를 생성합니다.

• 기본 보기 업데이트

  Xcode 왼쪽의 파일 목록에서 ContentView.swift를 열고 다음 콘텐츠로 코드를 바꿉니다.

  import SwiftUI
  
  // singleton object to store user data
  class UserData : ObservableObject {
      private init() {}
      static let shared = UserData()
  
      @Published var notes : [Note] = []
      @Published var isSignedIn : Bool = false
  }
  
  // the data class to represents Notes
  class Note : Identifiable, ObservableObject {
      var id : String
      var name : String
      var description : String?
      var imageName : String?
      @Published var image : Image?
  
      init(id: String, name: String, description: String? = nil, image: String? = nil ) {
          self.id = id
          self.name = name
          self.description = description
          self.imageName = image
      }
  }
  
  // a view to represent a single list item
  struct ListRow: View {
      @ObservedObject var note : Note
      var body: some View {
  
          return HStack(alignment: .center, spacing: 5.0) {
  
              // if there is an image, display it on the left
              if (note.image != nil) {
                  note.image!
                  .resizable()
                  .frame(width: 50, height: 50)
              }
  
              // the right part is a vertical stack with the title and description
              VStack(alignment: .leading, spacing: 5.0) {
                  Text(note.name)
                  .bold()
  
                  if ((note.description) != nil) {
                      Text(note.description!)
                  }
              }
          }
      }
  }
  
  // this is the main view of our app, 
  // it is made of a Table with one line per Note
  struct ContentView: View {
      @ObservedObject private var userData: UserData = .shared
  
      var body: some View {
          List {
              ForEach(userData.notes) { note in
                  ListRow(note: note)
              }
          }
      }
  }
  
  // this is use to preview the UI in Xcode
  struct ContentView_Previews: PreviewProvider {
      static var previews: some View {
  
          let _ = prepareTestData()
  
          return ContentView()
      }
  }
  
  // this is a test data set to preview the UI in Xcode
  func prepareTestData() -> UserData {
      let userData = UserData.shared
      userData.isSignedIn = true
      let desc = "this is a very long description that should fit on multiiple lines.\nit even has a line break\nor two."
  
      let n1 = Note(id: "01", name: "Hello world", description: desc, image: "mic")
      let n2 = Note(id: "02", name: "A new note", description: desc, image: "phone")
  
      n1.image = Image(systemName: n1.imageName!)
      n2.image = Image(systemName: n2.imageName!)
  
      userData.notes = [ n1, n2 ]
  
      return userData
  }

  추가한 항목

  • Note 데이터를 저장할 Note 클래스를 생성했습니다. ImageName과 Image의 고유 속성 2개를 사용했습니다. Image는 나중에 스토리지 추가 섹션에서 처리합니다.
  • 특정 사용자 데이터를 보관할 UserData 클래스를 생성했습니다. 이 단계에서는 Note 객체의 목록만 포함됩니다.
  • 기본 보기 ContentView에는 ListRow 목록이 포함됩니다.
  • 각 줄은 이미지와 텍스트가 있는 수평 스택인 ListRow에 의해 렌더링됩니다. 텍스트는 굵게 표시된 메모 이름과 메모 설명이 있는 수직 스택입니다.
  • 마지막으로 캔버스에서 렌더링을 미리 볼 수 있도록 ContentView_Previews를 조정하고 prepareTestData()를 추가했습니다.
• 구축 및 테스트

  캔버스를 확인하여 레이아웃이 원하는 대로 표시되는지 확인합니다. 캔버스가 표시되지 않는 경우 [편집기(Editor)] 메뉴를 사용하여 활성화한 다음 [캔버스(Canvas)]를 클릭하면 됩니다. [캔버스(Canvas)]에서 [다시 시작(resume)] 버튼을 클릭하여 레이아웃 미리 보기를 생성해야 할 수도 있습니다.

  

  미리 보기 데이터는 코드로 생성됩니다(70번 줄에서 시작). 이 데이터는 런타임 시 표시되지 않습니다. 모든 항목을 확인한 후 시뮬레이터에서 앱을 구축하고 시작합니다. 제품(Product) 메뉴에서 실행(Run)을 선택하거나 을(를) 입력합니다. 또는 도구 모음에서 [재생(Play)]▶️ 버튼을 클릭해도 됩니다.

  

  잠시 후 iOS 시뮬레이터에서 앱이 시작되고 초기 빈 화면이 표시됩니다. 미리 보기 데이터는 런타임 시 렌더링되지 않으며 Xcode 안에서 미리 보기용으로만 제공됩니다.