꿈꾸는 시스템 디자이너

Flutter 강좌 목록 : https://here4you.tistory.com/120 1 단계 - 코드 기반의 앱을 생성 우선 다음과 같은 코드를 작성한다. import 'package:flutter/material.dart'; // MyApp을 시작 위젯으로 설정하여 앱을 실행 void main() => runApp(MyApp()); // 앱의 시작점에 해당하는 위젯 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // 매트리얼앱을 생성하여 반환 return MaterialApp( title: 'Flutter Layout Demo', // 앱의 타이틀 theme: ThemeData( // 앱의 테마..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 시간에는 Flutter의 매트리얼 앱의 레이아웃을 구성하기 위해 주요하게 사용되는 Scaffold 컴포넌트에 대해서 알아보겠습니다. 소스코드는 다음과 같습니다. import 'package:flutter/material.dart'; void main(){ // 매트리얼앱을 실행 runApp(MaterialApp( title: "Flutter Tutorial", // 타이틀 설정 home: TutorialHome(), // 앱의 루트 경로 TutorialHome을 실행 )); } class TutorialHome extends StatelessWidget{ @override Widget build(BuildCont..

Flutter 강좌 목록 : https://here4you.tistory.com/120 이번 강좌에서는 Flutter의 Basic widgets을 이용해서 Material App을 작성해 봅니다. 역시 Android Studio에서 New Flutter Project를 선택하여 새로운 Flutter 프로젝트를 생성한 후 다음과 같이 작성합니다. import 'package:flutter/material.dart'; // 메인 함수. 프로그램의 시작점 void main(){ // MaterialApp을 실행. MaterialApp은 Flutter가 제공하는 material 디자인을 사용하는 앱을 의미함 runApp(MaterialApp( title: "My app", home: MyScaffold(), /..

Flutter 강좌 목록 : https://here4you.tistory.com/120 첫번째 Flutter 강좌로 Hello World를 만들어보겠습니다. 안드로이드 스튜디오에 Flutter 플러그인을 설치하면 안드로이드 스튜디오를 이용해서 Flutter 기반의 앱을 개발할 수 있습니다. 안드로이드 스튜디오에 Flutter 개발환경을 구성하는 방법은 Flutter 공식 사이트를 참고하시기 바랍니다. https://flutter.dev/docs/get-started/install Install Select the operating system on which you are installing Flutter:{{site.alert.note}} **Are you on Chrome OS?** If so, se..

최근 Typora를 이용해서 블로그 포스팅하는 방법에 대해서 포스팅을 해왔다. Typora 마크다운 편집기를 이용해서 소스코드(Code)와 이미지(Image)를 포스팅에 삽입해보자Typora로 포스팅 할 때 이미지 사이즈(Image Resize) 및 정렬(Image Align)을 설정하는 방법 본인 역시 Typora를 통해 블로그 포스팅을 작성하기 때문에 필요한 이지미를 Typora의 편집창에 코드로 넣어가면서 사용하고 있다. 그러던 중 좀 더 쉽게 이미지를 삽입할 수 있도록 이미지 삽입 태그 생성기를 직접 만들어 봤다.사실 소스코드 공개라고 거창하게 할 것까진 없는 심플한 코드이며, 혹시 필요하신 분들이 계시다면 편하게 이용하시길 바란다. 본 이미지 삽입 태그 생성기는 아래의 포스팅에서 직접 테스트 해..

Insert Image Tag Generator Img URL: Copy 이미지 삽입 코드 생성기(Insert Image Tag Generator) 사용법Img URL 항목에 삽입할 이미지의 URL을 입력한다.URL이 입력되면 실시간으로 하단 Text-Area에 이미지 삽입 태그가 실시간으로 생성된다.Copy버튼을 클릭하면 해당 코드가 클립 보드로 복사된다.이미지를 삽입할 컨텐츠에서 Ctl + v를 입력하여 코드를 붙여넣는다. 자동으로 생성된 코드는 HTML코드 형태이므로 블로그에 포스팅 할 때 HTML 편집 모드에서 코드를 붙여 넣어야 한다.Typora와 같은 편집기에서는 그냥 붙여 넣으면 자동으로 이미지가 삽입된다. 혹시 소스코드가 필요하신 분들은 아래의 포스팅을 참조하시길 바란다.2019/01/31..

지난번 포스팅에서 Typora를 이용해서 소스코드와 이미지를 포스팅 하는 방법을 소개했다. Typora 마크다운 편집기를 이용해서 소스코드(Code)와 이미지(Image)를 포스팅에 삽입해보자 지난번에 소개한 방법으로는 태그를 통해 이미지의 사이즈를 설정해서 포스팅할 수 있었다.그런데 추가로 문제가 있었으니 웹브라우저의 너비에 무관하게 이미지 사이즈가 항상 고정되어 창이 좁아질 경우 이미지가 경계를 넘어 일부만 표시되는 문제가 있었다.해결 방법은 태그 내부에 style 속성을 통해 이미지가 너비에 따라 자동 조정되도록 수정하면 된다. img 태그를 이용해서 이미지 크기를 조정하는 방법 아래 코드를 보면 이미지가 화면의 높이와 너비에 90%를 넘지 못하도록 설정하였다. 상기 html코드에 의해 출력되는 이..

블로그 포스팅을 다시 시작하다.한때 개발하는 도중에 겪은 경험들을 블로그에 잘 정리하던 시절이 있었다.그러다 현재 회사로 이직을 하고 만 2년간 정말 바쁘게 살다보니 제대로 된 포스팅을 할 여력이 없었다. 간혹 정말 중요한 기법들만 대충 글로 끄적인게 전부였다.만 2년을 그렇게 살다보니 버닝아웃도 오고 회사를 계속 다니는게 맞나 싶기도 하고...여튼 요즘은 많이 시들하고 무료해서 블로그 포스팅을 다시 시작하기로 맘먹었다. 어떻게 포스팅 할 것인가?예전에는 블로그에서 기본 제공되는 에디터만을 이용하다가 소스코드를 넣기 위해서 Syntax Highlighter 등을 이용하기도 했었는데 이게 정말 불편했다. 그래서 언제가 부터는 그냥 블럭을 하나 만들어서 대충 소스코드를 넣다보니 시안성도 떨어졌고 맘에도 안들..