하몬드의 개발블로그

프로젝트 요구사항 위처럼 크게 3가지 요소로 요구사항을 정리할 수 있다. 전체 목록 화면 구현 폴더구조 list_screen: 이미지와 책제목이 나열된 도서목록을 출력하는 화면 detail_screen: 책을 클릭하면 나오는 해당 책에 관한 세부정보를 출력하는 화면 화면 확인 import 'package:flutter/material.dart'; import 'package:flutter_application_1/screens/list_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your applica..

상태(State)란? '상태'는 변할 수 있는 데이터이다. 이 데이터가 변할 때 화면 자체가 다시 빌드되는 것이 아닌, 데이터와 관련있는 위젯만 다시 빌드된다. 상태관리를 통해 유저는 화면이 다시 로드될 때까지 기다리지 않아도 즉시 데이터의 변화를 확인할 수 있다. 카운터 구현 카운터 UI import 'package:flutter/material.dart'; class FirstScreen extends StatefulWidget { const FirstScreen({super.key}); @override State createState() => _FirstScreenState(); } class _FirstScreenState extends State { @override Widget build(B..

화면전환구현 파일생성 화면전환을 구현하기 위해 화면 1,2 생성 main.dart import 'package:flutter/material.dart'; import './screens/screen1.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors..

오리 시뮬레이션 게임  SimUduck이라는 오리 시뮬레이션 게임에는 매우 다양한 오리가 등장한다.이 시스템을 처음 디자인한 사람은 Duck이라는 슈퍼클래스를 만든 다음,그 클래스를 확장해서 서로 다른 종류의 오리를 만들었다.  시뮬레이션 게임 차별화   다른 오리시뮬레이션 게임 회사와의 차별점을 두기 위해객체지향 프로그래머 조는 오리가 날 수 있게 하기로 했다.  문제 발생  조는 duck의 몇몇 서브클래스만 날아야 한다는 사실을 까먹었다.Duck이라는 슈퍼클래스에 fly() 메서드를 추가해일부 서브클래스에 적합하지 않은 행동이 추가되어버렸다. 이는 유지보수면에서 좋지않은 설계이다.  상속 고려 조는 추가할 서브클래스에 fly()메소드를 오버라이드함으로써 문제를 해결하기로 했다. 조는 새로운 클래스인 ..

인프라 엔지니어의 업무 인프라 설계 인프라를 만들 땐 인프라를 만든 목적을 이해하고목적을 달성하는데 필요한 기능이나 성능 등을 조건으로 기준을 정리한다. 조건이 정리되면 조건에 맞는 기획서와 설계서를 작성해 책임자에게 결재를 올린다.  인프라 구축 필요한 기능이나 소프트웨어 등을 발주해 남품을 받으면 인프라 구축을 시작한다. 인프라 구축 작업은 인프라 엔지니어가 직접하라 때도 있고 오퍼레이터나 외부 업체에 맡길 때도 있다. 대기업을 고객으로 둔 SI(System Integration) 업계에선 하드웨어 설치작업은 CE(Customer Engineer)가,서버나 스토리지 설정은 SE(System Engineer)가,긜고 네트워크 장비 설정은 NE(Network Engineer)가 하는 경우가 많다. 웹 기..

플러터 기본 개념들 위젯 플러터에서 화면 안의 요소들은 모두 위젯이다. 하나의 큰 위젯 안에는 여러 위젯들이 들어가 있고, 그 위젯 안에도 다른 위젯들이 들어가 있는 형태이다. MyWidget( title: "위젯", description: "위젯예제다.", child: AnotherWidget( // 자식 위젯 안에 또 다른 위젯을 선언할 수 있다. ) ) 플러터 내에서 작성되어 있는 클래스로 객체를 생성하며 이 객체가 화면 속 위젯이 된다. 상태관리 상태관리는 setState()를 활용해 할 수 있다. bool isbtnOn; setState() { isbtnOn = !isbtnOn; } 버튼의 상태변경을 간단하게 구현한 코드 Stream 데이터를 불러오는데 시간이 오래 걸리거나, 지속적으로 데이터를..

웹 IDE DartPad dartpad.dev SDK나 IDE 설치 없이도 Dart 및 Flutter 코드를 Web browser 환경에서 실행할 수 있는 무료 오픈 소스 온라인 편집기이다. 객체지향 프로그래밍 Dart는 객체지향 프로그래밍을 사용한다. 여기서 객체지향이란 코드의 단위를 클래스로 나눠 작성하는 기법이다. 객체지향 프로그래밍 관련 용어들 //클래스 예시 class Person{ //속성 String name; int age; //메서드 getName(){ return name; } } 1. 클래스: 객체 생성을 위한 템플릿, 내부에 정의된 변수(멤버)와 함수(메서드)로 구성되어 있다. 2. 객체: 클래스 내의 모든 구성요소 3. 메서드: 클래스 내부에서 선언된 함수 4. 상속: 만들어진 클..

플러터란? html, css를 기반으로 UI를 작성하는 리액트 네이티브와 달리다트라는 자체 언어를 사용해 UI부터 로직까지 한 번에 구현할 수 있는,앱 개발자를 위한 프레임워크이다.  플러터는 총 3개의 영역으로 구성되어 있다. 1. 코드를 작성하는 프레임워크 영역2. 플랫폼 채널 등을 지원하는 엔진 영역3. 위젯을 빌드해 주는임베더 영역  맥 + VS Code를 이용해 개발환경을 구축 1) 플러터 설치 macOS installHow to install on macOS.docs.flutter.dev   이동 > 홈 으로 홈폴더를 열어 flutter 폴더를 옮긴다. 2) 환경변수 설정 command + space > terminal 검색 후 열기  nano .zshrc 나노스크립트로 .zshrc 파일 편집..