[빙챗 사용기] 챗지피티(Chat GPT)와 빙챗(Bing Chat)비교 #뉴빙

기타|2023. 2. 25. 13:33
반응형

작년말 부터 챗지피티(chat gpt)가 엄청난 인기를 끌고 있다. 해외 물품 판매를 위한 쇼피파이 웹사이트를 제작하면서 Chat GPT에 위력을 체감 하였다.

마이크로소프트의 빙이 채팅 기능을 출시한다 하여 빠르게 웨이팅 리스트에 이름을 올렸다.

그리고  어제 아침 아래의 이메일을 받았다.

(이렇게 빨리 받을 수 있을거라 생각하지 못했다.)

 

(코드 생성은 플러터와 스벨트를 실험해봤다.)

 

이제 CHAT GPT와 Bing Chat을 비교해보자!

 

1. 실시간 기능

- Chat gpt

가장 단순한 질문인 한국의 대통령이 누구냐는 것을 물어보았지만, Chat GPT의 정보는 2021년에 머물러 있다.

재미있게 즐겨보는 유튜버에 대해 물어보았다. 

 

- 빙챗

똑같이 한국대통령이 누구냐고 물어보았다. 아래 나오듯이 먼저 검색을 한뒤에 답변을 만들어준다.

 

이번에는 슈카월드에 대해서 물어봤다. 확실히 최신정보를 바탕으로 정보를 준다.

 

 

2. 광고 카피와 뉴스기사 만들기

- Chat GPT

20대 여성을 타깃으로한 핸드폰 보호케이스에 대한 광고 카피 3개를 만들어 달라고 하였다. 그리고 튼튼함, 독성이 없는 물질, 귀여운고양이 3마리 디자인을 특징으로 한다는 추가 정보를 주었다.

 

 

답변이 의도와 다르게 타깃 그룹을 카피 문구에 넣어서 카피 문구에 빼달라고 요청했다. 아래 처럼 영어 카피가 만들어 졌다. 아래의 답변을 바탕으로 쉽게 해외마케팅에 사용할 수 있다.

 

이번에는 뉴스기사를 만들어 달라고 해봤다.

 

 

-빙챗

과연 빙챗도 잘 할 수 있을까? 

 

아래 답변을 보니 꽤 괜찮다.

 

 

그럼 위를 바탕으로 신문기사를 만들어 달라고 해볼 것이다

 

놀라운건 온라인에서 찾은 팁을 통해서 생성을 했다는 것이다.

나름 괜찮게 적은거 같다. 심지어 영업담당자와 대표의 이름과 하는 말까지 지어내 준다.

 

 

3. 코딩

그럼 코딩도 할 수 있을까?

 

-Chat GPT

먼저 Chat GPT에 차례다.

아래 처럼 길게 길게 적어준다. 이 외에도 더 쭉쭉 길게 만들어주는데 생략한다.

 

 

 

-빙챗

다음은 빙 챗의 차례이다. 기대가 된다.

여기까지 이해했냐고 물어본다. ㄷㄷ

그래서 이해했다고 대답하였다.

또 빙 챗이 물어본다. 그리고 아래에 할 수 있는 답변들이 적혀 있다.

No, Please continue를 선택해본다.

 

마치 선생님이 가르쳐 주듯이  나누어서 코드를 설명해준다.

 이런식으로 계속해서 설명을 해준다. 이 정도로 자세하게 적어줄지는 몰랏다.  잘 되는지는 실행해보지 않았다.

챗 GPT도 엄청나지만 빙챗도 엄청난거 같다.

 

플러터로 간단한 코드를 만들어 달라고 했을땐 Chat GPT와 같이 예전 코드를 사용했으며, 실행을 하려면 수정이 필요했다.  

 

 

결론

