[Stanford] 스유(SwiftUI)를 시작해 보자

UIKit도 배워야 할 것이 산더미지만.. 애플 아카데미 챌린지에서 SwiftUI를 활용해야 하기에 조금씩 공부를 시작해 보려고 한다.

여전히 근본은 UIKit이라 생각하고 공부 비중 또한 UIKit에 많이 둘 예정이지만..

새로운 언어나 프레임워크를 배우는 것에 소극적인 태도는 좋은 개발자가 되기 위한 과정과 거리가 있다고 생각하기에

즐거운 마음으로 임하려고 한다 :)

 

다양한 강의들이 있지만 우선 스탠포드 대학교에서 제공하는 Stanford CS193p 강의를 통해 시작할 예정이다.

(네임벨류가 있으니.. 믿음직스럽기 때문)

 

어차피 UIKit을 사용하며 익혔던 개념들이 많이 등장할 거 같으니 그때그때 비교해가며 공부하는 것도 좋을듯하다.

 

1강부터 가보자.

https://www.youtube.com/watch?v=jbtqIBpUG7g&list=PLpGHT1n4-mAtTj9oywMWoBx0dCGd51_yG&index=14 

Swift, 함수형 프로그래밍, 프로토콜 지향 프로그래밍, 반응형 유저인터페이스 개발 패러다임(MVVM 포함), 객체 지향 DB , 선언형!

 

새로운 프로젝트를 만들면 이와 같은 구성을 보여준다.

오.. 이게 말로만 듣던 프리뷰인가.. 스토리보드랑 느낌이 비슷하다. 

PreviewProvider 프로토콜을 채택한 구조체로 만들어져 있다.

 

import UIKit만 하다가 import SwiftUI(패키지, 프레임워크)를 하니까 어색하다..ㅋㅋ

 

ContentView는 View 그 자체라기 보다는 'View처럼' 동작하는 것이다. 

import SwiftUI

struct ContentView: View { //프로토콜 View 채택
    
    var body: some View {
    	Text("Hello, SwiftUI!")
    }
}
    
    // some은 뭐지? 이 변수의 타입은 
    // 뷰 처럼 동작하는 한에서 any type, any struct
    // 이 안에서 여러 코드를 작성(텍스트, 이미지, 뷰 등..)하면 이거를 한 데 모은다고 생각하면 될듯
    // 접착제?로 비유를 들어서 설명을 해주셨다. (View Combiner)
    
    // 그리고 body는 계산 속성이다.(위 예시 코드에서는 get 블럭만 구현되어 있음)
    // return Text("Hello, SwiftUI!")도 되지만 한 줄이라 return 생략된 것일 뿐
	// 텍스트가 뷰처럼 동작하는거임 ㅋㅋ
    // 스트링 리터럴을 생성자에 넣고 있지? Text("리터럴")

 

HStack, VStack, ForEach등을 사용하며 뷰를 그려봤는데..

고차함수도 등장하고 trailing closure 문법 최적화 개념도 나온다.

확실히 swift나 UIKit에 대한 개념이 없으면 굉장히 어렵게 느껴지지 않았을까.. 하는 느낌이 든다. 

아래는 오늘 그려본 화면과 해당 코드들이다 :)

UIKit과 완전 달라서 재밌기도 한데.. (확실히 더 쉬운 느낌은 있다.)

언제 스유의 시대가 올 지는 미지수 🤔

//
//  ContentView.swift
//  MemorizeGame_SwiftUI
//
//  Created by Toughie on 2023/03/20.
//

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        HStack {
            Text("신기하네 ㅋㅋ")
            //보통 배열이 들어가지만.. 예시로 Range 사용
            ForEach(0..<4) { index in
                //트레일링 클로저 문법 최적화
                // ForEach(0..<4, contents: { ... } )
                // 첫 번째 argument가 없으면 ()도 생략 가능
                CardView(isFaceUp: true)
            }
        }
        .padding()
        .foregroundColor(.orange)
        .font(Font.largeTitle)
        //여기에 작성하면 ZStack 안의 요소들에 전부 적용됨
        
        

    }
}

struct CardView: View {
    var isFaceUp: Bool = true
    var body: some View {
        ZStack {
            /*
             ZStack은 종이를 쌓는 것처럼 위에 child 뷰들을 쌓는
             container view이다.
             X,Y축이 아닌 Z축 즉 차원이 있는 것.(쌓으니까)
             마지막에 작성된 뷰가 맨 위로 감
             offset으로 child뷰의 포지션을 변경할 수 있고,
             alignment 파라미터를 통해 정렬을 할 수 있음.
             */
            if isFaceUp {
                RoundedRectangle(cornerRadius: 10).fill(.white)
                RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 3)
                /*stroke는 shape의 외곽선을 그리는 modifier임
                 .stroke(Color:, lineWidth:)
                 즉 컬러와 두께 두가지 파라미터를 가지는데,
                 아무 파라미터도 넣지 않으면 디폴트로 1포인트 두께의 검은
                 외곽선이 그려짐
                 */
                Text("👻")
            } else {
                RoundedRectangle(cornerRadius: 10).fill()
            }
        }
    }
}





struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}