후원하기
콘텐츠가 도움이 됐다면
커피 한 잔의 후원을 부탁드려요 :)
커피 한 잔의 후원을 부탁드려요 :)
이현호
카카오페이
"Hello World"를 앱에서 보고 싶다
struct ContentView: View {
var body: some View {
Text("Hello, World!")
.font(.largeTitle)
.foregroundStyle(.orange)
}
}
some View에서 some을 빼면 어떤 에러가 나는가? 왜 필요한가?#Preview와 시뮬레이터 빌드의 차이는 무엇인가?VStack(spacing: 16) {
Text("개발자리")
.font(.title)
.bold()
Image(systemName: "star.fill")
.font(.system(size: 40))
.foregroundStyle(.yellow)
Button("시작하기") {
print("탭!")
}
.buttonStyle(.borderedProminent)
}
Text("Hello").font(.title).bold()에서 .font()과 .bold()의 순서를 바꾸면 결과가 달라지는가?Image(systemName:)과 Image("이미지이름")의 차이는 무엇인가?Button의 action 클로저 안에서 print()를 호출하면 Preview에서 출력을 볼 수 있는가?VStack(spacing: 20) {
HStack {
Text("왼쪽")
Spacer()
Text("오른쪽")
}
.padding()
.background(.gray.opacity(0.1))
.cornerRadius(8)
ZStack {
RoundedRectangle(cornerRadius: 12)
.fill(.blue.opacity(0.15))
.frame(height: 60)
Text("ZStack 겹침")
}
}
VStack(alignment: .leading)에서 alignment를 생략하면 기본값은 무엇인가?HStack 안에 Spacer()를 넣으면 어떻게 되는가? 두 개 넣으면?.padding().background(.blue) vs .background(.blue).padding() 결과는 왜 다른가?VStack(spacing: 12) {
Text("고정 크기")
.frame(width: 120, height: 40)
.background(.orange.opacity(0.2))
.cornerRadius(8)
Text("최대 너비")
.frame(maxWidth: .infinity)
.padding()
.background(.blue.opacity(0.15))
.cornerRadius(8)
}
.frame(width: 200)은 뷰 자체의 크기를 바꾸는 것인가, 뷰를 감싸는 프레임의 크기를 바꾸는 것인가?maxWidth: .infinity는 어떤 상황에서 쓰는가? 버튼을 화면 전체 너비로 만들려면?.frame() 안의 alignment 파라미터는 무엇을 정렬하는가?VStack {
Spacer()
Text("가운데 정렬")
.padding()
.background(.orange.opacity(0.15))
.cornerRadius(8)
Spacer()
}
padding()에 값을 안 주면 기본 여백은 몇 pt인가?Spacer()는 Stack 밖에서도 동작하는가?.offset(x: 20)과 .padding(.leading, 20)의 결정적 차이는 무엇인가?GeometryReader { geo in
HStack(spacing: 0) {
Color.orange
.frame(width: geo.size.width * 0.3)
Color.blue
}
}
.frame(height: 60)
.cornerRadius(12)
GeometryReader를 쓰면 왜 레이아웃이 예상과 다르게 변하는가?@main
struct MyApp: App {
@Environment(\.scenePhase) var phase
var body: some Scene {
WindowGroup {
ContentView()
}
.onChange(of: phase) { _, newPhase in
switch newPhase {
case .active:
print("앱 활성 — 화면 앞에 있음")
case .inactive:
print("비활성 — 전환 중")
case .background:
print("백그라운드 — 화면 뒤")
@unknown default: break
}
}
}
}
// View Lifecycle
struct HomeView: View {
var body: some View {
Text("홈")
.onAppear {
print("화면 나타남 — 데이터 로드")
}
.onDisappear {
print("화면 사라짐 — 타이머 정지")
}
}
}
@main을 두 개의 struct에 붙이면 어떻게 되는가?.onAppear는 View가 화면에 나타날 때마다 매번 실행되는가?// 부모가 크기 제안 → 자식이 결정
VStack {
Text("padding 먼저")
.padding()
.background(.orange.opacity(0.2))
Text("background 먼저")
.background(.blue.opacity(0.2))
.padding()
}
struct ProfileCard: View {
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 20)
.fill(.orange.opacity(0.1))
VStack(spacing: 12) {
Image(systemName: "person.circle.fill")
.font(.system(size: 60))
.foregroundStyle(.orange)
Text("홍길동")
.font(.title2)
.bold()
HStack {
Image(systemName: "swift")
Text("iOS 개발자 지망생")
.font(.subheadline)
.foregroundStyle(.secondary)
}
}
.padding(24)
}
.frame(maxWidth: .infinity)
.padding()
}
}
VStack(spacing: 30) {
// padding 먼저 → 여백 포함한 영역에 배경
Text("padding → background")
.padding()
.background(.orange.opacity(0.3))
.cornerRadius(8)
// background 먼저 → 텍스트 크기만큼만 배경
Text("background → padding")
.background(.blue.opacity(0.3))
.padding()
.cornerRadius(8)
}
// modifier는 안→바깥 순서로 적용된다.
// .padding()이 먼저 오면 여백이 생긴 뒤 배경이 칠해지고,
// .background()가 먼저 오면 텍스트 크기만큼만 배경이 칠해진다.
struct WeatherCard: View {
var body: some View {
GeometryReader { geo in
ZStack {
LinearGradient(
colors: [.blue, .cyan],
startPoint: .top,
endPoint: .bottom
)
.cornerRadius(20)
VStack(spacing: 8) {
Text("서울")
.font(.title2).bold()
.foregroundStyle(.white)
Image(systemName: "sun.max.fill")
.font(.system(size: 48))
.foregroundStyle(.yellow)
Text("24°")
.font(.system(size: 56,
weight: .thin))
.foregroundStyle(.white)
}
}
.frame(width: geo.size.width * 0.9,
height: 200)
.frame(maxWidth: .infinity)
}
.frame(height: 200)
.padding()
}
}
