하루y

package.json 버전 표기법.

1.버전규칙:

• 규칙 "major.minor.patch"
• major: 하위 호환성이 깨질 때 버전 올림.
• minor: 하위 호환성이 유지되면서, 새기능이 추가할 때 버전 올림.
• patch: 버그 수정 등에 버전 올림.

2.버전 표기법

2.1 Ranges (>, <=, <, <=)

- =version, >version, <version, <=version
예) ">1.2.3": 1.2.3 버전 이상

2.2 Hyphen Ranges ( - )

• " - " 로 범위 버전을 지정하고, " "또는 "||"로 표현이 가능함('or' 의미).
  예)
• "1.2.3 - 2.3.4" := ">= 1.2.3 <= 2.3.4"

2.3 Tilde Ranges (~)

예)

• "~1.2.3" : 1.2.3 이상, 1.3.0 미만
• "~1.2" : 1.2.0 이상, 1.3.0 미만
• "~1" : 1.0.0 이상, 2.0.0 미만

2.4 Caret Ranges (^)

"major.minor.patch" 버전에서 가족 왼쪽에 버전이 0이 아닌 숫자를 수정하지 않는 변경을 허용함.

• "^1.2.3": 1.2.3 이상, 2.0.0 미만
• "^0.2.3": 0.2.3 이상, 0.3.0 미만
• "^0.0.3": 0.0.3 이상, 0.0.4 미만

2.5 X-Ranges (X, *)

와일드 카드 의미.

• "*": 모든 버전을 허용
• " ": 모든 버전을 허용
• "1.2.X": 1.2.0 이상, 1.3 미만

3.참조

https://docs.npmjs.com/cli/v7/using-npm/semver#versions
https://semver.org/
https://semver.org/lang/ko/

1.1), 1.2) 내용을 숙지하고,

 1) UI 디자인은 Adobe XD로 작성하고

 2) supernova로 import후 앱디자인을 수정후 export 해서

 3) Android Studio에서 빌드 및 디버깅 함.

- UI가 간단하면 supernova가 없어도 될 것 같은데, 디자인품질면서 XD작업 후, sueprnova가 없으면 일이 귀찮을 듯함.

1. UI 디자인을 위해서 알아야할 지식

   (한글: flutter-ko.dev/ 사이트, 영문: flutter.dev/ , 현재 영문만 flutter2 문서가 업데이트 되었음)

 1)  flutter-ko.dev/docs 에서 UI 디자인 부분 참조하기. 초보자를 위한 Flutter 관련 서적에 있는 수준임.

 2) 특히, flutter-ko.dev/docs/development/ui/layout 에서 위젯을 이용해서, 레이아웃을 어떻게 구성하는지 알아야 함.

 3) 다양한 디자인은 아래 사이트 참조할 것.

   . flutter.dev/docs/development/ui/widgets : 관련 widget 목록. 가능한 자원을 알아야 레이아웃 구성에 도움이 됨.

 4) 디자인 가이드

 - 구글 가이드 : material.io/design

 - 애플 가이드: developer.apple.com/design/human-interface-guidelines/

                       developer.apple.com/kr/design/tips/#graphics

2. UI 디자인 관련 도구

UI 디자인 관련 유명한 툴은 아래와 같음.

 - Adobe XD : UI 디자인과 와이어프레임 구성이 가능하고, 개인은 무료로 사용이 가능함. 협업까지 하려면, 유료임.

    다양한 라이브러리 자산을 통해서 에셋(디자인부품같은)을 통해서, CSS 처럼 자원을 관리가 가능함.

    디자인 편의성이 많음.

   . 많은 라이블러기 유료로 구매 가능함.

 - Figma: 웹도구로 UI 디자인과 와이어프레임 구성 및 협업이 가능함.  개인 무료, 협의까지 하려면 유료.

 - sketch: UI디자인과 와이어프레임 작성 및 협의 가능. 30일 무료. 이후 유료.

 - supernova : UI디자인 및 export를 통해서 Flutter, iOS, Android,React Native 소스코드를 생성할 수 있음.(export 후 디버깅 필요함)