GPT 만큼 빙챗도 좋다. 빙챗도 어떻게 묻느냐에 따라 다른 답변을 줌으로 Chat GPT처럼 잘 물어보고 요청하는게 중요한 것 같다.  UI는 개인적으로 chat gpt가 더 깔끔해서 마음에 든다.

앞으로 구글 bard가 나오게 되면 이 둘을 뛰어넘을 수 있을지 궁금하다. 

 

댓글()

[SVELTEKIT] capacitor 사용하여 안드로이드 앱 만들기

Computer 관심/Svelte|2022. 2. 20. 00:40
반응형

아이오닉사용해서 sveltekit 안드로이드 앱만들기

 

이미 스벨트로 만들어 놓은 코드가 있어서, 굳이 플러터 flutter를 사용하지 않고 기존 코드를 이용하여 앱을 만들어 보고 싶었다. 처음 앱으로 빌드할 때 좀 느렸지만 이후엔 빠르게 빌드가 됬다. 

오래 사용해보지 않아 얼마나 좋은지 나쁜지는 잘 모르겠지만 가벼운앱을 만들땐 괜찮을 않을까 싶다.

 

 

1. 기존에 있던 프로젝트에 capacitor 설치하기

npm install @capacitor/core @capacitor/cli

 

2. capacitor init 하기

capacitor를 init할때 스벨트킷의 빌드할 폴더는 build이기 때문에 기본값 www대신 build로 적어 준다..

(혹시라도 init 때 www로 설정해놓더라도 capacitor.config.ts의 webDir에서 나중에 바꿀 수 있으니 걱정할 필요 없다.)

npx cap init

 

3. 안드로이드나 IOS 플랫폼 설치

npm i @capacitor/ios @capacitor/android
npx cap add android //안드로이드 추가
npx cap add ios //ios 추가

 

4. 싱글페이지 빌드용 어뎁터 설치하기

npm i -D @sveltejs/adapter-static

https://github.com/sveltejs/kit/tree/master/packages/adapter-static

 

5.  싱글페이지로 빌드하기 위해 svelte.config에 아래와 같은 코드를 넣어준다. 

import adapter from '@sveltejs/adapter-static';

 

아래 코드를 보듯 기존 import adapter from '@sveltejs/adapter-auto'; 를 대체하였다.

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(
        {fallback: 'index.html'}
        )
	}
};

export default config;

6. routes/+layout.js 파일 만들고 

export const prerender = true

 

 

 

7. 스벨트 빌드하기

npm run build

 

 

 

8.실행시키기

//안드로이드 스튜디오에서 실행
npx cap open android 

//실기기 실행
npx cap run android

 

 

 

 

-----------------------------------------------------

 

 

라이브 리로드

1. capacitor.config.ts의 내용을 아래로 대체함

import { CapacitorConfig } from '@capacitor/cli';

const appId = '앱.아이.디';
const appName = '앱이름';
const server = process.argv.includes('-hmr') ? {
  'url': 'http://192.168.5.67:5173',   // always have http:// in url
  'cleartext': true
} : {};
console.log(server);
const webDir = 'build';

const config: CapacitorConfig = {
  appId,
  appName,
  webDir,
  server
};

if (process.argv.includes('-hmr')) console.log('WARNING: running capacitor with livereload config', config);

export default config;

 

2. svelte를 디버깅 모드로 실행

npm run dev -- --host //호스트를 넣어서 아이피를 오픈해줘야함

 

3. 실기기에서 실행

cmd창을 하나 더 열고 아래의 명령어를 입력함

npx cap run android

 

 

 

 

참조

https://capacitorjs.com/docs/cli

 

Capacitor: Cross-platform native runtime for web apps

Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript

capacitorjs.com

 

 

댓글()

[에디터 잘써먹고 스타일 잘해보기] 플러터 위젯 이해하기

Computer 비관심/Flutter|2021. 7. 17. 00:53
반응형

플러터 위젯 이해하기

여기서는 플러터를 시작하는 많은 사람들이 중요하지만 놓칠 수 있는 부분을 설명하려고 한다. 

