nomad-programmer

스타일시트를 더 쉽게 사용하고자 다양한 스타일시트 엔진들이 등장했다. 스타일시트 엔진은 특정한 형태의 스타일시트를 CSS 스타일시트로 변경해주는 변환 엔진(컴파일러) 이다. 일반적으로 많은 사용하는 스타일시트 엔진으로는 Sass 스타일시트 엔진과 Less 스타일시트 엔진등이 있다. 공식 홈페이지 lesscss.org/ Getting started | Less.js Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that..

주석 스타일 속성 이름 설명 /* 주석 */ 부가 설명 폰트 관련 속성 스타일 속성 이름 설명 font 폰트 font-family 폰트 종류 font-size 폰트 크기 font-style 폰트 형태 font-variant 폰트 변형 font-weight 폰트 두깨 변환 관련 속성 스타일 속성 이름 설명 transform 변환 transform-origin 변환 중심 transform-style 변환 형태 perspective 투시 수치 perspective-origin 투시 중심 backface-visibility 후면 가시성 애니메이션 관련 속성 스타일 속성 이름 설명 animation 애니메이션 animation-name 애니메이션 이름 animation-duration 애니메이션 진행 시간 ani..

주석 태그 이름 표시 형태 설명 부가 설명 HTML 구조 태그 태그 이름 표시 형태 설명 block 문서 형태 none 문서 자체 none 문서 머리 none 문서 제목 none 문서 추가 정보 block 문서 본문 파일 태그 태그 이름 표시 형태 설명 none 외부 파일을 추가한다. none 스타일시트 none 스크립트 공간 태그 태그 이름 표시 형태 설명 block block 형식의 공간 inline inline 형식의 공간 시멘틱 구조 태그 태그 이름 표시 형태 설명 block 본문 block 수직 목록 block 네비게이션 목록 block 구역 block 머리 block 꼬리 시멘틱 요소 태그 태그 이름 표시 형태 설명 block 그림 block 그림 제목 block 세부 설명 block 요약 i..

미디어 쿼리는 다음과 같은 쿼리를 사용해 장치를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수도 있다. 속성 설명 width 화면의 너비 height 화면의 높이 device-width 장치의 너비 device-height 장치의 높이 orientation 장치의 방향 device-aspect-ratio 화면의 비율 color 장치의 색상 비트 color-index 장치에서 표현 가능한 최대 색상 개수 monochrome 흑백 장치의 픽셀당 비트 수 resolution 장치의 해상도 orientation 속성을 제외한 모든 속성은 min 접두사와 max 접두사를 사용할 수 있다. 그리고 이를 사용하면 방응형 웹을 만들 수 있다. /* 화면 너비 0pixcel ~ 767pixcel */ @media ..

HTML을 사용하여 프리젠테이션을 만들 수 있는 라이브러리이다. GitHub github.com/impress/impress.js/ impress/impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. - impress/impress.js github.com 공식 사이트 impress.js.org/ impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers ..

모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작한다. 초기화 코드는 모든 웹 브라우저에서 동일한 출력 결과를 만드는데 사용한다. 다음은 전 세계적으로 많이 사용하는 초기화 코드이다. Eric Meyer's Reset CSS meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this w..

리눅스는 기본적인 쉘이 Bash (Bourne-again shell) 이다. bash 쉘에서 자주 사용하는 명령 및 문법을 알아보자. > (출력 리다이렉션) 출력 리다이렉션. 명령 실행의 표준 출력(stdout)을 파일로 저장한다. 유닉스계열 운영체제는 장치도 파일로 처리하기 때문에 명령 실행 결과를 특정 장치로 보낼 수도 있다. 또한 파일이 없다면 새로운 파일을 생성하여 그곳에 출력하고 있다면 해당 파일의 내용을 완전히 덮어씌어 그곳에 출력한다. $ echo "hello" > ./hello.txt $ echo "hello" > /dev/null >> (출력 리다이렉션 ) 명령 실행의 표준 출력 (stdout)을 파일에 추가한다. > 는 이미 있는 파일에 내용을 덮어 쓰지만 >> 는 파일 뒷부분에 내용을..

flutter doctor --android-licenses 명령을 실행하면 NoClassDefFoundError가 나와서 실행이 되질 않았다. 그 이유는 Java9 이상의 버전을 사용해서 그런것이다. 이러한 에러를 보지 않으려면 Java8 버전을 사용해야 한다. 아래 링크는 이런 에러가 왜 나오는지에 대한 다른 블로거의 설명이다. www.slipp.net/wiki/pages/viewpage.action?pageId=41583579 1.a. Flutter 설치 중 안드로이드 라이센스 관련 오류 해결방법 - SLiPP 스터디 - SLiPP::위키 flutter를 설치하면서 에러가 여러 번 일어났는데 구글링을 해도 잘 나오지 않는 버그가 있어서 여기에 공유합니다. 이 버그는 안드로이드 라이센스를 허용해주면서..

