Stanford SwiftUI - Lecture 1

해당 강의를 들으면서 Memorize Game App 을 만든다고 한다 ➡ Memorize라는 이름으로 SwiftUI 프로젝트 생성

주요 기능은 다음과 같다

• 카드를 누르면 뒤집어짐
• 두 개의 카드를 누르고 두 카드가 같은 카드면 사라짐
• 다른 카드면 다시 뒤집어짐
• 카드별로 타이머가 있어서 두 개의 카드를 시간 내에 선택하지 않으면 다시 뒤집어짐
• 카드 세트에도 여러가지가 존재

최종 목표는 이런 기능들까지 다 구현하는 것 같다

---

Xcode 구조

처음 SwiftUI를 접하는 사람들을 위한 강의이기 때문에 Xcode의 구조에 대해 설명해 주신다

먼저 처음 SwiftUI 프로젝트를 만들면 해당 화면이 나온다

 

 

좌측부터 Navigator / Main Editing Window / Investigator 라고 부른다

 

Navigator

앱을 둘러볼 수 있게 해주는 영역이다

상단을 보면 다양한 메뉴를 볼 수 있는데, 이를 통해 다양한 방법으로 둘러볼 수 있다

 

Main Editing Window

현재 좌측에는 코드가 작성되어 있고, 우측에는 아무 내용도 없는데,

코드를 자세히 보면 Preview라고 적혀있는 부분이 있다

우측 부분에는 이 Preview가 활성화되면 보여주는 영역이다

 

Investigator

가장 우측 부분인 Investigator이다

Main Editing Window에서 작성한 View에 다양한 기능을 부여할 수 있는 부분이다

코드로 작성해도 되는 것들을 Investigator에서 추가하는 방법도 있다

ex. 패딩 넣기, 텍스트 바꾸기, 크기 바꾸기 등

---

앱의 기본 구조

 

앱을 처음 만들면 위와 같은 구조의 파일들이 나오는데, 하나하나 뜯어서 보겠다!

 

---

 

Assets

말 그대로 Asset(이미지, 소리, 비디오 등)을 모아두는 파일이다

외부에서 넣고자 하는 파일을 드래그 해 넣어두면 됨

 

 

Assets 파일을 클릭해보면 기본으로 두가지(AccentColor, AppIcon)이 들어있는데,

AccentColor는 프로젝트에서 자주 사용할 색을 미리 지정해두고 이름을 지어 필요할 때마다 가져올 수 있도록 한다

 

 

AppIcon은 되게 복잡해서 자세한 설명은 나중에 해주신다고 한 것 같은데,

대략적인 설명으로는 AppIcon이 하나만 있으면 되지 않나 싶었지만

다양한 environment(iPad, iPhone, Mac) 등 어디에서 진행하느냐에 따라 해상도가 다르기 때문에

여러가지 해상도의 icon을 넣어야 한다는 것 같다

 

---

 

Info.plist(지금은 없는 파일)

강의에서는 분명히 Info.plist에 관해서도 설명 해주셨는데

기본으로 생성되지 않아 어디에 있나 했지만 검색해본 결과

Xcode 13 이전까지만 Navigator에 표시되었고, 그 이후부터는 많은 부분이 다른곳으로 이동했다고 한다

 

그래서 원래 Info.plist에 있던 내용들을 찾으려면 아래 방법으로 찾아보면 된다

Navigator에서 최상단에 있는 앱 클릭 > Main Editing Window에서 Info

 

기존에 이 파일은 어떤 역할을 했냐!

내가 만들고자 하는 앱의 이런저런 설정을 바꾸는 역할을 한다 ➡️ 근데 여기서 바로 변경하는 경우는 많이 없다지만..

 

현재는 Navigator에서 최상단 앱을 클릭하면 나오는 설정들로 앱의 settings를 변경한다고 함

 

---

 

<앱 이름>.swift

 

 