플러터는 위젯으로 구성되어 있다. 그렇기 때문에 위젯을 이해해야 쉽게 웹사이트 혹은 어플리케이션을 만들 수 있다.

HTML의 구성요소들은 인터넷에 찾으면 쉽게 찾을 수 있다. 그리고 그걸 어떻게 원하는데로 스타일을 할지도 쉽게 찾을 수 있다. 

 

하지만 플러터는 신상프레임워크이기 때문에 우리가 찾기가 어려울 수도 있다. 그런데 플러터는 텍스트에디터의 도움을 아주 잘 받았다.  텍스트에디터를 잘 이용하면 위젯의 속성명과 거기에 들어가야하는 값이 무엇인지 알 수 있다. 이게 아주 중요하다. 개발의 이걸 알고 개발을 하고 모르고 개발을 하냐에 따라서 개발의 속도가 크게 차이가 난다. 

 

특히나 HTML에 익숙하지만 플러터는 스타일이 어렵다고 느끼면 HTML과 플러터의 차이를 분석해 봐야 할 필요가 있다.

예를 들면 Text위젯 위에 마우스 커서를 올리니 텍스트위젯의 다양한 속성들과 들어가야 할 값이 나온다.

우선 Text() 데이터 값이 들어가야한다 데이터형은 문자형이다. ?가 없기 때문에 nullable이 아닌것을 알 수 있다. 꼭 적어야한다. 

 

글자의 크기를 크게 만들고 싶은데 안에 보이는게 TextStyle? style이 보인다. {}중가로 안에 들어 있으니 속성을 명시한다. 즉 속성명은 style이고 거기에 들어가야 하는 값은 TextStyle 형이다. TextStyle()위젯은 TextStyle형일테니 일단 TextStyle()을 넣어본다. TextStyle이 abstract는 아니니 사용할 수 있는 위젯이다.

Text('HELLO WORLD', style:TextStyle())

 아직 글씨 크기를 설정하는 것을 하나도 넣지 않았다. 그러면 TextStyle에 어떤 속성과 값이 들어가야 우리가 원하는 것을 이룰 수 있을지 확인해 보자.

오케이! 찾았다. 딱봐도 fontSize가 속성이고 거기 들어가는 값은 double 즉, 실수 이다.  그럼 30.0을 넣어본다.

크기가 아주 잘 변한다!

플러터는 이렇게 속성명과 속성에 들어가야하는 것을 에디터를 통해 쉽게 찾을 수 있다. HTML은 CSS가 따로 분리되어 있기 때문에 외우기가 쉽다. 그리고 속성명과 값이 단순하다. 

하지만 플러터는 거기에 필요한 속성과 다양한 위젯을 알아야 하기 때문에 외우기가 더 어렵다. 게다가 속성명과 거기에 들어가는 위젯의 이름이 길기도 하다. 인터넷에서 하나하나 찾으려는 것도 고역이고 도데체 멀써야 이게 되고 멀써야 이게 되는지 알기도 어렵다. 

 

하지만 이러한 방식을 찾아서 하면 쉽게 스타일을 만들고 위젯에 필요한 것들 보고 직관적으로 이것이 필요할 것이라고 추축할 수 있다.

 

한게만 더 해보자

우리가 처음 앱을 만들면 실행되는 화면이다. 여기서 Column위젯을 구경해 볼 것이다.

아래 스크린샷을 보듯 mainAxisAlignment: MainAxisAlignment.center로 되어있다. 왜 기본앱에 이런 디자인이 되어있을까?

이유는 Column위젯의 속성과 속성값을 보면 알 수 있다.

 

 

 

모든 속성들이{}로 감싸져 있다. 즉, 속성의 이름: 속성값 형식으로 속성을 넣어줘야 한다.

