nomad-programmer

머터리얼 디자인은 안드로이드에 적용하려고 구글이 만든 디자인 규칙이다. 그러므로 아이폰에는 어울리지 않는다. 좀 더 아이폰스러운 디자인을 적용하려면 쿠퍼니노 디자인을 사용해야 한다. flutter/cupertino.dart 패키지에는 다양한 쿠퍼티노 디자인용 UI 위젯이 준비되어 있다. Cupertino로 시작하는 이름의 클래스들이 이에 해당되며 사용 방법이 머터리얼 위젯과 비슷하므로 쉽게 적용할 수 있다. 여담이지만 두 디자인 컨셉을 섞어서 사용할 수도 있고 안드로이드 앱을 아이폰스럽게 만드는 것도 가능하다. 쿠퍼티노 기본 UI 쿠퍼티노 디자인에서는 AppBar 대신 CupertinoNavigationBar를 사용하며 CupertinoSwitch, CupertinoButton 등을 사용한다. 쿠퍼티노 ..

SliverAppBar & SliverFillRemaining SliverAppBar와 SliverFillRemaining은 화면 헤더를 동적으로 표현하는 위젯이다. 헤더를 위로 스크롤하면 헤더 부분이 작아지면서 헤더 하단에 있던 정적인 내용만 보이는 AppBar 형태로 애니메이션된다. 이런 효과를 Sliver 효과라고 부른다. SliverAppBar와 SliverFillRemaining을 사용한 예이다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mate..

ETF(상장지수펀드)는 기초지수의 성과를 추적하는 것이 목표인 인덱스펀드로, 거래소에 상장되어 있어서 개별주식과 마찬가지로 기존의 주식계좌를 통해 거래를 할 수 있다. 그 구성종목과 수량 등 자산구성내역이 투명하게 공개되어 있고, 장중에는 실시간으로 순자산가치(NAV)가 제공되어 거래에 참고할 수 있다. ETF는 1좌를 거래할 수 있는 최소한의 금액만으로 분산투자 효과를 누릴 수 있어 효율적인 투자수단이며, 펀드보다 운보수가 맞고 주식에 적용되는 거래세도 붙지 않는다. ETF의 장점은 종목 선정 및 분산투자에 익숙하지 않은 상태에서도 안정적으로 자산을 운용하기에 적합하며, 또한 가격 변동이 그렇게 크지 않기 때문에 주식 초고가 투자하기에도 좋다. NAVER FINANCE ETF ITEM LIST http..