macOS도 Microsoft사의 Visual Studio Community 통합 개발 툴을 사용할 수 있다. 아래의 링크를 통해 다운로드 받을 수 있다. visualstudio.microsoft.com/ko/vs/mac/ Mac IDE - Mac OS에서 앱과 게임 개발 | Visual Studio Mac용 Visual Studio 2019 .NET을 사용하여 iOS 및 Android용 앱과 게임을 개발하세요. Mac용 Visual Studio를 다운로드하세요. 커뮤니티. Mac에서 .NET과 C#을 사용하여 확장성 있고 성능이 뛰어난 앱을 만들고 배 visualstudio.microsoft.com mac에서 unity를 작업하면서 C#에디터로 visual studio를 사용할 수 있다. 그리고 나는 ..

아이콘 및 배경 www.pngwing.com/ko PNGWing - 독점적 인 PNG 이미지 PNG 형식의 투명 이미지, 무료 및 무제한 다운로드 WhatsApp 응용 프로그램 소프트웨어 메시지 아이콘, Whatsapp 로고, Whats App 로고, 로고, 잔디, 핸드폰 png 1000x1000px 348.81KB 로고 아이콘, Instagram 로고, In www.pngwing.com 개발도구 사이트 wepplication.github.io/tools/ 온라인 도구 모음 회원가입이 필요없는 온라인 도구 모음 wepplication.github.io 더미 문자열 & 더미 이미지 picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.photos

Provider 라이브러리 4.1.0 이상의 버전에서는 더욱 간편하고 적은 비용으로 Provider를 사용할 수 있다. 이것은 최근 Dart 언어의 업데이트로 인하여 Provider 라이브러리도 업데이트가 된 사항이다. Provider 코드가 상당히 많이 줄어들어 인상적인 업데이트다. 먼저 Dart 언어의 업데이트 내역을 살펴본 후 Provider를 살펴보도록 하자. Dart dart extension은 다른 패키지 클래스에 속성과 메서드를 추가할 수 있다. 다음의 예를 보자. // 열거형을 비롯해 다른 모든 클래스를 확장할 수 있다. enum Connectivity { connected, disconnected, searching } // 열거형에 메서드를 확장하였다. extension on Conne..

FiraCode는 코딩할 때 코드의 가독성을 높여주는 폰트이다. 사용해보면 안다. 가독성이 너무 좋은 것을... 설치 방법은 아래의 링크를 보면 자세히 나와 있다. github.com/tonsky/FiraCode/wiki/Installing tonsky/FiraCode Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub. github.com