그리고  mainAxisAlignment = MainAxisAlignment.start로 되어있다. 이건 mainAxisAlignment의 속성이 defualt로 MainAxisAlignment.start로 되어있다는 것이다. 만약 저 mainAxisAlignment: MainAxisAlignment.center를 지워버리면 

기본 디폴트값인 MainAlignment.start로 가고 아래 스크린샷 처럼 되어버리고 만다.

 

우리가 많이쓰는 Container 위젯을 보자. 여기에 만약 border radius를 넣고 싶으면 어떻게 해야할까?

딱보니 decoration속성에 radius관련 된게 있을 것 같다. decoration의 값은 형을 보니 Decoration()이 아닐까?

아쉽게도 Abstract class라 사용하지 못하고 이것을 통해 만들어진 다른 클레스를 사용해야 한다.

그럼 무엇을 사용 해야 할까? decoration속성 뒤에 :(콜론)을 찍고 조금 기다리니 여기에 들어갈 수 있는 것들과 다양한 위젯들이 나온다

(***리스트의 아래쪽은 못 들어가는 것도 나오기 때문에 추천하는것에서 데이터의 타입을 확인해봐야 한다.).

박스데코레이션을 선택해봤다.

border속성에 BoxBorder 타입이 들어간다. 한번 BoxBorder위젯을 넣어보자.

 

드럽게 많이 나온다. 뭐를 넣어야 내가 원하는게 나올지 예측이 안된다.... 이정도면 그냥 검색이 빠르겠다. ㅎㅎㅎ 

이럴땐 검색 추천

 

 

갓 시작하신 분들이나 웹에서 CSS에 익숙하신 분들이 도움이 될 수도 있는 부분이 있었으면 좋겠네요.

 

 

 

 

 

댓글()

플러터 listView와 sliverList 으로 리스트 그리기

Computer 비관심/Flutter|2021. 6. 26. 23:57
반응형

Front는 과연 무엇일까 하는 생각이 들었다.

심플하게 말하자면 데이터를 보기 좋게 뿌려주는 것이다. 그것을 UI라고 한다.

그 중에 가장 기본이 되는 것은 어떻게 반복되는 형식을 front에 뿌려주는 것인가 일 것이다.

 

flutter의 sliverList와 ListView가 기본적으로 많이 사용되는 리스트 위젯일 것이다. 

이들은 index는 0부터 시작해서 정해진 아이템(자식)의 숫자만큼 반복할 것이다.

 

아래를 보면 listview.build메서드의 프로퍼티에 itemCount를 전달한다. 그러면 build메서드는 이렇게 전달받은 카운트 만큼 반복을 하며 itembuilder에 넣은 함수에 index를 전달할 것이다.  

 

sliverList역시 딜리게이션에 context와 index를 전달 하는 함수를 만들고

이렇게 전달받은 바뀐 index를 가지고 위젯을 만들어낸다.

 

builder에 보여지는 만큼 위젯이 만들어지는 기능을 지니고 있다.

//자바스크립트였으면 이렇게 했을 것이다.(레이지로딩이 없다면)
for(let index = 0; index < 10; index++){
	console.log(index)
}

//혹은 vuejs
<li v-for="i in 10">
	<div>{i}</div>
</li>


------------------------------
// 플러터 listView
// 열개의 자식들 itemCount에 리스팅할 자식의 갯수 넣음
ListView.builder(
  itemCount: 10,
  itemBuilder: (BuildContext ctxt, int index) {
  return new Text(index.toString());
}),


//플러터 sliverList

SliverList(
  delegate: SliverChildBuilderDelegate(
  (BuildContext context, int index) {
    return Card(
      margin: EdgeInsets.all(15),
      child: Container(
        color: Colors.blue[100 * (index % 9 + 1)],
        height: 80,
        alignment: Alignment.center,
        child: Text(
          "Item $index",
          style: TextStyle(fontSize: 30),
          ),
        ),
    );
  },
  childCount: 10, // 10 list item <-listCount 와 같음
  ),
),

 