Hero 위젯이 화면 전화시 애니메이션 효과를 지원했다면 AnimatedContainer 위젯은 한 화면 내에서 setState() 함수를 호출하여 화면을 새로 그릴 때 변경된 프로퍼티에 의해 애니메이션 되도록 해준다. Container 위젯과 쓰임새는 비슷하지만 duration, curve 등의 애니메이션 관련 프로퍼티가 있다. duration 프로퍼티는 필수이며 애니메이션되는 데 걸리는 시간을 Duration 클래스를 사용해 정의할 수 있다. Curves 클래스에는 미리 정의된 여러 애니메이션 효과가 들어 있다. AnimationContainer( duration: Duration(seconds: 1), // 1초 동안 애니메이션 적용 width: 100.0 // 가로 길이 height: 150.0 ..

Hero 위젯은 화면 전환시 자연스럽게 연결되는 애니메이션을 지원한다. 이전 화면으로 돌아갈 때도 자연스럽게 애니메이션이 동작한다. Hero 위젯 사용 방법은 애니메이션 효과의 대상이 되는 양쪽 화면의 위젯을 Hero 위젯으로 감싸고, tag 프로퍼티를 반드시 동일하게 지정해야 한다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colo..

글자나 그림 같이 이벤트 프로퍼티가 없는 위젯에 이벤트를 적용하고 싶을 때 사용하는 위젯이다. GestureDetector와 InkWell 위젯은 터치 이벤트를 발생시킨다. onTab 프로퍼티를 가지고 있어서 child 프로퍼티에 어떠한 위젯이 와도 클릭 이벤트를 작성할 수 있다. 따라서 Text, Image 등의 위젯에도 간단히 클릭 이벤트를 추가할 수 있다. GestureDetector( onTab: () { // 클릭 시 실행 }, child: [위젯], ), InkWell( onTab: () { // 클릭 시 실행 }, child: [위젯], ), InkWell 위젯으로 감싸고 클릭하면 물결 효과가 나타나지만 GestureDetector 위젯은 그렇지 않다. GestureDetector & Ink..

TimePicker 위젯을 시간을 선택할 때 사용하는 위젯이다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => ..

Flutter Studio https://flutterstudio.app AppBuilder 2 20180529-19:35 flutterstudio.app 비주얼 에디터인 플러터 스튜디오를 이용하면 드래그&드롭으로 위젯을 간단히 시험할 수 있다. 대신 코드 수정은 불가능하다. 위젯을 드래그&드롭하여 화면에 배치하고 '{ } source code'를 누르면 소스 코드를 바로 확인할 수 있다. Dart Pad 코드는 안드로이드 스튜디오에서 작성하는 것이 기본이지만 급하게 무언가 테스트해보고 싶을 때는 다트 패드 웹 서비스를 이용하는 것도 좋다. https://dartpad.dev DartPad dartpad.dev 여러 가지 샘플 앱도 준비되어 있다.

화면을 구성하는 컴포넌트를 위젯이라고 부른다. 화면을 구성하려면 다양한 위젯을 조합해야 하므로 가능하면 많은 위젯을 아는 것이 좋다. https://flutter.dev/docs/development/ui/widgets Widget catalog A catalog of some of Flutter's rich set of widgets. flutter.dev 앱을 만들려면 기본 위젯을 알아야 한다. UI를 위젯의 조합으로 구성하기 때문이다. 플러터는 머티리얼 디자인을 표준 디자인으로 채용하고, 필요에 따라서 iOS 쿠퍼티노 디자인도 사용할 수 있다. 그리고 다양한 화면 크기에 대응하는 방법을 제공한다. 화면 배치에 쓰는 기본 위젯 위젯 중에는 화면을 구성하고 배치하는 데 뼈대가 되는 것이 있다. Cont..

버튼을 누르면 "Hello, World!", "안녕, 세상!" 이렇게 두 개의 문자열이 번갈아가며 변경되는 것을 만들어보았다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override..

프로젝트를 새로 작성하면 샘플 앱이 표시된다. 프로젝트 창의 lib 폴더에서 main.dart 파일을 클릭하면 전체 코드를 볼 수 있다. import 'package:flutter/material.dart'; // 앱 시작 부분 void main() { runApp(MyApp()); } // 시작 클래스. 메터리얼 디자인 앱 생성 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Col..

플러터 앱을 잘 만들려면 먼저 프로젝트를 구성하는 폴더와 파일 역할을 알아야 한다. 1. 프로젝트를 구성하는 폴더 2. 프로젝트를 구성하는 파일 프로젝트를 구성하는 폴더는 다음과 같다. .idea : 개발 도구에 필요한 설정 android : 안드로이드 네이티브 코드를 작성하는 부분 build : 빌드시 생성되는 파일 ios : iOS 네이티브 코드를 작성하는 부분 lib : 다트 코드를 작성하는 부분 test : 테스트 코드를 작성하는 부분 프로젝트를 구성하는 파일은 다음과 같다. .gitignore : Git 설정 파일. 버전 관리지 무시할 파일 규칙 작성 .metadata : 프로젝트가 관리하는 파일. 임의로 수정하지 않는다. .packages : 각종 패키지 정보. 임의로 수정하지 않는다. flu..

다트의 버전이 올라가면서 유용한 기능이 계속해서 추가되고 있는데, 이러한 기능들을 잘 사용하면 좀 더 간결한 코드를 작성하는 데 도움이 된다. 계단식 표기법, 컬렉션 if, 컬렉션 for, null을 다루는 연산자를 알아보자. 계단식 표기법 .. 연산자 계단식 표기법(cascade notation) .. 연산자를 사용하면 동일 객체에서 일련의 작업을 수행할 수 있다. 컬렉션의 add() 메소드는 void를 반환하고 remove() 메소드는 bool을 반환하지만 '..' 연산자를 사용하면 메소드를 수행한 객체의 참조를 반환한다. 다음은 리스트에 6을 추가하고 2를 제거하여 출력하는 코드이다. void main() { final items = [1, 2, 3, 4, 5]; var result = items;..

다트는 객체 지향 프로그래밍과 함수형 프로그래밍의 특징을 모두 제공한다. 함수형 프로그래밍은 자료 처리를 수학적 함수의 계산으로 취급하는 프로그래밍 패러다임이다 (상태와 가변 데이터를 기피한다). 특히 다트의 컬렉션은 함수형 프로그래밍을 지원하는 다양한 함수를 제공한다. 자주 사용하는 몇 가지를 알아보자. 일급 객체 다트에서는 함수를 값으로 취급할 수 있다. 그러므로 다른 변수에 함수를 대입할 수 있다. void greeting(String text) { print(text); } void main() { var f = greeting; f('hello'); } /* 결과 hello */ 다른 함수의 인수로 함수 자체를 전달하거나 함수를 반환받을 수도 있다. void something(Function(i..

다트는 List, Map, Set 등의 컬렉션을 제공한다. 다트에서 컬렉션은 기본 제공하는 자료 구조를 말한다. List : 같은 타입으 ㅣ자료를 여러 개 담을 수 있고 특정 인덱스로 접근할 수 있다. Map : 키(key)와 값(value)의 쌍으로 저장할 수 있고 키를 통해 값을 얻을 수 있다. Set : 중복이 허용되지 않고, 찾는 값이 있는지 없는지 판단하고자 할 때 사용한다. List List는 순서가 있는 자료를 담는 컬렉션이다. 다른 언어에서는 대부분 배열과 리스트가 별도로 제공되지만, 다트는 배열을 제공하지 않는다. List numbers = [1, 2, 3, 4, 5]; var numbers = [1, 2, 3, 4, 5]; 는 리스트에 담길 데이터 타입을 지정한 것이다. 하지만 컬렉션도..

다트는 실제 현실 세계를 반영한 객체 지향 프로그래밍 언어이다. 클래스 컴퓨터 세계에서 객체(object)는 저장 공간에 할당되어 값을 가지거나 식별자에 의해 참조되는 공간을 말한다. 변수, 자료 구조, 함수 또는 메소드 등이 객체가 될 수 있다. 이러한 객체를 메모리에 작성한느 것을 '인스턴스(instance)화' 한다고 하며 메모리에 작성된 객체를 인스턴스라고 한다. 인스턴스화하기 위해서는 설계도가 필요한데 설계도 역할을 하는 것이 클래스(class)이다. 클래스 안에는 속성을 표현할 수 있는데 이를 프로퍼티(property) 라고 한다. class Person { String name; int age; } void main() { Person person = new Person(); // new 키..

플러터 개발에는 다트 언어를 사용한다. 다트 문법 온라인 메뉴얼 https://dart.dev/guides/language/language-tour A tour of the Dart language A tour of all of the major Dart language features. dart.dev 다트 문법은 main() 함수가 진입점(entry point)이다. void main() { print('Hello, World!'); } 주석 // 이것도 주석 /* 이것도 주석 */ /// 이것도 주석 void something() {} // : 한줄 주석 /* ... */ : 여러줄 주석 /// : 문서 주석 ///를 메소드나 클래스 정의 위에 작성하면 dartdoc과 같은 문서 생성 도구를 통해 ..

CLR은 자동 메모리 관리(Automatic Memory Managment) 기능을 제공한다. 이 자동 메모리 관리 기능의 중심에는 가비지 컬렉션(Garbage Collection)이 있다. 가비지 컬렉션을 우리말로 바꾸면 "쓰레기 수거"라는 뜻으로, 여기에서 말하는 쓰레기란 더 이상 사용하지 않는 객체를 말한다. 가비지 컬렉션은 프로그래머로 하여금 컴퓨터가 무한한 메모리를 갖고 있는 것처럼 간주하고 코드를 작성할 수 있게 한다. C# 프로그래머는 무한한 메모리를 이용해 걱정 없이 코드를 작성하면 되므로 C/C++ 프로그래머들보다 훨씬 덜한 스트레스 속에서 일을 할 수 있게 된다. CLR 안에는 가비지 컬렉션을 담당하는 "가비지 컬렉터(Garbage Collector)"가 있다. 작성한 프로그램이 객체를..

플러터는 구글에서 만든 하나의 코드베이스로 모바일, 웹, 데스크탑에서 네이티브로 컴파일 되는 프레임워크이다. https://flutter-ko.dev/ Flutter - 가장 빠른 아름다운 네이티브 앱 Flutter(플러터)는 하나의 코드베이스로 모바일, 웹, 데스크톱에서 네이티브로 컴파일 되는 구글의 아름다운 UI 툴킷입니다. Flutter는 기존 코드와 함께 동작하고, 전세계 개발자와 조직에 쓰이고 �� flutter-ko.dev 설치하는 방법은 위의 링크를 가면 자세히 나와있다. 플러터의 특징과 장점을 한번 알아보자. 플러터는 네이티브 코드와 동등한 성능을 가진다. 플러터는 매터리얼 디자인과 쿠퍼티노 디자인을 제공한다. 플러터는 다트 언어로 개발한다. 안드로이드 스튜디오와 비주얼 스튜디오에서 개발이..

파일 업로드 프로토콜 파일 전송을 위한 프로토콜 FTP(File Transfer Protocol)이 있긴 하지만 직접 프로토콜 설계를 해보자. 그러면 다른 프로토콜을 이해하는 데에도 도움이된다. 설계할 파일 업로드 프로토콜의 이름은 FUP(File Upload Protocol)이라고 해보자. 이 프로토콜은 헤더와 바디의 두 부분으로 나뉜다. 바디에는 실제로 전달하고자 하는 데이터를 담고, 헤더에는 본문 길이를 비롯하여 메시지의 속성 몇 가지를 담을 것이다. 바디의 길이는 담는 데이터에 따라 달라지지만 헤더의 길이는 16바이트로 항상 일정하다. 따라서 수신한 패킷을 분석할 때는 가장 먼저 16바이트를 먼저 확인하여 바디의 길이를 포함한 메시지의 속성을 확인하고, 그 다음 바디의 길이만큼을 또 읽어 하나의 ..