atomicdev 님의 블로그

제4강: React Native/Flutter 기본 구조 이해학습 목표:이번 강의에서는 React Native 또는 Flutter를 사용해 모바일 애플리케이션을 개발하기 위한 기본 구조와 핵심 컴포넌트를 이해하는 것이 목표입니다. 여러분은 React Native의 JSX 구조 및 컴포넌트에 대해 배우거나, Flutter의 위젯 시스템을 이해하게 될 것입니다. 또한, 상태 관리(State Management)와 props 개념을 학습하고, 간단한 UI 컴포넌트를 생성하는 실습을 통해 학습한 내용을 적용해볼 것입니다.1. React Native의 JSX 구조 및 컴포넌트 소개1.1 JSX란 무엇인가?JSX(JavaScript XML)는 React Native에서 사용하는 특별한 문법으로, JavaScript..

10강: Flutter와 Bootstrap을 결합한 UI 디자인내용 요약Flutter 위젯과 Bootstrap 컴포넌트를 결합하여 UI 구성:Flutter는 강력한 위젯 기반 프레임워크로, 모바일, 웹, 데스크탑에서 동일한 코드를 사용하여 UI를 구성할 수 있습니다.Bootstrap은 HTML, CSS 기반의 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 컴포넌트를 제공합니다.이 강의에서는 Flutter 위젯과 Bootstrap 컴포넌트를 함께 사용하여 UI를 디자인하는 방법을 학습합니다. Flutter의 위젯을 사용하면서 Bootstrap의 그리드 시스템과 스타일링을 적용하여 웹에서 유연한 UI를 만들 수 있습니다.두 가지 기술을 혼합하여 유연한 UI 디자인 구현:Flutter의 기본 ..

9강: Flutter의 레이아웃 위젯 - Column과 Row내용 요약Flutter의 레이아웃 위젯인 Column과 Row 소개:Column과 Row는 Flutter의 주요 레이아웃 위젯으로, 각각 수직 및 수평 방향으로 위젯을 배열하는 데 사용됩니다.Column: 위젯들을 세로로 정렬합니다. 주로 텍스트, 이미지, 버튼 등을 세로로 쌓을 때 사용됩니다.Row: 위젯들을 가로로 정렬합니다. 주로 버튼, 아이콘, 텍스트 등을 가로로 나란히 배치할 때 사용됩니다.이 두 위젯은 자식 위젯들을 배열하는 방식에 유연성을 제공하며, mainAxisAlignment, crossAxisAlignment와 같은 속성을 사용하여 레이아웃의 정렬과 간격을 조절할 수 있습니다.위젯을 사용한 레이아웃 구성 방법:Column과 ..

7강: Flutter 위젯 기초 - Text와 Image 위젯내용 요약Flutter에서 가장 많이 사용되는 기본 UI 위젯 소개:Flutter 위젯은 Flutter 애플리케이션의 모든 UI 요소를 구성하는 기본적인 빌딩 블록입니다.Flutter에서 가장 많이 사용되는 기본 위젯으로는 Text와 Image 위젯이 있습니다. 이 위젯들은 텍스트와 이미지를 화면에 표시하는 데 사용됩니다.Text와 Image 위젯의 사용법:Text 위젯:텍스트를 화면에 표시하기 위한 위젯입니다. 다양한 스타일을 적용할 수 있으며, 텍스트 정렬, 색상, 폰트 크기 등을 조정할 수 있습니다.기본적인 사용법:dartText( 'Hello, Flutter!', style: TextStyle(fontSize: 24, color: C..