swift 로 메모장 만들기 따라하기
SWIFT 언어를 공부하기 시작하면서, 유투브 강의를 하나 따라 해보았다.
https://www.youtube.com/watch?v=O7fZ2ZvEKoA
xcode에서 swift를 써본적이 없고 기본적인 문법의 지식이 없었지만 swift를 활용하여 간단한 메모앱을 만들 수 있었고
react를 많이 사용해보지 않은 나로서는 공부하기 좋은 동영상이었다.
이 동영상에서는 Swift UI를 사용했다. Swift UI는 Swift 언어를 이용해서 쉽게 프로덕트를 제작하기 위해서 개발한 프레임워크이다.
해당 프레임워크를 활용해서 제작한 어플의 경우 네이티브 앱이라고 볼 수 있다.
이후에는 회사의 상황에 맞춰서 UI kit 과 cocoapots에서 다운받은 pots 를 활용하여 앱을 개발할 것 같다.
1. 메모 객체 생성
다음과 같이, swift 프로잭트를 생성하니 App과 Test 폴더들이 생성됐다.
이후에 View / Memory / CoreData 폴더를 생성했다.
CoreData에는 프로젝트 생성 시 설정했던 CoreData 로 인해 생성된 두 파일을 넣어뒀다.
아직 자세히는 모르지만, 하나는 DB를 이용할 수 있도록 하는 장치이고 하나는 간편한 DB 인 것 같다.
메모장이므로, 메모와 메모들을 배열 형태로 저장할 수 있는 Store를 생성했다.
import Foundation
import SwiftUI
class Memo: Identifiable, ObservableObject {
let id: UUID
@Published var content: String
let insertDate: Date
init(content:String , insertDate: Date = Date.now){
id = UUID()
self.content = content
self.insertDate = insertDate
}
}Memo의 경우, id 와 내용, 날짜 3가지의 필드를 가지고 있고, 날짜의 경우 값이 없다면 현재 날짜로 저장되도록 되어있다.
ObservableObject의 경우 옵저버 옵션이 적용되어있어서 해당 객체에 변화가 생기면, 객체와 연결된 다른 요소들에 이벤트가 발생하게 만드는 것 같다.
@Published 로 선언한 변수의 경우, 변수의 값이 연동되고 있는 것 같다.
import Foundation
class MemoStore: ObservableObject {
@Published var list: [Memo]
init(){
list = [
Memo(content: "Fist Content", insertDate: Date.now),
]
}
func insert(memo: String){
list.insert(Memo(content: memo), at: 0)
}
func update(memo: Memo?, content: String){
guard let memo = memo else {
return
}
memo.content = content
}
func delete(memo: Memo){
list.removeAll { $0.id == memo.id }
}
func delete(set: IndexSet){
for index in set {
list.remove(at: index)
}
}
}MemoStore의 경우 Memo들을 저장할 수 있는 배열이 있고, init 할 때 list를 초기화 한다.
또한 list에 memo를 추가, 수정, 삭제 할 수 있는 function 들이 있다.
모델과 컨트롤러를 잘 설계한 것 같다.
2. 메인 뷰 생성
import SwiftUI
@main
struct SwiftUIMemoApp: App {
@StateObject var store = MemoStore()
let persistenceController = PersistenceController.shared
var body: some Scene {
WindowGroup {
MainListView()
.environment(\.managedObjectContext, persistenceController.container.viewContext)
.environmentObject(store)
}
}
}위의 코드는 앱의 시작점으로, MemoStore 를 초기화하고 메인 뷰를 불러온다.
특이한 점으로는 어노테이션을 StateObject로 걸고 변수를 선언했다. swift에서는 enum처럼 타입에 엄격한 경우들이 많은 것 같은데, 이 부분은 typescript를 사용하는 것 같은 느낌이 든다.
View를 그릴 때는, Scene 위에 View들을 쌓는 느낌이다.
body를 Scene 타입으로 생성 한 후에, 다른 view 파일을 불러서 View타입의 body들을 나열한다.
메인 화면을 그릴 MainListView 에는 .environmentObject(store)를 함으로서, MemoStore를 사용할 수 있게 만들었다.
persistenceController와 .environment의 경우, CoreData와 관련있어 보이는데 자세한 것은 다음에 알아볼 것이다.
import SwiftUI
struct MainListView: View {
@EnvironmentObject var store: MemoStore
@State private var showComposer: Bool = false
var body: some View {
NavigationView {
List {
ForEach(store.list){ memo in
NavigationLink{
NavigationView{
DetailView(memo: memo)
}
} label: {
MemoCell(memo: memo)
}
}
.onDelete(perform: store.delete)
}
.listStyle(.plain)
.navigationTitle("내 메모")
.toolbar {
Button {
showComposer = true
} label: {
Image(systemName: "plus")
}
}
.sheet(isPresented: $showComposer){
ComposeView()
}
}
}
}
#Preview {
MainListView()
.environmentObject(MemoStore())
}메인 뷰 파일은 다음과 같다.
먼저, MemoStore를 사용할 수 있게 필드에 저장하고, Body 안에 요소들을 추가했다.
특이한 점 1번으로는
대부분 swift에서 제공하는 명령어로 제작했다는 점이다.
NavigationView 는 앱 화면에 Toolbar 또는 Navigation 요소에 대한 설정을 할 수 있게 해준다.
부트스트랩을 사용하고 있는 것 처럼, NavigationView안의 공간을 세밀하게 분류해둔 것 같다.
특이한 점 2번으로는 React처럼 컴포넌트에 . 을 붙이는 것으로 뷰를 그린다.
swift에 저장되어 있는 변수를 불러올 때 .Name 형태로 불러오던데, 헷갈리지 않게 조심 해야할 것 같다.
필드에서 선언한 변수를 불러올 때는 $ 를 앞에 붙인다
특이한 점 3번은 버튼 태그에 이벤트를 걸 때, $State 변수를 미리 선언해두고, isPresented 에 해당 변수를 걸어두고 사용한다는 점이다.
아직 이 방식에 대해 완벽하게 이해한 것은 아니지만, 이벤트를 만들 때 마다 변수를 선언하면 복잡한 기능의 경우 변수가 너무 많을 것 같기도 하고 관리를 깔끔하게 하는 것 같기도 하고 반반이다.
마지막으로 #Preview 를 이용하여 시뮬레이터를 켜면, 현재 뷰가 어떻게 작업되고 있는지 확인할 수 있다.
3. 그 외 작은 뷰 들
import SwiftUI
struct MemoCell: View {
@ObservedObject var memo: Memo
var body: some View {
VStack(alignment: .leading){
Text(memo.content)
.font(.body)
.lineLimit(1)
Text(memo.insertDate, style: .date)
.font(.caption)
.foregroundColor(.secondary)
}
}
}
#Preview {
MemoCell(memo: Memo(content: "Test"))
}MemoCell은 메인 뷰의 List에 들어갈 요소들이다. HTML로 따지면 tr 태그 같다.
요소를 선언하고 .명령어를 추가하는 것으로 코드를 구성하니 매우 깔끔하다.
다만, 반대로 여러가지 코드들을 숙지하고 있어야 편하게 사용할 수 있을 것 같다
import SwiftUI
struct ComposeView: View {
@EnvironmentObject var store: MemoStore
var memo: Memo? = nil
@Environment(\.dismiss) var dismiss
@State private var content: String = ""
var body: some View {
NavigationView {
VStack {
TextEditor(text: $content)
.padding()
.onAppear {
if let memo = memo {
content = memo.content
}
}
}
.navigationTitle(memo != nil ? "메모 편집" : "새 메모")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItemGroup(placement: .navigationBarLeading)
{
Button {
dismiss()
} label: {
Text("취소")
}
}
ToolbarItemGroup(placement: .navigationBarTrailing)
{
Button {
if let memo = memo {
store.update(memo: memo, content: content)
} else {
store.insert(memo: content)
}
dismiss()
} label: {
Text("저장")
}
}
}
}
}
}
#Preview {
ComposeView()
.environmentObject(MemoStore())
}ComposeView는 메모 작성 공간이다. 주로 .sheet를 사용하여 모달 형태로 불러오도록 사용되었다.
이 때 사용된 dismiss() 는 주로 모달창이나 시트를 닫을 때 사용되고, NavigationLink로 이동한 경우에도 이전 화면으로 돌아갈 수 있는 기능이다.
이 뷰는 다른 것 보다, memo의 상태에 따라서 텍스트와 기능이 변하는 부분을 깔끔하게 설계한 것 같다.
import SwiftUI
struct DetailView: View {
@ObservedObject var memo: Memo
@EnvironmentObject var store: MemoStore
@State private var showComposer = false
@State private var showDeleteAlert = false
@Environment(\.dismiss) var dismiss
var body: some View {
VStack {
ScrollView {
VStack {
HStack {
Text(memo.content)
.padding()
Spacer(minLength: 0)
}
Text(memo.insertDate, style: .date)
.padding()
.font(.footnote)
.foregroundColor(.secondary)
}
}
}
.navigationTitle("메모 보기")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button {
showDeleteAlert = true
} label: {
Image(systemName: "trash")
}
.foregroundColor(.red)
.alert("삭제 확인", isPresented: $showDeleteAlert){
Button(role: .destructive){
store.delete(memo: memo)
dismiss()
} label: {
Text("삭제")
}
} message: {
Text("메모를 삭제할까요?")
}
Button {
showComposer = true
} label: {
Image(systemName: "square.and.pencil")
}
}
}
.sheet(isPresented: $showComposer){ ComposeView(memo: memo)
}
}
}
#Preview {
NavigationView {
DetailView(memo: Memo(content: "Hello"))
.environmentObject(MemoStore())
}
}상세보기 페이지 이다. 이 페이지를 보면 확실히 여러가지 명령어들을 다 알고 있어야 개발하기에 용이할 것 같다는 생각이 들었다.
4. 마무리
mac과 xcode를 사용하면 좋은 점은 기본적으로 탑제하고 있는 단축키와 기능이 많다는 것이다.
특히 특정 Element에 우클릭 또는 shift + command + A 를 눌러서 Quick Action을 켜면,
특정 요소가 사용되고 있는 모든 문서의 이름을 변경하는 Rename이나,
요소에 Container를 생성하는 Embed,
여러가지 Stack을 생성하는 기능 등 개발에 용이한 기능들이 많다.
5. 아이폰에 내려받기
Xcode의 상단에 있는 메뉴 탭에서 Mac과 열결된 I phone을 선택하고, build 버튼을 클릭하면 핸드폰에 어플을 다운받을 수 있다.
물론, 그 전에 Xcode 에서 Apple계정과 iPhone의 신뢰성 인증을 받아야하는 번거로움이 있지만, 그만큼 보안이 철저한 것 같다.