Wilkyway

Vue.js를 이용해 백엔드/로그인 연동까지 가능한 Todolist를 만들도록 하겠습니다.

폴더구조는 아래와 같이 하나의 프로젝트 폴더에 backend와 frontend를 모아놓고 시작하겠습니다.

TODO_APP
   - express_back
   - vue_front

1. 생성방법

flutter build apk --release --target-platform=android-arm64

2. no sound null safety 추가하기

flutter build apk --release --no-sound-null-safety --target-platform=android-arm64

3. 위치

project folder > build > app > outputs > flutter-apk

우선 색상코드를 바꿔줍니다.

color: Colors.orange, -->  color: Color(0xFFF99231),

Center위젯을 Colum위젯으로 바꾸고, CircularProgressIndicator 반영하기

이미지를 높이방향으로 가운데 정렬하기

이미지의 사이즈를 200px로 줄이고 가운데 정렬하기

프로그레스 이미지를 흰색으로 변경하기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Color(0xFFF99231),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(
                    'assets/logo.png',
                    width: 200,
                  ),
                  CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(
                      Colors.white,
                    )
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

코드팩토리의 플러터 프로그래밍 -  Splash Screen

우여곡절 끝에 플러터 설치를 마치고, 혼자 공부하다 잘 안되어 책을 구매하게 되었습니다.

기본 문법은 대충 보고, 첫번째 예제부터 따라해보기로 했습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.orange,
          ),
          child: Center(
            child: Text('Splash Screen'),
          ),
        ),
      ),
    );
  }
}

화면이 잘 나오네요. Dart라는게 좀 생소하긴 합니다. 첨이라 어렵네요.

다음으로 이미지를 넣어봅니다. 

assets라는 폴더를 만들고, logo.png를 해당 폴더에 넣어줍니다. (github link)

아래쪽의 pubspec.yaml 파일을 수정하고..

상단의 pub get을 눌러줍니다. 그래야 해당 폴더가 asset으로 인식이 됩니다.

그리고 코드에 텍스트 표시부분을 이미지가 표시되도록 바꿔줍니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            color: Colors.orange,
          ),
          child: Center(
            child: Image.asset( //교체
              'assets/logo.png' //교체
            ),
          ),
        ),
      ),
    );
  }
}

성공적으로 나오네요^^

Flutter를 한번 해보려고 합니다. 그런데 Flutter Doctor라는걸 실행하니까, Visual Studio가 안깔려있다네요???? 모바일 개발할건데 웬 Visual Studio? ㅠㅠ 그래서 포기할까도 생각해봤지만 여기저기 찾아다니다가 알아냈습니다.

Windows에서 모바일만 개발할 계획인데 굳이 무거운  Visual Studio를 깔고싶지 않다면 아래와 같이 실행하여 설정을 변경해 줄 수 있습니다. 그러면 Visual Studio 관련 부분이 사라집니다.^^

flutter config --no-enable-windows-desktop

flutter doctor

(ps) Unable to find bundled Java version 에러

C:\Program Files\Android\Android Studio

경로로 가셔서 jbr 폴더의 내용을 jre 폴더에 붙여넣기 (안드로이드 스튜디오 버그)

(ps) Windows Version (Unable to confirm if installed Windows version is 10 or greater) 에러

C:\> flutter upgrade

C:\> flutter channel master

C:\> flutter doctor -v

아래와 같이 xaml에서 직접 작성할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<Window
	x:Class="ebar.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="ebar"
	Width="1175"
	Height="704">
	<Grid>
		<DataGrid
			FontFamily="Arial"
			x:Name="worktable"
			Height="133"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Stretch"
			VerticalAlignment="Top"
			Margin="30,128,34,0">
			<DataGrid.Columns>
				<DataGridTemplateColumn>
					<DataGridTemplateColumn.Header>
						<Grid Width="500">
							<Grid.RowDefinitions>
								<RowDefinition/>
								<RowDefinition/>
							</Grid.RowDefinitions>
							<Grid.ColumnDefinitions>
								<ColumnDefinition/>
								<ColumnDefinition/>
								<ColumnDefinition/>
								<ColumnDefinition/>
							</Grid.ColumnDefinitions>
							<TextBlock Grid.ColumnSpan="2" HorizontalAlignment="Center" Text="Main Header1" Grid.Column="0" />
							<TextBlock Grid.Row="1" Grid.Column="0" Text="Id1" />
							<TextBlock Grid.Row="1" Grid.Column="1" Text="Name1" />
							<TextBlock Grid.ColumnSpan="2" HorizontalAlignment="Center" Text="Main Header2" Grid.Column="2" />
							<TextBlock Grid.Row="1" Grid.Column="2" Text="Id1" />
							<TextBlock Grid.Row="1" Grid.Column="3" Text="Name2" />
						</Grid>
					</DataGridTemplateColumn.Header>					
				</DataGridTemplateColumn>
			</DataGrid.Columns>
		</DataGrid>
		<ComboBox
			Height="20"
			RenderTransformOrigin="0.5,0.6"
			Width="120"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="158,75.5,0,0"></ComboBox>
		<Label
			x:Name="Project_Label"
			Content="Project No"
			Width="133"
			Height="29"
			Grid.Column="0"
			Grid.Row="0"
			VerticalAlignment="Top"
			HorizontalAlignment="Left"
			HorizontalContentAlignment="Center"
			VerticalContentAlignment="Center"
			Margin="35,70,0,0"
			RenderTransformOrigin="0.5,0.5" />
		<CheckBox
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="511,78.5,0,0" />
		<Label
			HorizontalContentAlignment="Center"
			VerticalContentAlignment="Center"
			Content="진행중 Only"
			Width="84"
			Height="26"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="427,74,0,0" />
		<ComboBox
			Width="120"
			Height="20"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="683,75.5,0,0" />
		<Label
			Content="Unit(호기)"
			HorizontalContentAlignment="Center"
			VerticalContentAlignment="Center"
			Width="123"
			Height="23"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="560,74.5,0,0" />
		<Label
			Content="작업Category"
			Width="100"
			Height="28"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="886,71.5,0,0" />
		<ComboBox
			Width="120"
			Height="20"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="994,76,0,0" />
	</Grid>