댓글()

[플러터] 플러터 애드몹 달기

Computer 비관심/Flutter|2021. 5. 1. 00:16
반응형

플러터에서 애드몹을 달때 사용하던 패키지가 기존에 firebase_admob에서 pub.dev/packages/google_mobile_ads 이걸로 바뀌었다.

 

광고 다는 법은 공식 사이트에 나온 그대로 따라하면 된다. 설명이 쉽게 나와있다.

 

기존의 애드몹은 자동으로 맨 밑 바닥에 광고를 붙여줬는데 새로운 애드몹 패키지에선 위젯으로 만들어 자신이 원하는 위치에 붙일 수 있다.

 

 

 

그런데 저 광고 패키지를 설치 할때 에러 때문에 고생했는데 

원인은 gradle을 업데이트 해야했다

.

 

1. gradle\wrapper\gradle-wraper.properties 여기에 들어가 아래의 배포버전을 넣는다.

distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip

 

 

2. android\build.grale에서 버전을 수정한다.

dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'

 

 

그리고 플러터에서 오래된 패키지들을 확인 할 수 있는 방법

 

flutter pub outdated 를 치면 오래된 패키지들의 버전과 최신버전들이 나온다.

 

flutter packages upgrade 를 치면 모두다 업데이트 된다. 

 

귀찮다고 방치하기보단 자주 업데이트 해서 고생하지 않는게 좋은거 같다.

 

 

 

댓글()

플러터 처음 빨리 시작하기~

Computer 비관심/Flutter|2021. 4. 23. 01:04
반응형

1. 폴더구조

플러터개발시작시 유튜버들이 많이 사용하는 폴더구조

 

2. 스타일에 사용될 상수 만들기

디자인과 관련된 상수를 가진 색상 클래스, 엘리먼트 형태관련 클래스를 만들어서 디자인을 쉽게 하기

 

3. 데이터 모델 만들기

사용할 데이터의 형태를 지정하기 위해 데이터 모델만들기

 

4. 실제 사용하거나 UI디자인/테스트를 위한 데이터 만들기

개발중 데이터를 제공할 파일을 만듬

 

5. 여러개의 스크린을 불러올 수 있는 스크린콜랙션파일 생성 (Optional)

 

6. 여러개의 위젯을 불러올 수 있는 위젯콜렉션파일 생성

 

7. 웹을 위한 반응형 위젯 만들기

 

8. 데이터 오브젝트나 오브젝트 리스트를 json으로 바꾸기

 

9. 스트링으로 된 Json을 리스트로 바꾸기

 

10. GetX로 상태관리

GetX를 통해 state를 관리

 

11. GetX List 읽고 쓰고 수정하고 지우기

 

기타 미분류

플러터 위젯에 대해

 

 

 

 

1. 폴더구조

- assets/icons -svg

- assets/images -png

-lib/controllers

-lib/models - xxx_model.dart

-lib/screens - xxx_screen.dart

-lib/services

-lib/widgets 

-lib/configs/palette.dart

 

 

2. 스타일에 사용될 상수 만들기

lib/configs/pallette.dart

공통으로 쓰일 칼러지정

class Palette {
	static const Color PrimaryColor = Color(0xFF473F97);
}

 

materialApp / GetMaterialApp의 theme 속성을 사용할시

 

 

theme: ThemeData(
  // 앱바의 배경색과 글자의 색과 형태를 설정
  appBarTheme: Const AppBarTheme(backgroundColor: Palette.background, title: TextStyle( color: Colors.white, fontSize: 18,)),
  // 배경색을 설정
  sccaffoldBackgroundColor: Palette.background,
  // The background color for major parts of the app (toolbars, tab bars, etc)
  primaryColor: Colors.white,
  //버튼 등 색상
  accentColor: Palette.green,
  iconTheme: const IconThemeData(color: colors.black),
  fontFamily: GoogleFonts.montserrat().fontFamily,
  textTheme: GoogleFonts.montserratTextTheme(),
),
home: 홈스크린으로 사용할 위젯

 

 

 