로컬 디바이스에 많은 데이터를 저장하고 쿼리를 요청해야 한다면, 로컬 파일이나 키-값 저장소 대신 데이터베이스를 사용하는 것이 좋다. 일반적으로 데이터베이스는 다른 로컬 솔루션보다 더 빠른 쓰기, 수정, 읽기 성능을 제공한다. Flutter 앱은 sqflite 플러그인을 통해 SQLite 데이터베이스를 사용할 수 있다. sqflite dart INTEGER int REAL num TEXT String BLOB Uint8List import 'package:flutter/material.dart'; import 'package:path/path.dart'; import 'package:sqflite/sqflite.dart'; void main() async { // runApp()이 없기때문에 에러 발생한..

isolate는 다른 언어에서의 thread 개념이라도 생각면된다. Flutter는 main isolate에서 앱이 실행된다. 그런데 비싼 비용의 데이터를 불러올때면 툭툭 끊기는 애니메이션을 야기할 수 있다. 이렇게 툭툭 끊기는 애니메이션을 "jank"라고 부른다. 허나 isolate를 사용하면 jank가 없는 애니메이션을 볼 수 있을뿐더러 성능도 올라간다. flutter-ko.dev/docs/cookbook/networking/background-parsing 백그라운드에서 JSON 파싱하기 기본적으로, Dart 앱은 모든 작업을 단일 스레드에서 수행합니다. 대부분의 경우 이러한 모델은코딩을 단순화시키며, 앱 성능이 떨어지거나 jank라고 불리는 뚝뚝 끊기는 애니메이션을 야기하지 flutter-ko.d..

pub.dev에 그래프 라이브러리가 많다. 하지만 입맛에 맞는 그래프 라이브러리가 없는 경우에는 직접 그래프를 만들어줘야 한다. 이럴때 사용하는 것이 CustomPaint & CustomPainter 이다. 커스텀 페인터는 직접 UI를 그릴때 사용한다. 기존의 UI로 만들기 어려운 화면을 만들고 싶을 때 유용하다. 직접 UI를 그리기위해서는 CustomPaint와 CustomPainter 클래스가 있어야 한다. CustomPaint : Center 위젯이나 Container 위젯같은 것이다. 즉, CustomPainter클래스를 담는 그릇이다. 이 클래스는 painter 속성을 가지고 있으므로 이것을 활용해 화면을 그릴 수 있다. CustomPainter : canvas, paint, size 등을 통해..

플러터에서 쓰이는 테스트 방식은 크게 3가지이다. 유닛 테스트 위젯 테스트 통합 테스트 유닛 테스트는 메소드나 클래스처럼 작은 단위를 테스트할 때 쓰인다. 그리고 외부에 의존하지 않는 테스트를 말한다. 보통 IO처리, 데이터베이스 접근하는 것을 외부에 의존한다고 하는데, 외부에 의존하는 경우는 Mockito 같은 테스트 프레임워크를 사용해 테스트한다. 다트 기본 테스트 프레임워크 test 라이브러리를 추가한다. pub.dev/packages/test test | Dart Package A full featured library for writing and running Dart tests. pub.dev // pubspec.yaml dev_dependencies: test: any test 디렉토리에다 ..

StatelessWidget 클래스에 TextFormField를 사용해도될까? TextEditingController는 렌더링간에 유지되어야하는 클래스 인스턴스이다. 그러나 StatelessWidget 클래스에 정의하면 기본적으로 모든 업데이트 후 다시 만든다. 그러므로 TextFormField 클래스를 사용할 예정이면 StatefulWidget 클래스로 만들어야 한다. Flutter 공식문서에서도 TextFormField 클래스를 생성할 때면 StatefulWidget으로 생성하라고 나와있다. flutter.dev/docs/cookbook/forms/text-field-changes Handle changes to a text field How to detect changes to a text fiel..

Flutter에서의 Reactive Programming - Stream, Provider 패턴, BloC 패턴 요즘의 프로그래밍 패러다임은 반응형 프로그래밍(Reactive Programming) 이다. 반응형 프로그래밍은 비동기 데이터를 효율적으로 처리하기 위해 만들어졌다. 비동기 처리 : 언제 도착할 지 모르는 데이터인 http 호출, UI 클릭, 데이터 저장, 에러 처리 등을 말한다. StreamBuilder 플러터에서도 리액티브 프로그래밍을 할 수 있다. 보통은 Stream이나 RxDart를 사용한다. 그렇다면 Flutter에서 Stream은 어떠한 방식으로 사용할까? Flutter에서 Stream은 "StreamBuilder" 를 사용하여 스트림 데이터 처리를 한다. StreamBuilder를..

??= 연산자는 C# 8.0 버전에서 추가된 아주 유용한 연산자 중 하나이다. ??= 연산자는 "null 병합 할당 연산자" 라고 부르며 ??= 연산자는 왼쪽 피연산자가 null로 평가되는 경우에만 오른쪽 피연산자의 값을 왼쪽 피연산제 대입한다. 왼쪽 피연산자가 null이 아닌것으로 평가되면 ??= 연산자는 오른쪽 피연산자를 평가하지 않는다. ?? 연산자는 "null 병합 연산자" 라고 부르며 null이 아닌 경우 왼쪽 피연산자의 값을 반환한다. 그렇지 않으면 오른쪽 피연산자를 평가하고 그 결과를 반환한다. ?? 연산자는 왼쪽 피연산자가 null 아닌 것으로 평가되면 ?? 연산자는 오픈쪽 피연산자를 평가하지 않는다. if (variable is null) { variable = expression; } ..

스트림이란? 스트림은 데이터나 이벤트가 들어오는 통로다. 즉, 파이프나 다리와 같다고 생각하면 된다. 앱을 만들다보면 데이터를 처리할 일이 많은데, 어느 타이밍에 데이터가 들어올지 정확히 알기 어렵다. 스트림은 이와 같은 비동기 작업을 할 때 주로 쓰인다. 예를 들어, 네트워크에서 데이터를 받아 UI에 보여주는 상황을 생각해보자. 언제 네트워크에서 데이터를 받을지 알 수 없다. 이런 문제를 스트림은 데이터 생성과 소비하는 곳을 따로둬서 이 문제를 해결한다. import 'dart:async'; void main() { // 1초마다 데이터 1개를 최대 5개까지 만듦. Stream stream = Stream.periodic(Duration(seconds: 1), (int x) => x).take(5); ..