atomicdev 님의 블로그

제5강: 첫 번째 화면 - 게임의 메인 화면 구현학습 목표:이번 강의에서는 "BrainBox Delivery" 게임의 메인 화면을 구현하는 방법을 학습합니다. 여러분은 기본 레이아웃을 구성하고, 화면 전환(Navigation)을 설정하며, 메인 메뉴와 게임 시작 버튼을 구현하는 과정을 거치게 됩니다. 이 과정에서 Flexbox 또는 Column/Row 위젯을 사용하여 화면을 구성하고, 사용자 경험을 개선할 수 있는 UI 요소를 추가하게 됩니다.1. 기본 레이아웃 구성: Flexbox 또는 Column/Row 위젯 사용게임의 메인 화면을 구성하기 위해서는 먼저 레이아웃을 설계해야 합니다. React Native에서는 Flexbox를, Flutter에서는 Column/Row 위젯을 사용하여 레이아웃을 구성할..

제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..

제3강: 프로그래밍 언어 기초학습 목표:이 강의에서는 React Native나 Flutter로 게임을 개발하기 위해 필수적인 프로그래밍 언어의 기본 문법과 객체지향 프로그래밍(OOP)의 핵심 개념을 학습합니다. 여러분은 자바스크립트(JavaScript) 또는 다트(Dart)를 선택하여 해당 언어의 기초를 다지고, 객체지향 프로그래밍의 원리를 이해하며, 간단한 콘솔 애플리케이션을 작성해 볼 것입니다.1. 자바스크립트 또는 다트 기본 문법 학습프로그래밍을 시작하기 전에 선택한 언어의 기본 문법을 이해하는 것이 중요합니다. React Native를 선택했다면 자바스크립트를, Flutter를 선택했다면 다트를 학습하게 됩니다.1.1 자바스크립트 기본 문법자바스크립트는 웹과 모바일 앱 개발에서 널리 사용되는 언어..

제2강: 개발 환경 설정학습 목표:이 강의에서는 모바일 앱 개발을 위한 환경을 설정하고, 첫 번째 프로젝트를 생성하는 방법을 배우게 됩니다. 여러분은 React Native 또는 Flutter 중 하나를 선택하여 설치하고, Android Studio 및 iOS 시뮬레이터를 설정한 후, 첫 번째 크로스 플랫폼 앱을 실행하고 빌드할 것입니다.1. 개발 환경 구축React Native 또는 Flutter 설치개발 환경을 설정하려면 먼저 React Native 또는 Flutter를 설치해야 합니다. 두 프레임워크 중 하나를 선택하여 설치 방법을 따라 진행하세요.1.1 Node.js 및 npm 설치 (React Native 사용자용)React Native를 사용하려면 먼저 Node.js와 npm(Node Pack..

13강: 버튼과 클릭 이벤트 처리내용 요약Flutter에서 버튼 생성 및 클릭 이벤트 처리 방법:Flutter에서 버튼은 사용자의 상호작용을 처리하는 중요한 UI 요소입니다. 다양한 버튼 위젯이 있으며, 각 버튼은 고유한 스타일과 기능을 제공합니다.버튼 클릭 시 특정 동작을 수행하도록 설정할 수 있으며, 이를 위해 onPressed 콜백 함수를 사용합니다. 사용자가 버튼을 클릭하면 onPressed에 정의된 함수가 실행됩니다.다양한 종류의 버튼 사용법:ElevatedButton: 일반적인 버튼으로, 눌렀을 때 높이감이 있는 효과를 줍니다.TextButton: 텍스트로만 이루어진 버튼으로, 클릭 가능한 링크처럼 보입니다.OutlinedButton: 외곽선만 있는 버튼으로, 텍스트 버튼과 유사하지만 테두리가..

12강: Bootstrap 폼 디자인 및 연동내용 요약Bootstrap을 사용한 폼 디자인:Bootstrap은 웹에서 폼을 디자인할 때 유용한 CSS 클래스를 제공합니다. 간결하고 반응형 폼을 쉽게 만들 수 있으며, 다양한 입력 필드, 버튼, 레이아웃 옵션을 제공합니다.Bootstrap 폼 구성 요소:form-group: 폼 필드를 그룹화하는 클래스.form-control: 텍스트 입력 필드, 선택 상자 등의 스타일링을 위한 클래스.form-check: 체크박스와 라디오 버튼의 스타일링을 위한 클래스.btn: 버튼 스타일링을 위한 클래스.Flutter와의 연동 방법:Flutter 웹 프로젝트에서 Bootstrap을 활용하여 폼을 디자인한 후, 사용자 입력을 처리할 수 있습니다.Bootstrap 폼을 Ht..

11강: 사용자 입력 처리 - TextField와 Form 위젯내용 요약Flutter에서 TextField와 Form 위젯을 사용한 사용자 입력 처리:TextField는 Flutter에서 사용자 입력을 처리하기 위해 사용되는 기본 위젯입니다. 사용자가 텍스트를 입력할 수 있는 필드를 제공하며, 입력된 데이터를 실시간으로 처리할 수 있습니다.Form 위젯은 여러 입력 필드(TextField)를 그룹화하고, 유효성 검증 및 입력 데이터 관리를 쉽게 할 수 있도록 도와줍니다. Form은 폼 전체에 대해 유효성 검증을 수행할 수 있습니다.입력 유효성 검증 및 제출 처리:유효성 검증은 사용자가 입력한 데이터가 올바른지 확인하는 과정입니다. Flutter에서는 Form 위젯과 TextFormField 위젯을 사용하..

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..