lib/configs/styles.dart

공통으로 쓰일 엘레멘트의 스타일 지정

class Styles {
	statics const buttonTextStyle = TextStyle(
     fontSize:16.0,
     fontWeight: FontWeight.w600);
    
    statics const ChartTextStyle = TextStyle(
     color:Clors.grey,
     fontSize:16.0,
     fontWeight: FontWeight.w500);
    
    statics const tapTextStyle = TextStyle(
     fontSize:16.0,
     fontWeight: FontWeight.w600);
}

 

or

 

lib/configs/consts.dart

const kTextColor = Color(0xFF535353);
const kTextLightColor = Color(0xFFACACAC);
const kDefaultPadding = 20.0;

 

 

3. 데이터 모델

lib/model/product.dart

class Product {
string a, b, c;
	product ({this.a, this.b, this.c})
}

 

Json로 클래스를 만들어주는 사이트 - 여기서 쉽게 데이터 모델을 만들 수 있다.

javiercbk.github.io/json_to_dart/

 

 

4. 실제 사용하거나 UI디자인/테스트를 위한 데이터 만들기

lib/data/data.dart

List<Map> categories = [{"name":"music","icon": Icons.music_note,} {...},{...}];


List<Product> icecreamProducts = [
Product(a:'a',c:'ass',b:'ddd'),
Product(a:'a',c:'ass',b:'ddd'),
Product(...),
Product(...),
Product(...),
];

List<Product> chocolateProducts = [
Product(a:'a',c:'ass',b:'ddd'),
Product(a:'a',c:'ass',b:'ddd'), 
Product(...)
];

 

 

5. 여러개의 스크린을 불러올 수 있는 스크린콜랙션파일 생성

lib/screens/screens.dart

스크린들을 불러오는데 사용

(Marcus Ng 유튜브 비디오 참조)

 

export 'bottom_nav_screen.dart';
export 'home_screen.dart';
export 'stats_screen.dart;

 

 

6.  여러개의 위젯을 불러올 수 있는 위젯콜렉션파일 생성

lib/widgets/widgets.dart

위젯 불러오는데 사용

(Marcus Ng 유튜브 비디오 참조)

 

 

7. 웹을 위한 반응형 위젯 만들기

lib/widgets/responsive.dart

import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;
  Responsive({Key key, @requred this.mobile, this.tablet, @required this.desktop})
      : super(key: key);

  static bool isMobile(BuildContext context) => 
    MediaQuery.of(context).size.width < 800;
  
  static bool isTablet(BuildContext context) => 
    MediaQuery.of(context).size.width >= 800 &&
    MediaQuery.of(context).size.width < 1200;
    
  static bool isDesktop(BuildContext context) => 
    MediaQuery.of(context).size.width >= 1200;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth >= 1200) {
        return desktop;
      } else if (constraints.maxWidth >=800) {
        return tablet ?? mobile;
      } else {
       return mobile;
      }
    });
  }
}

 

 

8. 데이터 오브젝트나 오브젝트 리스트를 json으로 바꾸기

List<Product> dataList =[
Product(name:'Product A', price:3700),
Pproduct(name:'Product B', price:3800),
]

String jsonDataList = jsonEncode(dataList);

 

bezkoder.com/dart-flutter-convert-object-to-json-string/

 

 

9. 스트링으로 된 Json을 리스트로 바꾸기

List dataList = jsonDecode(jsonDataList);
dataList.map((data) => Stock.fromJson(data)).toList();

stackoverflow.com/questions/51053954/how-to-deserialize-a-list-of-objects-from-json-in-flutter

 

 

10. GetX로 상태관리

 