import SwiftUI 부분은 코딩 좀 해보신 분들은 다른데에서도 봤겠지만 프레임워크를 사용하겠다는 의미이다

그래서 말 그대로 SwiftUI 프레임워크를 사용하겠다 이거지

 

@main 은 해당 앱(프로젝트)의 메인 프로그램을 의미한다

14번째 줄의 ContentView()는 현재 ContentView.swift라는 파일을 보여준다는 의미이다

 

---

 

ContentView.swift

 

 

ContentView 는 현재는 별 코드가 없어서 아무것도 안 띄워져 있지만(Hello, World는 짤렸음..)

우측에 보여지는 코드를 구성하는 부분이다

View 관련해서는 추후에 더 자세히..(아마..)

 

ContentView_Preview 는 말 그대로 ContentView에 있는 것들을 우측에 Preview로 보여주는 부분

---

ContentView.swift

솔직히 처음에 개발 시작했을때부터 이렇게 자세히 배울 필요가 있을까..? 싶었지만

이 강의를 들으면서 어떤 코드가 왜 여기 있고 왜 이 역할을 하는지 알게 되니까

재미있기도 했고, 추후에 다른 사람이 쓴 코드를 이해할 때 더 쉽게 알 수 있게 될 것 같다

 

처음에 앱을 켰을 때 제일 메인으로 보이는 ContentView.swift 파일을 뜯어보자!

 

import SwiftUI

위에 적은 그대로 SwiftUI 패키지를 사용함을 나타낸다

SwiftUI를 사용하는 이유는 우리는 UI를 보여줄거기 때문이다!

그렇담 반대로 UI를 보여주지 않는다면? SwiftUI보다는 다른 프레임워크를 쓰겠지??

 

struct ContentView: View {
	var body: some View {
		Text("Hello, World")
			.padding()
	}
}

struct

다른 언어에서도 자주 보이는 struct ➡️ data structure의 struct이다

OOP와 유사하지만 OOP의 중요한 특성 중 하나인 Inheritance(상속)이 안되기 때문에 OOP는 아니다

struct는 Functional Programming 을 따른다

 

여기서,

Functional Programming Design Model은 주로 UI Code를 연결하는데 사용되는 Model,

Object Oriented Programming Design Model은 주로 모델과 로직 등을 UI에 연결하는데 쓰이는 Model이라고 한다

 

추가로 Functional programming에서는 data가 어떻게 저장되는지는 알려주지 않고,

어떤 데이터가 있는지, 이 struct 안에 어떤 데이터가 있어야 하는지 정도 알려준다고 함

 

고로 struct도 UI Code를 연결하는데 쓰이겠지?!

 

---

 

ContentView

현재 우리 View의 이름이다 ➡️ 추후에 앱을 개발해 나가면서 이름을 바꾸게 될 가능성이 농후하다고 하시네..

 

---

 

: View

우리가 만든 struct가 View의 역할임을 나타낸다

교수님 왈 "Functional programming에서 ‘How things behave’ 는 아주 중요함" 고로 이 부분 상당히 중요하다!

 

근데 교수님이 :View 라는 선언은 양날의 검이라고 하셨다..!

장점으로는 View라는 것 하나만으로 사용할 수 있는 다양한 함수들이 존재하다는 점이지만

단점으로는 View의 역할을 해야 한다는 점이다

즉, body라는 변수를 포함시켜야 함

 

이쯤에서 View란?

화면을 구성하는 직사각형 모형이고, 내부에 요소들을 보이게 할 수 있다

또, 유저로부터 tap, swipe, pinch 등의 입력을 받을 수 있으며

Investigator에서 View 내부의 요소들을 변경할 수도 있다

 

View에도 다양한 종류가 있는데, 두가지로 보자면

화면에 단독적으로 본인을 띄우는 View와 View들을 묶어내는 Combiner가 있다

 

---

 

var body: some View