</Window>

아래와 같이 C#코드로 작성할 수도 있습니다.

/*
 * Created by SharpDevelop.
 * User: wijkim
 * Date: 2023-02-13
 * Time: 오후 2:56
 * 
 * To change this template use Tools | Options | Coding | Edit Standard Headers.
 */
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;

namespace ebar
{
	/// <summary>
	/// Interaction logic for Window1.xaml
	/// </summary>
	public partial class Window1 : Window
	{
		public Window1()
		{
			InitializeComponent();
			
			DataGridTextColumn textColumn = new DataGridTextColumn();
			textColumn.Header = "Column 1";
			textColumn.Width = new DataGridLength(1, DataGridLengthUnitType.Star);
			textColumn.HeaderTemplate = new DataTemplate();
			
			FrameworkElementFactory stackPanel = new FrameworkElementFactory(typeof(StackPanel));
			stackPanel.SetValue(StackPanel.OrientationProperty, Orientation.Vertical);
			
			FrameworkElementFactory firstLine = new FrameworkElementFactory(typeof(TextBlock));
			firstLine.SetValue(TextBlock.TextProperty, "First line");
			firstLine.SetValue(TextBlock.FontSizeProperty, 16d);
			firstLine.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
			
			FrameworkElementFactory secondLine = new FrameworkElementFactory(typeof(TextBlock));
			secondLine.SetValue(TextBlock.TextProperty, "Second line");
			secondLine.SetValue(TextBlock.FontSizeProperty, 12d);
			secondLine.SetValue(TextBlock.FontStyleProperty, FontStyles.Italic);
			
			stackPanel.AppendChild(firstLine);
			stackPanel.AppendChild(secondLine);
			
			textColumn.HeaderTemplate.VisualTree = stackPanel;
			
			worktable.Columns.Add(textColumn);		
		}
	}
}

이 경우 XAML코드에서 필요없는 Column정의부분은 지워도 무관합니다.

<?xml version="1.0" encoding="utf-8"?>
<Window
	x:Class="ebar.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="ebar"
	Width="1175"
	Height="704">
	<Grid>
		<DataGrid
			FontFamily="Arial"
			x:Name="worktable"
			Height="133"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Stretch"
			VerticalAlignment="Top"
			Margin="30,128,34,0">
			<!--<DataGrid.Columns>
				<DataGridTemplateColumn>
					<DataGridTemplateColumn.Header>
						<Grid Width="500">
							<Grid.RowDefinitions>
								<RowDefinition/>
								<RowDefinition/>
							</Grid.RowDefinitions>
							<Grid.ColumnDefinitions>
								<ColumnDefinition/>
								<ColumnDefinition/>
								<ColumnDefinition/>
								<ColumnDefinition/>
							</Grid.ColumnDefinitions>
							<TextBlock Grid.ColumnSpan="2" HorizontalAlignment="Center" Text="Main Header1" Grid.Column="0" />
							<TextBlock Grid.Row="1" Grid.Column="0" Text="Id1" />
							<TextBlock Grid.Row="1" Grid.Column="1" Text="Name1" />
							<TextBlock Grid.ColumnSpan="2" HorizontalAlignment="Center" Text="Main Header2" Grid.Column="2" />
							<TextBlock Grid.Row="1" Grid.Column="2" Text="Id1" />
							<TextBlock Grid.Row="1" Grid.Column="3" Text="Name2" />
						</Grid>
					</DataGridTemplateColumn.Header>					
				</DataGridTemplateColumn>
			</DataGrid.Columns>-->
		</DataGrid>
		<ComboBox
			Height="20"
			RenderTransformOrigin="0.5,0.6"
			Width="120"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="158,75.5,0,0"></ComboBox>
		<Label
			x:Name="Project_Label"
			Content="Project No"
			Width="133"
			Height="29"
			Grid.Column="0"
			Grid.Row="0"
			VerticalAlignment="Top"
			HorizontalAlignment="Left"
			HorizontalContentAlignment="Center"
			VerticalContentAlignment="Center"
			Margin="35,70,0,0"
			RenderTransformOrigin="0.5,0.5" />
		<CheckBox
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="511,78.5,0,0" />
		<Label
			HorizontalContentAlignment="Center"
			VerticalContentAlignment="Center"
			Content="진행중 Only"
			Width="84"
			Height="26"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="427,74,0,0" />
		<ComboBox
			Width="120"
			Height="20"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="683,75.5,0,0" />
		<Label
			Content="Unit(호기)"
			HorizontalContentAlignment="Center"
			VerticalContentAlignment="Center"
			Width="123"
			Height="23"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="560,74.5,0,0" />
		<Label
			Content="작업Category"
			Width="100"
			Height="28"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="886,71.5,0,0" />
		<ComboBox
			Width="120"
			Height="20"
			Grid.Column="0"
			Grid.Row="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			Margin="994,76,0,0" />
	</Grid>