// 데이터를 받아와야 할때
class MyStocksCtr extends GetxController {
  List<dynamic> products = [].obs;
  @override
  void onInit() {
    products.assignAll(datas); // 이렇게 말고 asyn 함수를 만들어야 함
    super.onInit();
  }
}

 

class MyStockScreen extends StatelessWidget {
  final MyStocksCtr controller = Get.put(MyStocksCtr());
  
  ...
  
  
  
  child: Obx(() {
            return ListView.builder(
                 itemCount: controller.products.length,
                 itemBuilder: (context, index) {
                   final Stock stock = controller.products[index];
                   return CustomCard(stock: stock);
                  }
              );
            },
          ),

 

 

쓰기 controller.products.add(쓸객체)

지우기 controller.products.delete(지울엘리먼트)

인덱스로 지우기 controller.products.deleteAt(지울엘리멘트의 인덱스)

 

수정

위젯에서 리스트의 인덱스 받기 

인덱스가 있으면 에디팅컨트롤러의 텍스트에 기존 내용을 넣기 

controller.products[index].속성 = 에디팅컨트롤러의 수정된 내용

 

Get.back

Get.to(() => MyHomePage(title: '전달값')

 

 

 

- 플러터는 레고의 블럭을 껴서 만드는 방식과 비슷하게 만들어 진다. 그 블럭을 위젯이라고 하는데 그런 위젯을 직접만들거나 남들이 제공하는 위젯을 끼워넣는 방식으로 개발이 이루어진다. 이와 같은 플러터의 구성 때문에 위젯간의 데이터 전달(커뮤니케이션)이 개발에서 상당히 중요하다.

 

- 개발시 stateful위젯과 stateless 위젯을 상속하여 자신의 위젯을 만드는데 stateless는 변화되는 상태값을 가지고 있지 않지만 stateful 위젯은 변화되는 상태값을 가지고 있다.

 

stateless 위젯은 직접 위젯을 build 하는 메서드를 가지고 있으며 값은 생성자를 통해 전달받으며 변하지 않는다. 

 

stateful 위젯은 생성자를 통해 값을 전달 받지만 state를 관리하기 위해 state위젯을 상속한 클래스를 불러서 그 클래스의 값을 state로 한다. 그리고 그 스테이트위젯을 상속한 클래스는 build메서드를 가지고 있다. 

 

즉,

class Bird extends StatefulWidget {
  const Bird({
    Key? key,
    this.color = const Color(0xFFFFE306),
    this.child,
  }) : super(key: key);
  
  // 생성자를 통해 얻어올 값 
  final Color color;
  final Widget? child;
 
  // 스테이트를 가질 수 있는 객체를 실행
  _BirdState createState() => _BirdState();
}



class _BirdState extends State<Bird> {

  // 스테이트, 변할수 있는 값들
  double _size = 1.0;

  void grow() {
    setState(() { _size += 0.1; });
  }

  @override
  Widget build(BuildContext context) {
    // 여기에 변수를 사용하면 주로 UI와 관련된 변수 사용
    
    return Container(
      color: widget.color,
      transform: Matrix4.diagonal3Values(_size, _size, 1.0),
      child: widget.child,
    );
  }
}

 

 

 

UI를 개발시 기능은 미구현된 형태로 먼저 개발하면 편함

댓글()

플러터에서 자식 위젯의 메서드 부모에서 호출하기

Computer 비관심/Flutter|2021. 4. 10. 01:12
반응형

플러터는 위젯으로 구성되어 있다. 그렇기 때문에 위젯간의 소통을 할 수 있는 방법을 아는 것이 중요하다. 위젯간의 소통 방법들을 공부하지 않으면 분리되지 않은 거대 위젯으로 앱이 구성이 될 것이다.

 

 

부모의 버튼을 눌렀을때 자식 스크롤 위젯이 자동으로 맨 밑까지 내려오게 하는 기능을 구현해야 했다.

위젯이 나누어지지 않았을 때는 문제가 없었지만 위젯이 부모와 자식으로 나누어 지면서 버튼과 리스트가 분리 되었다.

 

 

이때 부모가 자식의 메서드를 호출해서 그 메서드가 자식을 움직이게 만드려면 어떻게 해야 할까?

StackOverflow에서 두가지 방법을 찾을 수 있었다.

 

 

첫번째는 메서드를 초기화한 클레스의 인스턴트를 전달하는 방법

1. 클레스에 메서드를 초기화 해서 자식 위젯에 인스턴트를 전달한다.

2. 자식위젯에서 구현한 메서드를 전달받은 인스턴트의 메서드에 넣는다.

3. 부모에서 구현한 메서드를 호출한다.

(그러면 자식에서 구현한 메서드가 실행됨)

 

class HomePageController {
  void Function() methodA;
}

class MyApp extends StatelessWidget {

  final HomePageController myController = HomePageController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.help),
            onPressed: () {
              myController.methodA();
            },
          ),// IconButton
        ),// AppBar
        body: HomePage(
          controller: myController,
        ),// HomePage
      ),
    );
  }
}

