전체 글 260

[Mac] Backtick(`) 문자 사용 방법

오늘은 매우 가벼운 글을 적어봅니다. MySQL DDL 작성 시 사용되는 ` 백틱 문자는 Macbook 에서 어떻게 선택할까? 영문 키보드에서는 존재하지만 한글 키보드에서는 '₩ 원' 표시가 나와있다. 영문으로 쓰면 백틱(`)이고 한글로 쓰면 원(₩) 이다... 끝 TRANSLATE with x English Arabic Hebrew Polish Bulgarian Hindi Portuguese Catalan Hmong Daw Romanian Chinese Simplified Hungarian Russian Chinese Traditional Indonesian Slovak Czech Italian Slovenian Danish Japanese Spanish Dutch Klingon Swedish Engl..

[Flutter] 안드로이드 API Level - 최소사양 체크용

안드로이드는 확실히 옛날 폰 쓰시는 분들이 많구만. SDK 19 미만은 구글이 버린 상태이고, SDK 21 이하는 정상적인 앱 구동이 안되는 경우가 많다. pub.dev 를 보면 대부분의 기능이 최소 SDK 버전을 21로 지정하도록 되어있다. 2014년 11월에 나온 롤리팝이 그 버전이다. 여러분 소프트웨어 업데이트를 생활화 합시다. https://learn.microsoft.com/en-us/xamarin/android/app-fundamentals/android-api-levels?tabs=macos Understanding Android API Levels - Xamarin Xamarin.Android has several Android API level settings that determine ..

[Mac] iTerms 찐 개발자는 이거 쓴다. (+주의할 점 3가지)

아래 블로그의 포스팅보다 잘 적을 자신이 없네요. 주의할 점 3가지를 알려드릴테니 이 점만 주의하고 가세요~ 1. Homebrew 설치 https://yeongwoo-cho.tistory.com/entry/2-How-to-install-Homebrew 2. How to install Homebrew? MacOS용 패키지 관리자 Homebrew를 설치하자 맥에서 개발을 하게되면 결국엔 homebrew를 설치하게 된다. 그만큼 강력한 놈이다. https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 위 링크 yeongwoo-cho.tistory.com 2. intel Mac과 M1 Mac 의 설정이 다릅니다. hig..

[Flutter] Slider Widget (+ ValueChanged<double>)

목차 Slider 위젯 사용설명 onChanged 와 같은 parameter가 있는 callback 함수의 타입 Slider 위젯 사용설명 Slider( min: 0.1, // 최솟값: double max: 10.0, // 최댓값: double divisions: 99, // 구간 갯수 (탁탁 걸리는 구간): int value: threshold, // 현재 값(최솟값, 최댓값 사이): double onChanged: (double value) { // 값이 바뀔 때 실행되는 콜백함수 print(value); }, label: threshold.toStringAsFixed(2), // 선택 했을때 나오는 Label, // 소수점 2째자리까지 표현 ), onChanged 와 같은 parameter가 있는 ..

Flutter/UI Widget 2023.04.10

[Flutter] BottomNavigationBar & TabBarView (+ TickerProviderStateMixin)

목차 TabBarView & BottomNavigationBar 위젯 소개 Sample Code(TabController) TickerProvideMixin(애니메이션 효율) & vsync(수직동기화) 1. TabBarView & BottomNavigationBar 위젯 소개 Flutter 에서 TabBarView는 아래와 같은 Widget을 의미합니다. TabBarView와 BottomNavigationBar를 연결하면 아래와 같이 시중에 가장 많이 사용되는 형태의 앱을 만들 수 있습니다. 2. Sample Code 일반적으로 보이지 않는 이해 안 되는 키워드가 존재할 것입니다. 'TickerProviderStateMixin'와 'vsync' 는 아래에서 따로 설명 하겠습니다. TabBarView와 B..

Flutter/UI Widget 2023.04.10

VSync 수직동기화란?

VSync 수직동기화란 애플리케이션의 초당 프레임을 디스플레이의 주사율을 동기화 시켜주는 것입니다. 용어정리 단어 설명 애플리케이션 여기서는 게임이나 애니메이션이 있는 스마트폰 어플을 말합니다. 디스플레이 애플리케이션을 시각화 해주는 모니터와 스마트폰 프레임(영상의 사진 한 개) 동영상을 물리적으로 환원하면 시간상 연속된 정지 사진들의 모음으로 볼 수 있습니다. 이 각각의 정지사진 하나를 프레임이라 합니다. FPS(초당 프레임, 프레임률) 1초에 프레임이 몇 장 보이는지의 속도를 'Frame Rate'라 합니다. 프레임률 혹은 초당 프레임이라하며 단위가 FPS입니다. 사용자의 컴퓨터 등 그래픽 기기가 초당 얼마나 많은 프레임을 뽑아낼 수 있는지를 나타내는 수치입니다. 주사율(화면 재생 빈도) 화면 재생 ..

[Flutter] 가속도와 자이로스코프 센서 (sensors_plus, shake)

목차 플러그인 정보 가속도 센서 자이로스코프 센서 sensors.plus 플러그인: 1.3.4+1 shake 플러그인: 2.1.0 가속도 센서 가속도계는 말 그대로 특정 물체가 특정 방향으로 이동하는 가속도가 어느 정도인지를 숫자로 측정하는 기기입니다. 대부분의 휴대폰에는 가속도계가 장착되어 있습니다. 휴대폰을 정면으로 봤을 때 x, y, z 축의 의미는 다음과 같습니다. 1) x축: 좌우로 움직이는 방향입니다. 2) y축: 위아래로 움직이는 방향입니다. 3) z축: 앞뒤로 움직이는 방향입니다. - 휴대폰을 아이폰과 같이 정면으로 세웠을때의 상태입니다. - 가속도계는 x, y, z축으로의 직선 움직임만 측정할 수 있습니다. - 가속도계를 사용해서 움직임 이벤트를 받으면 x, y, z축의 측정 결과가 모두..

[Flutter] Font Setting (pubspec.yaml)

Flutter에서 폰트 설정하는 방법에 대해 간략하게 살펴봅시다. 순서는 다음과 같다. 1) 폰트파일을 준비해 안드로이드 스튜디오에 추가합니다. 2) 'pubspec.yaml' 에 해당 폰트의 위치와 정보를 연결합니다. 3) MaterialApp( theme: ThemeData( textTheme: TextTheme( TextStyle 등록 ) ) ) 4) Theme.of(context).textTheme 로 MaterialApp의 textTheme 데이터를 불러와 원하는 Text Widget에 설정합니다. 1) 폰트파일을 준비해 안드로이드 스튜디오에 추가합니다. 2) 'pubspec.yaml' 에 해당 폰트의 위치와 정보를 연결합니다. Weight는 폰트 두께를 의미합니다. 폰트의 두께별로 파일이 따로..

[Flutter][Cupertino Widget] DatePicker (기본설명포함)

목차 플러터 디자인 시스템 Material Design System(구글, 안드로이드) Cupertino Design System(애플, iOS) showCupertinoDialog() 안녕하신가 DatePicker를 활용한 사용방법 1. 플러터 디자인 시스템 플러터에서는 두 가지 디자인 시스템을 지원합니다. 두 디자인 시스템 모두 패키지이며 import 로 추가해야 사용할 수 있습니다. 구글 스타일의 디자인: Material Design System import 'package:flutter/material.dart'; 애플 스타일의 디자인: Cupertino Design System import 'package:flutter/cupertino.dart'; 2. showCupertinoDialog() ..

Flutter/UI Widget 2023.04.07

[Flutter] 일정 시간 주기로 움직이는 광고 배너

일정 시간 주기로 움직이는 광고 배너 예제 PageView 와 Timer.periodic() 를 통해 이를 구현할 수 있습니다. 아래는 인스타와 같이 사진이 일정 주기로 스와이프 되는 코드입니다. 아래의 코드를 조금만 수정하면 해당 기능을 구현할 수 있습니다. import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'dart:async'; void main() { runApp(const MyApp( title: 'Flutter Demo', )); } class MyApp extends StatelessWidget { final String title; const MyApp({super.key, requir..

Flutter/Library 2023.04.06

[Flutter] PageView class (scrollable page list)

Define PageView class PageView는 스와이프를 통해 하위 위젯들을 렌더링 할 수 있는 UI Widget 입니다. 보통 한 화면에 한 페이지를 구현하는데, PageView를 사용하면 한 화면에서 여러 페이지를 책처럼 넘겨볼 수 있도록 구현할 수 있습니다. - 스크롤 가능한 페이지 리스트 - 각 하위 위젯들은 강제로 같은 사이즈가 됩니다. - PageView를 제어할 수 있는 PageController를 제공해 줍니다. - Ex) 인스타 스토리, 스크롤 되는 앱 상단 광고 배너 등 - PageView + Timer 는 일정 시간 마다 넘어가는 광고 배너를 만들 수 있다. Function 1) 페이징 방향 변경(scrollDirection: Axis.vertical) 2) 페이지 넘김 보..

Flutter/UI Widget 2023.04.06

[Flutter] SystemChrome class (SystemUI Control)

운영체제에서 제공하는 그래픽 인터페이스(시스템 UI)의 특정 부분과 어플 간의 상호작용을 제어합니다. 즉, 시스템 UI 의 색상이나 모드를 변경 가능하고 앱 실행 방향이나 변경 이벤트를 전달 받을 수 있습니다. Static Method of SystemChrome class 함수 설명 setEnabledSystemUIMode() 앱의 풀스크린 모드를 지정합니다. (예를 들어 핸드폰 상단의 시간이나 배터리 잔량이 보이지 않게 가릴 수 있습니다.) setPreferredOrientations() 앱을 실행하는 방향을 지정합니다. (가로, 가로좌우반전, 세로, 세로좌우반전 옵션이 있습니다.) setSystemUIChangeCallback() 시스템 UI 가 변경되면 콜백함수를 실행합니다. setSystemUI..

Flutter/UI Widget 2023.04.06

[Flutter] BoxFit enum

Image Widget을 비롯한 영역을 채울 때 사용하는 BoxFit 에 대한 포스팅이다. 사용방법은 다음과 같습니다. Image.asset( 'assets/img/image_$x.jpeg', fit: BoxFit.fill, ), Constants values → const ListA constant List of the values in this enum, in order of their declaration. BoxFit의 values에는 아래와 같이 7개의 상수값이 있습니다. 이제 그 특징에 대해 알아봅시다. [fill, contain, cover, fitWidth, fitHeight, none, scaleDown] Values 1) fill → const BoxFit Fill the target ..

Flutter/UI Widget 2023.04.06

[Flutter] StatelessWidget vs StatefulWidget

목차 StatelessWidget vs StatefulWidget StatelessWidget StatelessWidget Life Cycle StatelessWidget 특성 StatefulWidget StatefulWidget 특성 StatefulWidget Life Cycle StatefulWidget Life Cycle 이해를 돕기위한 3가지 예시 상태변경이 없는 생명주기 StatefulWidget 생성자의 매개변수가 변경됐을 때 생명주기(Stateful을 이해하기 좋음) State 자체적으로 build() 를 재실행할 때 생명주기 1. StatelessWidget vs StatefulWidget StatelessWidget: 위젯 내부에서 값이 변경되어도, 위젯 자체적으로 다시 렌더링할 수 없는..

Flutter/UI Widget 2023.04.06

[Flutter] Timer (기다린 후 일회성, 주기적 반복작업)

Timer의 기능은 두가지로 명확하다 1. 기다린 후 일회성으로 함수를 실행 2. 주기적으로 반복하여 함수를 실행 3. 사용방법 * 영단어 period: 기간 periodic: 주기적인 duration: 지속, 계속, 지속기간 1. 기다린 후 일회성으로 함수를 실행한다. Timer의 default constructor 이다. 기다릴 기간과 1회 실행할 콜백함수를 인자로 전달한다. import 'dart:async'; // 해당 시간을 기다린 수 콜백함수 1회 실행 Timer(Duration(seconds: 3), (Timer timer) { // 매개변수로 현재 실행중인 Timer 객체가 제공된다. // 기능 구현 }) 2. 주기적으로 반복하여 함수를 실행 Timer의 유일한 named construct..

Flutter/Library 2023.04.04

[Flutter] webview_flutter: 3.0.2

현재(2023.03.28 기준) 가장 최신 버전은 4.0.7이다. WebViewWidget으로 사용하며 아래 코드와는 차이가 존재합니다. 맥락을 파악하기 위한 용도를 포스팅 한다. https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() { runApp(const MyApp()); } class MyApp ..

[Flutter] 플러그인에 따른 권한 설정(AOS, iOS)

플러그인을 사용하다 보면 웹뷰, 카메라, 사진첩 등 사용자의 권한이 필요한 경우가 존재한다. 플러터는 각 네이티브 플랫폼으로 코드가 컴파일되므로 최소한의 네이티브 설정이 필요하다. 각 안드로이드와 iOS에서 설정하는 방법을 알아보자 목차 - 안드로이드 설정 - 안드로이드 권한 설정(AndroidManifest.xml) - 안드로이드 빌드 설정(build.gradle) - iOS 설정 - iOS 권한 설정(info.plish) - Flutter 설정 파일 및 총정리 안드로이드 설정 1. 안드로이드 권한 설정(AndroidManifest.xml) 안드로이드 앱에 필요한 각종 권한은 AndroidManifest.xml( android/app/src/main/AndroidManifest.xml ) 파일에서 작업..