</Window>

시군별 평균수입/총수입 자료를 지도에 매핑해서 나타내보도록 하겠습니다.

아래의 자료는 시군별 평균수입/총수입 자료입니다.

한가지 추가로 필요한 파일이 시군구 지형자료입니다. 아래의 파일도 같은 프로젝트 폴더에 저장하고 실행합니다.

import folium as g
import json
import webbrowser
import pandas as pd

g_map = g.Map(location=[37.4, 127], 
            tiles='cartodbpositron', 
            # tiles = 'Stamen Terrain',
            zoom_start=7)
geo_data = json.load(open('skorea_municipalities_geo_simple.json', encoding='utf-8'))
df = pd.read_csv('aaa.csv', encoding='utf-8', dtype={'code':'str'})
g.Choropleth(geo_data=geo_data,
                data = df,
                columns=['sigun', 'avg_income'],
                key_on='feature.properties.name',
                fill_color='YlGn',
                fill_opacity=0.8
            ).add_to(g_map)
            
g_map.save('map.html')
webbrowser.open_new_tab('map.html')

fill_color옵션으로 색상 스타일을 변경할 수 있습니다. 종류는 아래와 같이 12가지 입니다.
'BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBu', 'PuBuGn', 'PuRd', 'RdPu', 'YlGn', 'YlGnBu', 'YlOrBr', 'YlOrRd'

오늘은 파이썬의 Folium 라이브러리로 지도를 그려보도록 하겠습니다.

보통의 예제들이 주피터 노트북을 이용해서 지도 결과물을 표시하도록 되어있었는데, 불행히도 제 PC에는 아직 주피터 노트북 설치를 안했네요. 그래서 한참동안 그냥 결과물을 보려고 고생을 하다가 갑자기 그녀석이 생각났습니다.

chatGPT~!!!

ㅋㅋㅋㅋ 한번 이용해봐야겠습니다.

첨엔 folium 결과를 matplotlib로 내보낼 수 있을까 하고 한참을 고민했는데, chatGPT도 실패를 했습니다. IPython을 깔기도 하고, 별의별 라이브러리를 다 갖다가 붙여놨는데, 결론은 이미지 파일로 만들어서 픽셀단위로 matplotlib에 뿌리더군요. 이건 좀 아니지 않나 싶어서 간단히 html로 만든 결과물을 브라우저로 자동으로 오픈시켜주는 코드로 마무리했습니다.

import folium as g
import webbrowser

# 기본 맵 중심점과 배율을 선언해주시고..
g_map = g.Map(location=[34.5, 128], zoom_start=7)

# 동그라미 표시할 지역 몇개만 찍어봅니다. (제주, 서울, 부산)
latlon=[
    [33.45, 126.56],
    [37.56, 126.97],
    [35.18, 129.08]
]

# 마커도 하나 추가하구요.
marker = g.Marker([37.5, 127.1],
                  popup='campus seven',
                  icon=g.Icon(color='blue'))
marker.add_to(g_map)

# 지역을 돌아가면서 흰색 원과, 파란색 원을 그려줍니다.
for i in range(len(latlon)):
    g.Circle(
        location = latlon[i],
        radius = 50,
        color = '#000000',
        fill='crimson',
    ).add_to(g_map)

for j in range(len(latlon)):
    g.CircleMarker(
        latlon[j],
        radius=70,
        color='skyblue',
        popup='campus seven',
        fill_color='skyblue'
    ).add_to(g_map)

# g_map # 주피터노트로 볼 때 쓰던 코드

# html로 저장한 후 띄워주는 부분
g_map.save('map.html')
webbrowser.open_new_tab('map.html')

chatGPT로 했음에도 한참 걸렸네요. 이렇게 간단히 지도를 띄우고 필요한 도형을 표시하는 법, 주피터노트 없이 띄우는 법을 알아보았습니다. 

그럼 이만~~~