ContentView가 View의 역할을 하려면, 이 변수가 꼭 필요하다

var은 variable / body는 variable의 이름 / : some View 는 variable의 타입을 의미한다

 

some View 부분은 말 그대로 ‘something that behaves like a View’

즉, 이후 함수( { ... } )에서 계산되어 반환된 값을 다양한 View 중 하나로 알아서 해석해서 body에 할당한다

 

---

 

{ ... }

이 부분은 함수이다.. 전혀 그렇게 생기지 않았지만..

지금은 입력받는 값도 필요 없고 함수 이름도 필요 없기 때문이다

심지어 앞에 return 도 생략되어 있어서 Text("Hello, World")를 반환하지만 이걸 설명 안듣고 어떻게 알지..

 

---

 

.padding()

이 부분은 View에서 사용할 수 있는 함수이다

얘는 View 주위에 공간(padding)을 주어 새로운 View를 반환한다

 

단, 여기서 주의해야 할점!

Text View에 .padding()을 붙인다고 같은 Text View를 반환하는건 아니다

위와 같은 예시에서도 반환되는 View는 Text View가 아니라 어떤 새로운 View를 반환한다

이 때문에 : some View 부분에도 특정 View를 지정하는게 아니라 'some' 이라는 키워드를 붙인다

따라서 이를 View Modifier라고 부르기도 한다!

 

어떤 함수는 특정 View에만 붙일 수 있는데, 이 때문에 여러 View Modifier를 사용할 때,

어떤것부터 쓸 지 순서를 잘 생각해서 사용해야 한다!!

---

ZStack

 

ZStack(alignment: <정렬방향>, content: {
	// 여러 다양한 View
})

Content는 { ... } 안에 여러 다양한 function을 매개변수로 전달할 수 있다

여러 View들을 하나의 View로 묶어 content에 전달하기 때문에 View Builder라고도 한다

 

Alignment는 ZStack을 어느 방향으로 정렬할지 설정하는 매개변수이다

 

ZStack은 content 내부의 여러 View들을 각각 바로 서로의 위에 쌓아 올릴 수 있게 한다

 

---

 

ZStack(content: {
    RoundedRectangle(cornerRadius: 25)
        .stroke(lineWidth: 3)
        .foregroundColor(.red)
    Text("Hello, world")
        .foregroundColor(.red)
})

ZStack(content: {
    RoundedRectangle(cornerRadius: 25)
        .stroke(lineWidth: 3)
    Text("Hello, world")
})
.foregroundColor(.red)

위 두 코드의 차이점을 보면, 아래 코드가 훨씬 짧다

View Combiner 내부에 모든 View들에 동일한 View Modifier가 적용되어 있으면,

그 View Modifier는 View Combiner에 붙여도 동일한 코드가 된다!!

 

또, 위 코드들은 아래와 같이 content: { ... }를 생략하고 작성해도 된다

ZStack {
    RoundedRectangle(cornerRadius: 25)
        .stroke(lineWidth: 3)
    Text("Hello, world")
}
.foregroundColor(.red)

굳이 이렇게 쓰는 이유는 미관 때문이라고...

---

아무튼 이정도가 첫번째 강의의 내용으로 이해했다

중간중간에 세세한 부분들도 있었지만, Swift를 공부하다보면 자연스레 알게 될 부분이라 생략한것도 있다

 

 

솔직히 학술 블로그 이렇게 쓰는게.. 맞나..?? 그냥 끄적끄적 했는데 맞겠지 뭐

다~ 개인의 개성이 들어가는거라고 생각~ ㅎㅎ

 

무튼 블로그 포스팅하는게 이렇게까지 기 빨리는 일인지는 몰랐는데...

다음엔 토, 일에 몰려서 올리기보단 틈틈이 시간 날 때 적어둬야겠다..

또 시간 괜찮으면 일상에 5월 3주차 올라갈수도?