그냥 개발자 노트

Dart 백엔드Dart 로 백엔드를 구성해보자는 생각을 했고 처음에는 Shelf를 시도했습니다.Shelf 는 정말 코어에 가깝고 대부분을 직접 구현해야 합니다.장점으로는 자유롭다이고 단점으로는 아무것도 없다 입니다.하나의 핸들러 클래스를 만들고 거기에 어떤 라우팅을 넣을것인지 정의하고라우팅 넣을때 미들웨어를 하나하나씩 정의 해야 합니다.Router get userRouter { final router = Router(); router.get('/profile', (Request request) { return Response.ok('사용자 프로필 정보입니다.'); }); return router;}// --- System Router ---Router get systemRouter { fi..

간만에 쓰는 포스트 입니다.게임 개발자로 살아오다가 1인 개발로 완전히 전향하게 되어서 내용을 정리해 볼 필요가 있어서 정리합니다. 이전 커리어Flash 개발자로 커리어를 시작해서 1년 반만에 Scaleform으로 게임개발로 전향하였습니다.그 과정에서 다시 Unity클라이언트 개발자로 전향 하였습니다.하지만 결국 회사 폐업으로 인한 실직과 때마침 터진 Unity의 요금제 개편으로 Unity 프로젝트의 대폭 축소 및 AI파동으로 일자리가 없더라구요. Flutter의 시작백수생활에서 외주로 Flutter 개발을 하게 되었습니다.앱 개발 의뢰였고 언어선택이 자유로와서 Flutter를 선택하였고 이유는 크로스 플랫폼이기 때문에 모바일 앱 + 웹 까지 다 처리 할 수 있을거라 생각해서 선택 하였습니다.그리고 Da..

앱을 만들다 보면 갤러리(사진첩)에서 이미지를 선택해야 할 일이 생깁니다. 이 경우를 알아보겠습니다. 우선 필요한 패키지는 image_picker 입니다. https://pub.dev/packages/image_picker image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev 선택하는 방법 자체는 아주 쉽고 간단합니다. static Future PickImage() async { return await ImagePicker().pickImage(source: ImageSource.g..

파파고 번역 Flutter 에서 파파고 번역을 사용하는 방법 입니다. https://www.ncloud.com/product/aiService/papagoTranslation NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 일단 파파고 API 등록을 합니다. 이것은 다른곳에도 많이 알려져 있기 때문에 간략히 넘어가겠습니다. Flutter에서는 기본적으로 http 에관한것이 없기 때문에 패키지 추가 해야 합니다. pubspec.yaml을 열고 http를 추가 해 줍니다. Flutte..

화면 하단부에 임시로 잠시 뜨는 PC에서 팝업같은 처리를 하는 ModalBottomSheet를 알아 보겠습니다. flutter 기본 앱을 수정하여 floatingActionButton을 누르면 ModalBottomSheet가 뜨도록 하겠습니다. floatingActionButton은 화면 중앙 하단에 있는 +버튼 입니다. 이 버튼을 누르면 ModalBottomSheet가 뜨고 거기서 텍스트를 입력받으면 기본 화면의 "Sample Text"자리에 뜨도록 수정되는 간단한 구조 입니다. 일단 ModalBottomSheet에 뜰 위젯을 보겠습니다. import 'package:flutter/material.dart'; class BottomDialog extends StatefulWidget { final Fu..

Flutter에서 폰트나 이미지 등을 사용하는 방법을 확인 해 보겠습니다. 일단 적당한 폰트를 받아서 assets/fonts 폴더에 넣어줍니다. 전 무료폰트인 구글의 NotoSerif를 받아서 넣었습니다. 기본폰트가 고딕계열이라 Serif계열을 쓰면 폰트가 바뀐것을 쉽게 알 수 있습니다. 이제 새로운 Flutter 프로젝트를 생성합니다. 여기서 화면 중앙에 문구표시되는 부분이 있는데 약간만 수정합니다. children: [ Container( width: 300, child: const Text( 'You have pushed the button this many times:', style: TextStyle( fontSize: 30, ), ), ), Text( '$_counter', style: The..

Flutter 에는 다양한 위젯들이 있습니다. 이중에서 SingleChildScrollView, ListView를 간략히 알아 보겠습니다. https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html SingleChildScrollView class - widgets library - Dart API A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you ne..

표시된 부분과 같이 버튼이 다수 존재 하는데 이것이 상황에 따라 달라질 경우 예를들면 A라는 사람에게는 2개, B라는 사람에게는 3개가 표시 되어야 할 상황이라면 위젯을 그냥 박아버리면 문제가 될 수 있습니다. 이때 Spread Operator 를 활용 할 수 있습니다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { var TextArray = ['Hello', 'World', 'ABCD']; void ButtonClick() { print('Button Click'); } // This widget is the root of your applicatio..

?? 좌측이 null이라면 우측을 리턴합니다. ??= 변수가 null 일 경우에만 변수에 우측값을 할당 합니다. 초기 할당에서는 null이기 때문에 3이 할당 되었지만 10을 할당 하려 했을 경우 null이 아니기 때문에 할당되지 않았습니다. ... Spread Operator 이라고 불리며 컬렉션의 값을 쪼개버립니다. ...을 썻을경우 list2 에는 값이 쪼개져서 할당 되었고 쓰지 않은 list3에는 리스트 내부에 리스트가 또 있는것을 확인 하였습니다 ...?으로 널체크 가능 합니다.

Flutter 은 Google 에서 만든 멀티 플랫폼 언어 입니다. 기존에는 Android 와 IOS를 커버 했지만 이제는 데스크탑 영역 및 웹도 커버 가능 합니다. 설치 하기 위해서는 가장 먼저 SDK를 받아야 합니다. 제가 Window10 이기 때문에 Window10 기준으로 설명 드리겠습니다. Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev 사이트에 가서 자신의 OS에 맞는 SDK를 받아 줍니다. 이후 path등록을 해 줘야 합니다. Win키를 누르고 환경 변수를 검색하면 위와 같은 항목을 선택 해 줍니..