3. 앱개발 UI 참조사이트

 - screenlane.com/ : 앱 디자인 마켓. 여러 디자인을 참조 할 수 있음.

#관련링크

 - Flutter Visual Design tools for Non Developers

 - Flutter 관련링크 모음

- adobe XD, supernova, andrioid Studio 를 이용한 UI 작업.

www.youtube.com/watch?v=Lldzw4d_tFg

- ref url : https://www.grapecity.com/en/forums/spread-winforms/sample-code-to-insert-a-sp

private void button2_Click(object sender, EventArgs e)
{
	object[,] values = {{"ID","Math","LA","Science"},
						{"1",50,25,55},
						{"2",92,24,24},
						{"3",65,70,60},
						{"4",24,26,20},
						{"5",80,26,20}
	};

	this.grdMain.Sheets[1].SetArray(0, 0, values);

	this.InsertChart(this.grdMain, 1);

}

private void InsertChart(FpSpread fps, Int32 charttype)
{
	SheetView sv = fps.Sheets[1];
	if (charttype == 1) // clustereed columns
	{
		BarSeries s1 = new BarSeries();
		s1.SeriesName = sv.Cells[0, 1].Value.ToString();
		s1.Values.DataSource = new SeriesDataField(fps, "Math", "Sheet2!$B$2:$B$6");
		BarSeries s2 = new BarSeries();
		s2.SeriesName = sv.Cells[0, 2].Value.ToString();
		s2.Values.DataSource = new SeriesDataField(fps, "LA", "Sheet2!$C$2:$C$6");
		BarSeries s3 = new BarSeries();
		s3.SeriesName = sv.Cells[0, 3].Value.ToString();
		s3.Values.DataSource = new SeriesDataField(fps, "Science", "Sheet2!$D$2:$D$6");

		ClusteredBarSeries ss = new ClusteredBarSeries();
		ss.Series.Add(s1);
		ss.Series.Add(s2);
		ss.Series.Add(s3);

		YPlotArea yplotarea1 = new YPlotArea();
		yplotarea1.Series.Add(ss);
		SpreadChart chart1 = new SpreadChart();
		chart1.Model.PlotAreas.Add(yplotarea1);

		chart1.Rectangle = new System.Drawing.Rectangle(150, 150, 150, 150);
		chart1.SheetName = "Sheet1";

		// You missed this line of code
		fps.Sheets[0].Charts.Add(chart1);
	}
}

일부 버전에서 버그가 있을 수 있음. 한 Series에서 되도, Stack Bar 에서는 오동작 나는 경우 있음.

using System;
using System.Windows.Forms;

namespace WinFormChart01
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            this.bar1.FillSampleValues(7);
            this.bar2.FillSampleValues(7);
            this.points1.FillSampleValues(7);


            Steema.TeeChart.Tools.MarksTip marksTip1 = new Steema.TeeChart.Tools.MarksTip();

       
            this.tChart1.Tools.Add(marksTip1);
        
            // Tool에 marksTip을 추가 후 속성을 설정해야 함. 반대로 하면 객체를 못참음~
            marksTip1.HideDelay = 2501;
            marksTip1.MouseDelay = 50;

            // Y value 표시
            marksTip1.Style = Steema.TeeChart.Styles.MarksStyles.Value;

            // move hover 일때 tooltip 표시
            marksTip1.MouseAction = Steema.TeeChart.Tools.MarksTipMouseAction.Move;

            // point series는 커스텀 으로 tooltip 처리함.
            points1.GetSeriesMark += Form1_GetSeriesMark;


        }

        void Form1_GetSeriesMark(Steema.TeeChart.Styles.Series series, Steema.TeeChart.Styles.GetSeriesMarkEventArgs e)
        {
            e.MarkText = series.Title + ":\n - X: " + series.XValues[e.ValueIndex].ToString() + "\n - Y: " + series.YValues[e.ValueIndex].ToString();
        }
    }
}