공부하는 이오

In SwifUI SwiftUI에서, view의 내부에서 state를 관리하기 위해 @State라는 property wrapper를 사용한다. struct ContentView: View { @State private var counter = 0; var body: some View { VStack{ Button("+") { counter+=1 } Text(String(counter)) } }} 또한, 더 복잡한 상태 관리를 위해 여러 옵션들이 있는데, 예를 들어, ObservableObject라는 protocol이 있다. In Flutter Flutter에서 local state를 관리하기 위해 StatefulWidget을 사용한다. 다음 두 종류의 class로 stateful widget을 구현한다...

Responsive and adaptive design Responsive design은 무엇일까? Responsive는 '즉각 반응하는'이라는 의미이다. Responsive web design은 반응형 웹 디자인으로, 하나의 웹 사이트가 접속하는 디스플레이 종류에 따라 반응하여 화면의 크기가 자동으로 바뀌는 디자인이다. 그렇다면 Adaptive design은 무엇일까. Adaptive design is a user interface that's adapted to different screen sizes. 다양한 스크린 크기에 맞춰 바뀌는 UI이다. Adaptive web design은 적응형 웹 디자인으로, 웹에 접근한 디바이스를 체크하여 그 디바이스에 최적화된 미리 정해둔 웹을 보여주는 디자인이다...

In SwiftUI SwiftUI에서는 스크롤하는 페이지를 만들기 위해 ScrollView를 사용한다. 아래 코드에서 persons를 스크롤하며 볼 수 있도록 했다. 지난번에 다루었던 VStack을 사용했고, stack 내부의 components는 왼쪽 정렬하기 위해 alignment를 .leading으로 설정했다. ScrollView { VStack(alignment: .leading) { ForEach(persons) { person in PersonView(person: person) } } } In Flutter Flutter에서 scroll view를 만들기 위해서는 SingleChildScrollView를 사용한다. mockPersons라는 임의로 사람들 list를 생성하고, 각 person에..

Displaying a grid SwiftUI에서 non-conditional grids를 만들 때, GridRow와 함께 Grid를 사용한다. Grid { GridRow { Text("Row 1") Image(systemName: "square.and.arrow.down") Image(systemName: "square.and.arrow.up") } GridRow { Text("Row 2") Image(systemName: "square.and.arrow.down") Image(systemName: "square.and.arrow.up") } } Flutter에서 grids를 표시하려면, GridView widget을 사용한다. GridView는 다양한 constructors를 가지고 있는데, 각각은 ..

Displaying a list view SwiftUI에서 item을 list로 보여주기 위해 List를 사용한다. Model objects를 화면에 표시하기 위해 model objects를 식별할 수 있어야 한다(Being able to identify). 이때, Identifiable protocol을 사용한다. (공식 문서의 예시 코드에서는 Identifiable protocol을 사용한 Person struct가 id를 가지고 있지 않아 오류가 날 수 있다. Identifiable을 따르기 위해서는 각각이 구별가능하도록 id를 사용해주어야 한다.) struct Person: Identifiable { var id = UUID() var name: String } struct ListWithPers..

Aligning components horizontally SwiftUI에서는 stack view가 layout에 큰 부분을 차지한다. HStack은 horizontal stack이고, VStack은 vertical stack이다. Image와 text을 수직으로 두고 싶을 때, 아래와 같이 HStack을 이용하면 된다. HStack { Image(systemName: "globe") Text("Hello, world!") } Flutter는 대신에 Row를 사용한다. Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Icon(CupertinoIcons.globe), Text('Hello, world!'), ], ), Row 위젯은 ..

Buttons SwiftUI에서 버튼을 만들기 위해서 Button struct를 이용하면 된다. Button("Do something") { // this closure gets called when your // button is tapped } Button을 만들고 iPhone 14 Pro Max 시뮬레이터로 build 한 모습니다. Flutter에서 똑같이 만들려면, CupertinoButton class를 이용하면 된다. CupertinoButton( onPressed: () { // This closure is called when your button is tapped. }, child: const Text('Do something'), ) Flutter는 다양한 버튼이 이미 정의되어 있고, ..

앞에서 Flutter와 SwiftUI의 개요와 구성에 대한 이야기를 했다면, 오늘부터는 UI development의 기초를 이야기할 예정이다! Getting started SwiftUI에서는 앱을 시작하기 위해 App을 이용한다. @main struct MyApp: App { var body: some Scene { WindowGroup { HomePage() } } } 그리고 app의 body를 View protocol을 따르는 struct에 둔다. struct HomePage: View { var body: some View { Text("Hello, World!") } } Flutter는 runApp 함수에 나의 app의 instance를 넘긴다. void main() { runApp(const M..

SwiftUI Layout Process SwiftUI는 하위 View의 크기에 따라 상위 View의 크기가 정해진다. 모든 하위 View는 각각의 하위 View에게 크기를 제안하고, 하위 View에게 원하는 크기를 묻는다. Each parent view renders its child view at the returned size. Flutter Layout Process Flutter는 상위 widget의 제약이 하위 widget으로 전달된다. 제약 조건은 높이와 너비의 최솟값, 최댓값이 포함된다. 하위 widget은 자신의 크기를 정할 때, 자신의 하위 widget과 아래 process를 모두 반복한다. 하위 widget에게 그 제약조건을 알린다. 하위 widget에게 어떤 크기를 원하는지 묻는다...

SwiftUI 개발자를 위한 Flutter 그동안 SwiftUI를 공부하다가 Flutter를 공부하기 시작했다. 마침 Flutter 공식문서에 다른 플랫폼에서 온 개발자를 위한 Flutter 가이드가 있었고, SwiftUI 개발자를 위한 Flutter 내용을 정리해보려고 한다! Overview Flutter와 SwiftUI는 UI가 어떻게 생겼는지, 어떻게 작동하는지를 묘사한다. 이러한 코드를 declarative framework, 즉 선언적 프레임워크 라고 한다. Views vs. Widgets SwiftUI는 View로 UI를 표현하고, modifiers로 그 View를 구성한다. Text("Hello, World!") //