CS193P 1편,2편 요약

내가 지금 스위프트 UI로 개발하는 중인데, 내부 코드가 어떻게 돌아가는지 그 동작이 궁금한 것들이 많아서 강의를 들어볼까 고민했다.

그러던 중 친구가 CS193P 강의를 극찬을 하길래 봤는데 1시간 30분 정도 16개 강의라 별로 많지 않은 것 같아 호다닥 들어보고자 했다.

https://www.youtube.com/watch?v=bqu6BquVi2M&list=PLpGHT1n4-mAsxuRxVPv7kj4-dQYoC3VVu&index=2&t=1296s 

Lecture 1: Getting started with SwiftUI

 

1. struct ContentView: View는 View 특성을 가진 ContentView라는 이름의 구조체라는 것,

이렇게 명시화 해주는 것은 함수형프로그램에서 출발함, 함수형 프로그래밍에서는 요소의 동작방식이 어떻게 되는지 명시화하는 것이 중요함, 또한 View는 내부의 body라는 some View를 채워줘야하는 의무를 가짐, view는 화면에 표시할 수 있는 기능을 가짐 

2. some View는 내부 함수의 뷰들이 여럿 존재하고 이것을 접합하기 위함을 명시하는 것 

swiftui는 레고처럼 조립되는데, body안에 여러 레고 조각, 레고모음들이 조합되는 형태라는 것을 의미

3.  ZStack(alignment :, content :{})에서 {} 는 함수를 뜻하고, 대다수 return을 보여주지 않고 그냥 사용함

:더 깔끔하게 코드가 보이기 위해 + 그중 함수형 속성들은 ZStack(alignment :, content :{})이 아니라 Zstack(alignment : ) {}로 표현 가능

4. 스위프트는 Object-C에서 물려내려오는 레이블이 있는데, 그 레이블로 정확한 뷰를 만드는데 도움이 되는 속성들을 명확히 정의함

5. .padding등의 .으로 시작하는 것들 중 일부는 구조체에 붙일 수 있는 함수임

 

Lecture 2: Learning more about SwiftUI

https://www.youtube.com/watch?v=3lahkdHEhW8&list=PLpGHT1n4-mAsxuRxVPv7kj4-dQYoC3VVu&index=2 

6. body안은 코드를 최대한 적게, 레고블록 묶음의 이름만 표시하게 해야함

그래서 구성해야 하는 view가 있다면 struct로 빼야 함 + 공통적인 뷰가 있다면 하나의 struct를 만들어서 재사용하기 

 

7. 어떤 조건에 따라 UI가 변경된다면, 변수를 활용함

onTapGesture()을 사용해서 카드를 눌렀을때 카드가 뒤집히게 하려고 하면, @State로 isTapped : Bool라는 변수를 만들어서 tapgesture를 실행했을때 isTapped = !isTapped 되게 해서, if에 따라 보여지는 뷰가 다르게 해줘야 함 

@State는 변경하는 것에 따라 UI를 변하게 하는 요소일때 @State를 붙여줘야 함 

8. 모든 변수는 값이 있어야 함(옵셔널인 경우 말고) 

그래서 만약에 body를 구성하려는 struct 안에 초기값이 없는 변수가 있다면, 그 변수를 선언하려고 할때, 변수 값을 넣어줘야 함

CardView(isFaceUp : true) 등 

9. 어떤 뷰를 데이터만 다르게 여러개를 만들 경우 ForEach를 사용할 수 있음

여기서 0...emojiCount는 범위를 나타내고

id : \.self는 ForEach로 만들어진 값이 서로 구별되어야 하기 때문에 emoji 텍스트로 구별해줌(이것이 \.self), 그래서 만약에 같은 이모지가 있을 경우 같은 요소로 인식하긴 함 

파이썬으로 치환했을때 for emoji in emojis[0...emojiCount] 라고 볼 수 있음 

10. 버튼 같은 경우에도 var로 따로 만들어서 body 안에 넣을 수 있음 

11. Spacer()는 빈 공간을 차지하려고 하는데, 최대한 차지할 수 있는 가장 큰 공간을 차지하고자 함

mininum을 줄수는 있음 

12. index의 범위를 벗어나면 오류를 내게 됨, 그래서 가능 범위를 명확하게 한 후 동작하게 해야 함 

13. grid를 만들때는 lazyGrid + ScollView를 사용하면 됨

이때 columns에는 숫자가 아닌 GridItem()을 줘야지, 각 열마다 특성을 지정해줄 수 있음 

lazy는 모든 데이터를 다 로딩하고 기다리는 것이 아니라, 화면에 보여지는 뷰만 로딩해 놓음 - 만약에 100개의 아이템이 있고, 5개만 화면에 보인다고 할때 5개씩만 로딩하는 것임

14 . 그리드는 세로, 가로 방향에 모두 영향을 받기 때문에 그리드가 구성되는 너비는 컨텐츠 너비에 따름,

하지만 원하는 뷰 비율이 따로 있다고 할때 aspectratio를 사용하면 됨, 그리고 어느정도 사이즈 있게 하고 싶을때. GridItem(.adaptive(minimun : 65))를 하면 됨 

15. Stroke와 StrokeBorder는 다름 

stroke는 뷰 외부에 stroke를 그리는데, StrokeBorder는 뷰 내부에 stroke를 그리는거라 안짤림 

 

----

1,2편만 봤는데 앱 개발하는 법 다 알게 된 느낌ㅎㅎㅎ

예전에 본 패캠 30개 프로젝트를 봤다가 이걸 보니까, 적어도 강의에서 무슨 말을 하는지 알고, 다 메모하지 않고 중요한 것만 메모해도 될 정도로 성장했다는 것이 느껴진다. 

그리고 지금 만들고 있는 프로젝트를 리팩토링할 거리도 좀 있을 것 같아서, 지금 프로젝트를 리팩토링하고 나서 다시 강의를 들어봐야 겠다.

다음 강의는 MVVM이던데 정말 기대가 된다.