class HomePage extends StatefulWidget {

  final HomePageController controller;

  HomePage({ this.controller });

  @override
  _HomePageState createState() => _HomePageState(controller);
}

class _HomePageState extends State<HomePage> {

  _HomePageState(HomePageController _controller) {
    _controller.methodA = methodA;
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }

  void methodA() {}
}

 

 

 

두번째는 자식위젯에 글로벌키 넣어 접근하는 방법

1. 자식 위젯이 키를 전달 받을 수 있도록 만든다.

2. 자식 위젯에 글로벌 키를 만든뒤 자식에게 전달.

3. 만들어진 글로벌 키로 자식 메서드 접근

 

GlobalKey<_HomePageState> globalKey = GlobalKey();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.help),
            onPressed: () {
             globalKey.currentState.methodA();
            },
          ),
        ),
        body: HomePage(key: globalKey),
      ),
    );
  }
}
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  void methodA() {}
}

여기서 중요한건 위젯을 파일로 나누었을때 GlobalKey<_HomePageState> globalKey=GlobalKey()에서

_ (언더바) 를 사용하면 참조를 못 한다는 것이다. 

 

코드출처: stackoverflow.com/questions/53692798/flutter-calling-child-class-function-from-parent-class

댓글()

플러터에서 firebase_auth와 flask 서버 같이 사용하기.

Computer 비관심/Flutter|2020. 11. 7. 00:33
반응형

이렇게 사용하면 아래와 같은 장점이 있을 것 같다.

1. 사용자 개인정보를 직접 저장하고 있지 않아도 된다.

 - 개인정보의 보안이나 관리가 어렵다. 

2. 서버에서 구현하기 귀찮은 모바일확인, 페이스북&구글로그인 등을 쉽게 구현 가능하다.

3. firestore의 단점인 과금 문제를 보완 가능. - 정말 필요한 채팅서비스에서만 firestore를 사용하면 될듯. 나머지는 flask SQL서버에 저장.

4. 파이썬을 서버로 사용하기 때문에 데이터처리에도 유용하지 않을까.....?

 

플러터에서 

1. firebaseAuth로 로그인을 함

2. firebaseAuth로 아이디 토큰을 받음

3. http post로 토큰을 서버로 보냄.

 

서버에서

1. post로 온 토큰을 firebase의 

    decoded_token = auth.verify_id_token(id_token)

    uid = decoded_token['uid'] 사용해서 유저를 확인한다.

 

 

로컬호스트에서 진행 했기 때문에 실제 서비스를 하면

어떤 문제가 생기는지는 모르겠다. 

모바일 기기에서 http post를 보낼때 localhost라고 적으면 모바일이 ip를 알지 못하니

ipconfig에 들어가서 실제 로컬호스트 아이디를 입력해줘야 한다.

 

 

댓글()