[에이블런] [AI 스타트업 유니버시티] 0719 TIL

FlutterFlow 개요

FlutterFlow는 드래그 앤 드롭 방식의 비주얼 앱 개발 플랫폼으로, 구글의 Flutter 프레임워크를 기반으로 한다. 이 플랫폼은 개발자가 적은 코드로 또는 코드 없이 모바일 및 웹 애플리케이션을 빠르게 구축할 수 있도록 설계되었다.

주요 특징들

• 비주얼 인터페이스: 65개 이상의 미리 만들어진 위젯을 사용하여 앱의 레이아웃과 기능을 쉽게 추가한다.
• 통합 기능: Firebase, Stripe, PayPal과 같은 다양한 외부 서비스 및 API와 쉽게 통합하여 사용자 인증, 데이터베이스 관리, 결제 시스템 등을 구현한다.
• 응답형 디자인: 다양한 화면 크기와 방향에 자동으로 적응하여 iOS, Android, 웹에서 일관된 사용자 경험을 제공한다.
• 코드 내보내기: 필요한 경우 Flutter 코드로 프로젝트를 내보내어 전통적인 코드 편집기에서 추가 작업을 수행할 수 있다.
• 협업 도구: 여러 사용자가 동시에 프로젝트에 참여할 수 있어, 큰 팀이나 다양한 이해관계자의 입력이 필요한 프로젝트에 유용하다.

장단점

• 장점: 빠른 앱 개발, 저코드/무코드 접근 방식, 시각적 인터페이스 및 실시간 미리보기, 백엔드 통합 간소화.
• 단점: 고도로 사용자 정의된 UI 디자인이 필요할 때 제한된 사용자 정의 옵션, FlutterFlow에 대한 의존도, 복잡하거나 전문화된 기능의 구현 제한.

상태 관리

앱 개발에서 상태 관리는 애플리케이션의 데이터를 조직하고 유지하는 중요한 프로세스다.

• 상태 관리의 중요성: 상태 관리는 앱이 사용자 입력에 빠르고 일관되게 반응하도록 하며, 데이터의 중앙 집중식 저장소를 통해 데이터 접근 및 수정을 용이하게 한다. 또한, 애플리케이션의 디버깅을 용이하게 하고, 다수의 개발자가 협력하는 경우 코드 혼란을 줄이는 데 도움을 준다.

상태 관리 기법

• 로컬 상태와 글로벌 상태: 로컬 상태는 특정 컴포넌트에 한정된 데이터, 글로벌 상태는 애플리케이션 전반에 걸쳐 공유되는 데이터다.
• Redux: 애플리케이션의 상태를 중앙에서 관리하는 라이브러리로, 액션과 리듀서를 통해 상태 업데이트를 관리한다. 예측 가능한 상태 관리를 가능하게 하며, 큰 규모의 애플리케이션에 적합하다.
• MobX: 상태의 변경을 자동으로 감지하고 반응하는 라이브러리로, 선언적이고 유연한 상태 관리를 제공한다.
• React Context API: 글로벌 상태 관리에 사용되며, 각 컴포넌트 수준에서의 prop 전달 없이 상태를 공유할 수 있게 한다.

API 키

API 키는 애플리케이션 프로그래밍 인터페이스(API)에 액세스할 때 사용되는 코드 조각으로, 사용자 또는 애플리케이션의 신원을 확인하는 데 사용된다.

• API 키 사용 방법: API 키는 HTTP 요청의 헤더 또는 URL의 일부로 전송되며, 서버는 이 키를 받아 신원을 확인하고 요청에 대한 액세스 권한을 결정한다.

 

플러터플로우

https://ttrhtt12.tistory.com/135

FlutterFlow Learning 0720(토)

 

기본 개념

• 열 위젯 (Column): 자식 위젯을 세로로 정렬한다.
• 행 위젯 (Row): 자식 위젯을 가로로 정렬한다.
• 쌓기 위젯 (Stack): 위젯을 서로 겹쳐서 배치한다.

고급 레이아웃

• 부모 위젯 (Layout): 항상 최상위에 있어야 하며, 레이아웃 위젯 내에 다른 레이아웃 위젯을 상속할 수 있다.

FlutterFlow 상세 노트

• ListView: 화면 크기를 초과하는 레이아웃에서 스크롤 가능하게 한다.
• Container: 간단한 스타일링과 레이아웃 조정에 사용되며, 속성 변경에 따라 암시적 애니메이션이 작동되도록 설정할 수 있다.
• 앱 상태 (AppState): 서버와 디바이스 양쪽에 데이터를 저장할 수 있다. 중요하거나 복잡한 데이터는 보안 문제로 인해 일반적으로 디바이스에 저장하지 않는다.
• 스크롤 가능 위젯:
  • 수평 스크롤 (Column): 컬럼 레이아웃 내에서 수평 스크롤을 가능하게 한다.
  • 수직 스크롤 (Column): 컬럼 레이아웃 내에서 수직 스크롤을 가능하게 한다.
• Stack: 위젯을 중첩하여 배열한다.
• Card 및 ListView Widget: 리스트 형태로 아이템을 표시한다. 사용자 데이터 리스트에 자주 사용된다.
• GridView: 데이터 아이템을 격자 형태로 표시하는 데 유용하다.
• SpaceWidget: 사용 가능한 모든 공간을 차지한다(주 축 크기와는 무관함).
• DividerWidget: 위젯을 시각적으로 분리하며, 두께와 들여쓰기를 설정할 수 있다.
• TabBar Widget: 탭 간에 전환할 수 있는 탐색 구성 요소를 제공한다. 스타일 사용자 정의, 초기 탭 인덱스 설정, 스와이프 시 페이지 업데이트 등의 기능이 포함된다.
• PageWidget: 페이지 관리와 버튼 클릭과 같은 작업을 처리한다.
• Expandable Widget: 내용의 가시성 상태를 관리하며, 확장 및 축소된 뷰 사이를 전환할 수 있다.

상호 작용 및 탐색

• 버튼 상호 작용: 일반적으로 위젯 크기를 늘리거나 다른 페이지 간의 전환을 처리한다.
• Expandable Widget: 내용을 확장하거나 축소할 수 있는 섹션을 관리한다.