nomad-programmer

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바이트를 먼저 확인하여 바디의 길이를 포함한 메시지의 속성을 확인하고, 그 다음 바디의 길이만큼을 또 읽어 하나의 ..

TcpListener와 TcpClient는 .NET 프레임워크가 TCP/IP 통신을 위해 제공하는 클래스이다. 이들 클래스가 속해 있는 System.Net.Sockets 네임스페이스에는 보다 다양한 옵션과 메소드를 제공하는 Socket 클래스도 있지만, 사용이 복잡하다는 단점이 있기 때문에 Socket 클래스 대신 TcpListener와 TcpClient 클래스를 이용한 TCP/IP 프로그래밍을 설명한다. TcpListener 클래스는 서버 애플리케이션에서 사용되며, 클라이언트의 연결 요청을 기다리는 역할을 한다. TcpClient는 서버 애플리케이션과 클라이언트 애플리케이션 양쪽에서 사용된다. 클라이언트에서는 TcpClient가 서버에 연결 요청을 하는 역할을 수행하며, 서버에서는 클라이언트의 요청을 ..